Move Gallery Captions Back to Below Images

  • Resolved linux4me2

    (@linux4me2)


    5 years, 10 months ago

    I can’t provide a link because this site is only local at the moment, but the problem is easy to reproduce. Beginning in WP 5.0, gallery captions are now on top of the gallery images. If you have a caption with enough lines of text, the captions cover the image on smaller displays so it’s impossible to click the hyperlink on the image to view the full-size image or other page set as a custom link. This happens even with default themes.

    It appears the “figcaption” tags are loaded within the “figure” tags for the parent image, so I suspect the best fix involves moving the figcaption out of the figure tag but keeping it within the list item.

    There is an issue started regarding this on Github.

    In WP 5.x, what’s the best way to move the gallery captions to a position below the associated image like they were in WP 4.9.x?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Samuel Wood (Otto)

    (@otto42)

    www.ads-software.com Admin

    You need to have a few additional CSS rules to make this happen in your theme.

    The .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure element gets display:flex on it. You want to change that to something else, like inline-block or similar.

    Second, this element .entry .entry-content .wp-block-audio figcaption, .entry .entry-content .wp-block-video figcaption, .entry .entry-content .wp-block-image figcaption, .entry .entry-content .wp-block-gallery .blocks-gallery-image figcaption, .entry .entry-content .wp-block-gallery .blocks-gallery-item figcaption has the position:absolute on it. You’ll want to change that to relative.

    This will put the captions below the images all by itself. However, there’s a background gradient added to them, to make them blend into the picture better. You’ll want to adjust both the color: and the background: settings on the figcaption to correct this.

    Thread Starter linux4me2

    (@linux4me2)

    Thanks a lot for the help and the quick response. I really thought I was going to have to use a hook or filter for it, but with your suggestion I was able to come up with the CSS below. It’s not perfect, but it’s a good start;

    
/* Add multi-line by line breaks to Gutenberg galleries. */
.blocks-gallery-item figcaption {
	white-space: pre-line;
	color: #555 !important;
}

/* Prevent the last image from growing to fill available space if there aren't enough images in a row. */
.blocks-gallery-item {
	flex-grow: 0 !important;
	display: inline-block !important;
}

.wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure {
	display: inline-block;
	height: 70%;
	padding: 5px 0 25px 0;
}

.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption {
	position: relative;
	background: none;
	margin: 0 0 15px 0;
	padding: 0;
}
    Thread Starter linux4me2

    (@linux4me2)

    I refined the CSS above so that it works a bit better:

    
/* Add multi-line by line breaks to Gutenberg galleries. */
.blocks-gallery-item figcaption {
	white-space: pre-line;
	color: #555 !important;
}

/* Prevent the last image from growing to fill available space if there aren't three images in a row. */
.blocks-gallery-item {
	flex-grow: 0 !important;
	display: inline-block !important;
}

.wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure {
	display: inline-block;
	height: auto;
	padding: 5px 0;
}

.wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img {
	height: 270px;
}	

.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption {
	position: relative;
	background: none;
	margin: 10px 0 15px 0;
	padding: 0;
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Move Gallery Captions Back to Below Images’ is closed to new replies.