Support » Fixing WordPress » Move Gallery Captions Back to Below Images

  • Resolved linux4me2

    (@linux4me2)


    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 13 replies - 1 through 13 (of 13 total)
  • Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org 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.

    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;
    }
    

    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;
    }
    

    Thank you! This does work on two and three columns, just with two columns the thumbnails remain cropped at 270px.

    I’ve got a number of galleries in planning and clearly displayed date and title are vital, so thank you again 🙂

    Hi,

    In case it is of use, this is how I moved captions back below my gallery images in the new block editor:

    // Gallery captions
    
    .wp-block-gallery .blocks-gallery-item figure {
        flex-direction: column;
    }
    
    .wp-block-gallery .blocks-gallery-item figcaption {
        position: relative;
        bottom: auto;
        width: 100%;
        max-height: 100%;
        overflow: auto;
        padding: 10px 0 20px 0;
        color: #333;
        text-align: center;
        font-size: 13px;
        background: linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,0) 0%,transparent);
    }

    Then you can apply any other styles to the caption that you see fit. It seems to have done the trick.

    Thanks @jossoway

    It did the trick for me too.

    John, please explain where I put your code.

    Also, I am linking the thumbs to another page where it’s video can be played.
    I put the link in the caption area, but of course the link shows over the thumb. How can I attach a link where it is not seen. I don’t mind if the title shows over the thumb but under would be good also.

    Hi, the CSS in my example goes in your theme stylesheet, and should then override the default WordPress gallery caption styles.

    I’m not sure I understand the other question, sorry. Do you mean you don’t want gallery images to link to larger versions of the images, but to something else?

    I am looking for a way to have a thumb gallery where each thumb links to a page where I have only the one video from that thumb.

    The Block Still plugin has an option in the right column to select Link/Custom URL, which is what I want. A Gallery would be easier.

    Can you recommend one?

    I know people who recommend NextGen Gallery for WordPress, but I have not made use of it myself. Sorry I cannot be of more help here.

    I asked a couple of people I know and outside of custom development work, this was recommended, though I have not used it myself:

    Gallery Custom Links plugin

    12sp

    (@sp12)

    linux4me2 code worked for me. John O code remove my images and just had the captions. 🙁 ?

    How do I decrease the spacing between images with the default WordPress gallery?
    https://www.hardy.global/alvandenberg/?page_id=41

Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.