[Resolved] An issue with the height of images in a grid

Home Forums Support [Resolved] An issue with the height of images in a grid

Home Forums Support An issue with the height of images in a grid

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2160752
    Leo

    Hi there,

    I’m trying to achieve the images in a grid to have the same height. After reading your documentation, I played around with the GB container flex options, but I still can’t figure out how it works.

    You can see the issues here and here.

    #2160873
    David
    Staff
    Customer Support

    Hi there,

    ok so images are displayed according to their aspect ratio. The browser measures the width of the image, which is being ‘controlled’ by the columns width, and then uses its the aspect ratio to calculate its height.

    So if you have 2 images, with identical aspect ratios sharing equal % of the grid then they would have the same height.

    When any of those variables change the images are going to be different heights.

    Simple fix would be to add the images as a background to the Containers in the grid, and give the Containers the same min-height. It does mean some of the image will get cropped as they are forced to cover the container.

    #2161198
    Leo

    Hi David, thank you for answering so fast and for your explanation. I’m trying to rank for a specific keyword, and I want to make sure that Google finds the alt text and caption of the images. That’s why I wonder if it is better to display pics using image blocks than to have them as the container’s backgrounds.

    Does it make any difference from an SEO point of view?

    #2161386
    David
    Staff
    Customer Support

    Images using the Image Block may have better SEO juice as they can contain a caption and alt names, but I am no means an expert here so its just my assumption. If it is essential then try this method:

    1. Set both the columns to 50%. Each containing your Image Blocks.
    2. Select the Grid Block and in Advanced > Additional CSS Class(es) add: force-aspect-ratio
    3. Now add this CSS:

    .force-aspect-ratio img {
        aspect-ratio: 4 / 3;
        object-size: cover;
    }

    Adjust the aspect-ratio to suit.

    #2162269
    Leo

    Thank you, David. Images now display the same size, but they look bad since they must fit the forced size. Besides, I wish I could choose between different proportions for the containers (for example, 66% and 33%), not just 50% and 50%. I understand one must decide between the flexibility allowed by using backgrounds to the containers (with the drawback of missing alt texts and image captions) or using the much more rigid WP gallery block and keeping alt texts and captions. I’d like to have both. 🙂

    #2162295
    David
    Staff
    Customer Support

    Ok lets try another method.
    Remove any CSS and CSS classes you added.

    1. Add this CSS:

    .same-height-images .gb-container {
    	position: relative;
    }
    .same-height-images img {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	object-fit: cover;
    	z-index: 0;
    }
    .same-height-images figcaption {
    	position: absolute;
    	top: 100%;
            left: 0;
            right: 0;
    }

    2. Select the Grid Container and give it a class of: same-height-images

    3. Select the Columns, set them to the % widths you want eg. 33 / 66 and give them both a Spacing > Min Height eg. 250px.

    #2162416
    Leo

    Fantastic, David, that was just what I wanted! I’m very grateful for your kind assistance. 🙂 Just two more details:

    1. The left image of this grid should be slightly downwards. Is there any way to adjust its position?
    2. The caption of the same pic is left-aligned. If possible, I’d like all captions to be center-aligned.

    #2162418
    David
    Staff
    Customer Support

    1. Hmmm…. you can try adding some top margin to the columns container.

    2. I amended the CSS above to centre the caption

    #2162930
    Leo

    Captions are perfect now, thank you!

    Regarding the image, rather than centering the container, I’d wish to adjust just the position of the pic. As you can see, the image on the left shows cropped since the head of the person in the foreground is not visible. How can I adjust the position of the image without moving its container?

    #2162940
    Fernando
    Customer Support

    Hi Leo,

    To resolve this, you may a custom class to all images which has this specific issue then use this class as a selector for a custom CSS code.

    For instance, object-position-top: https://share.getcloudapp.com/xQuqWjd5

    Then you may add this CSS:

    figure.object-position-top > img {
        object-position: top;
    }

    Reference for object-position: https://css-tricks.com/almanac/properties/o/object-position/

    Hope this helps!

    #2162947
    Leo

    Great, Fernando. Thank you so much!

    #2162986
    Fernando
    Customer Support

    You’re welcome Leo! Glad to be of assistance! Feel free to reach out anytime if assistance with anything else is needed. 🙂

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