WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#27376 closed enhancement (fixed)

Gallery Live Preview img width css

Reported by: cramdesign Owned by: azaozz
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.9
Component: Editor Keywords: has-patch
Focuses: ui, administration Cc:

Description (last modified by SergeyBiryukov)

The live preview for galleries uses percentages to define the width of .gallery-item. It would be more elegant if .gallery img used:

max-width: 100%;
height: auto;

Looks like this should be in wp-content.css around line 337.

The widths of gallery-items could also be more precisely set if padding were used for separation rather than margin. This would require the use of border-box sizing however.

I have these changes tested and they work. A side benefit is that a horizontal scrollbar is no longer triggered by the gallery images when they overflow.

The captions in galleries with high column counts can get super narrow and the type distinctly ugly at narrow sizes but the only fix would be to reflow the columns in a responsive fashion and this is not the intent of the preview.

I would love to submit a patch but I haven't a clue with svn and barely a clue with git.

Attachments (4)

gallery-patch-wp-content.css (949 bytes) - added by cramdesign 6 years ago.
wp-content.diff (758 bytes) - added by cramdesign 6 years ago.
wp-content.css (5.7 KB) - added by cramdesign 6 years ago.
27376.patch (1.9 KB) - added by cramdesign 6 years ago.

Download all attachments as: .zip

Change History (7)

#1 @SergeyBiryukov
6 years ago

  • Description modified (diff)
  • Milestone changed from Awaiting Review to 3.9

I would love to submit a patch but I haven't a clue with svn and barely a clue with git.

Take a look at http://make.wordpress.org/core/handbook/working-with-trac/submitting-a-patch/.

@cramdesign
6 years ago

@cramdesign
6 years ago

#2 @cramdesign
6 years ago

  • Keywords has-patch added

Well, creating a patch file nearly defeated me and I'm not certain that I did it correctly. Hopefully some kind admin will delete my errors and extraneous files.

#3 @azaozz
6 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 27578:

TinyMCE:

  • Update the styling of the image caption and gallery toolbars.
  • Fix issue where the hidden clipboard div in wpView.
  • Switch to using the pencil dashicon for Edit.
  • Add max-width: 100%; to images in the gallery preview and adjust column widths.

Props cramdesign, mattheu, gcorne, melchoyce, see #27320, fixes #27376, fixes #27354

Note: See TracTickets for help on using tickets.