Gallery does not align picture, question about adaptive image size

  • Unknown's avatar
    bubbleteaboy · Member ·

    Hi, I have two queries:

    1. With the new block editor, I have found an issue with the ‘gallery’ block. Even though both my pictures are the same size, they end up not being aligned. I have tried changing the horizontal alignment (i.e. left, right, centre justification) and toggling ‘crop image size’. Toggling it on actually makes one smaller than the other while leaving it off keeps them same size but unaligned. I have left it on for now. My workaround at the moment is to use classic editor where the gallery function works fine for me. My example page is – https://thatbubbleteablog.wordpress.com/2019/01/03/coco/

    2. I was wondering whether I could make the images in my table adaptive. My page is https://thatbubbleteablog.wordpress.com/tier-list/. I don’t know how to place images in a table through the block editor so I used HTML code instead (I don’t have access to CSS code I believe?). In that code, I used ‘width’ and ‘height’ specifiers to make all the thumbnails the same size. However, I think this forces the width and height to be the same, even on mobiles. Do you have any advice? Is there an adaptive size HTML specifier I should be using instead of ‘width = 120’ and ‘height = 120’?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    Re issue 1, can you please confirm whether you used the block editor via My Sites or via WP-Admin? The Gallery block is currently all-Core WordPress, though the My Sites editor has some of our own code in there. We’re still working on adding the original WordPress.com tiled galleries that you find in the classic editor to the block editor.

    I notice both those images are much bigger than your site can actually display, and one is significantly bigger than the other as well. Can you please check if resizing those images to have smaller dimensions make any difference?

    In general it’s a good idea to resize images before uploading them to your site – saves on media storage and helps with loading time on your site:

    Optimize Your Images

    2. I was wondering whether I could make the images in my table adaptive.

    Tables by their nature are not adaptive, which is why they’re not used to control layout on a site.

    Instead of using width and height HTML attributes, try using style instead and define the width and height as inline CSS rules, and then try using a percentage value rather than a fixed width.

    I’m not sure if that will work, though. To have a truly responsive table you’d need to use flextable, and as far as I know that can only be done with proper CSS, not via a style attribute.

  • kokkieh · Staff ·

    Ah, wait, you’re speaking of the images themselves, not the table, so forget what I said about flextables.

    Still, using a style attribute and setting a percentage value would be my suggestion here, as height and width indeed specifies a fixed value no matter the screen size.

    If that doesn’t work, you’ll need @media queries to specify widths/max-widths for various screen sizes, and that again cannot be done inline but only with proper CSS.

  • Unknown's avatar
    bubbleteaboy · Member ·

    Hi Kokkieh!

    Thanks for the reply. I will give re-sizing a go. Is there a way to re-size all the pics I have uploaded or I have to do it manually and slowly?

    Where would I put the style in the code? Sorry I am quite new to this all. I can paste my table code (or the relevant snippet of it here).

    <table class=”wp-block-table is-style-stripes”><tbody><tr><td>S<br></td><td>Reserved for now</td></tr><tr><td>A</td><td><figure>teascoo</figure><figure>teascoo

    …

    </figure></td></tr></tbody></table>

    Thanks!

  • Unknown's avatar
    bubbleteaboy · Member ·

    I have followed the image re-sizing instructions and it isn’t quite right (with and without the crop option) –

    https://wordpress.com/block-editor/post/thatbubbleteablog.wordpress.com/824

  • Unknown's avatar
    bubbleteaboy · Member ·

    Sorry for the extra question, but how do I know what width to make my pictures? What is the maximum size my blog can display?

  • Unknown's avatar
    gemmacevans · Member ·

    Hi bubbleteaboy,

    Is there a way to re-size all the pics I have uploaded or I have to do it manually and slowly?

    The built in image editing tool provides the option to crop images and change the aspect ratio but it doesn’t allow you to choose a specific pixel value. Therefore you will need to manually resize the images.

    Where would I put the style in the code? Sorry I am quite new to this all.

    There’s no need to apologise :) If you want to change the image size with inline styles, the following code can be used:

    <img src="FILE-URL" style="height: 300px; width: 300px;" />

    You can taking the style="height: 300px; width: 300px;" part and paste it in the image tag — this works for other HTML elements too but based on what I’ve read above, it sounds like you want to target images.

    how do I know what width to make my pictures?

    There is a list of recommend images size for the Baskerville 2 in the Quick specs section of the theme documentation:

    https://wordpress.com/theme/baskerville-2

    The main column (content) on posts and pages has a maximum with of 756px and the full-width template can display images up to 1120px wide.

  • Unknown's avatar
    bubbleteaboy · Member ·

    Appreciate the help :)
    Thanks I have started manually re-sizing.

    <img src="FILE-URL" style="height: 300px; width: 300px;" />

    1. I have been using this. Is there a inline code that references % instead so that it opens different for phone/tablet?

    2. Thanks for image sizes. I read somewhere about how Retina displays can use twice the image size. Does that mean if I changed to a full-width template, I should use 2 x 1120 px = 2240 px as my image size?

  • supernovia · Staff ·

    @bubbleteaboy can you clarify this?

    Is there a inline code that references % instead so that it opens different for phone/tablet?

    Do you want the images to stay side by side with 50% each whether you’re on a small screen or not, or are you hoping to make them stack when the screen is narrow?

    And personally I would go ahead and use just over 2x the max image size unless you’re worried about running out of space. That way should you change themes to something with wider images in the future (I don’t know whether that will be a thing or not) you’ll still be fine.

  • The topic ‘Gallery does not align picture, question about adaptive image size’ is closed to new replies.