Block Gallery does not limit width to post width.

It looks like a minor thing, but I didn’t stay long enough for the images to download since I could see them filling in so I know it was eating up my limited bandwidth.
You should make your images smaller in file size so it does not cost your visitors so much to visit your site. (and it would load so much faster)

It seems it is past time to update to a new theme. That old one is not a nice experience, with all capital letters and tiny font size and poor use of available window size. I didn’t try it on my phone. Have you?

A quick and dirty fix is to add the following to the Additional CSS panel of the customizer:

.wp-block-gallery {
    max-width: 420px;
    margin-left: 0;
}

Does your theme even have a customizer? If not, add the above to an inline <script> block of your header template.

Heed Joy’s advice. A large number of people only use phones to access information and the gallery does not layout correctly on small screens. Your page takes 3.6MB of data to load, much too large for mobile devices. It could take almost a full minute to load over a poky 3G connection.

Just to be clear, The Additional CSS panel of the Customizer is a core option, so it should work regardless of theme. The CSS is saved separately per theme though.

Thanks @bcworkz ! That Additional CSS code did the trick.

@joyously Looking at the gallery, it’s not using my 420x thumbnail size, but the 1024x scaled-down size. I don’t see anything in the gallery settings about setting this, but it seems odd it would not by default use the thumbnail size.

Also, I have my gallery set to link to “media file”, but it does not link to the original images, but only (again) the 1024x images (i.e. the image and the link are the same). I confirm looking at the code:

<figure><a href="https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/dsc_0151-1024x685.jpg"><img src="https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/dsc_0151-1024x685.jpg" alt="" data-id="4644" data-link="https://www.ekran.org/ben/wp/?attachment_id=4644" class="wp-image-4644"/></a></figure>

The image src should use the thumbnail:
https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/dsc_0151-420×281.jpg

The ahref should be to the full-sized image:
https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/dsc_0151.jpg

What is going on here? Why would we want a gallery that ignores the thumbnail settings and does not even link to the full-sized images?

• This reply was modified 5 years, 3 months ago by bbogart.

I think there might be several open issues on the Gallery Block, but you could look and see if any mention your problem. If not, write an issue.
https://github.com/WordPress/gutenberg/issues/

Or use the Classic Editor, which builds galleries like you prefer. (I don’t think the Classic Block would let you make a gallery the old way, do you?)

Expanding on what Joy said, you apparently converted your gallery from the old style shortcode to a gallery block. The conversion process is unfortunately not ready for prime time. The result is exactly what you have described.

You can go back to the classic editor using the plugin, but that’s not going to revert the conversion to a block, the gallery just becomes regular HTML.

As Joy suspects, the classic block doesn’t offer the usual UI for adding a gallery. However, assuming the gallery images are all attached to the post, you can manually enter [gallery] into a classic block. Once that is done, the usual old style gallery edit UI becomes available (through the pencil icon) when you select the gallery. You can then add or remove any images as needed, as well as manage the links and thumbnail size.

Hello @bcworkz, Based on what are you assuming I’m using a converted gallery? I have not used the gallery feature until switching to the blocks UI. I seem to be on the latest version of WP (5.2.2) and I’ve added these galleries by doing:

Click “Add Gallery” icon.
Drag the images I want in the gallery on the gallery block
Wait for images to upload.
Select “Link to” to “Media File”

The editor looks like this: Screenshot

This results in the gallery using the 1024x thumbnails and not linking to media files: Post Link

I confirm the source shows the same pattern:

<img src="https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/SOMResults_Close-Wide-Arch_Sigma0.333_i50000-no-sort-detail-i.collage-1024x1024.jpg" alt="" data-id="4759" data-link="https://www.ekran.org/ben/wp/?attachment_id=4759" class="wp-image-4759"/></a></figure></li>

So I have no idea what I could do differently to use the gallery block the way it should be used to avoid these issues.

Looks like image sizes in the built-in gallery block is a bit of a mess:

https://github.com/WordPress/gutenberg/issues/5674

So I’ll just leave things as they are, as these issues are out of my (reasonable) control. I suppose I’ll likely have to go back and fix galleries when these issues are fixed in a future WP release.

Based on what are you assuming I’m using a converted gallery?

The symptoms you described closely matched others experience when converting from classic gallery. You’re free to ignore observations whose assumptions do not match your situation ??

In a quick test on my site, (new gallery block, no conversion) the images inserted did have appropriate srcset and sizes attributes, so something more subtle is going on than simple “it doesn’t work at all”. Of course it’s no consolation when you are the one having issues with the gallery. But further investigation may be warranted before writing the process off. Like trying it with no plugins active and using the default twentynineteen theme.

TBH, I don’t like the new gallery block for various reasons. I’ve been inserting a classic block (not shortcode block) and manually entering [gallery] which yields the old gallery UI.

Hmm. I used “Theme Test Drive” to switch to twentynineteen, and then created a new gallery and the same (stuck to 1024px) problem persists (when I preview the post). Then I disabled all my add-ons, created a new gallery, and the problem still persists. Since I could not use Theme Test Drive with plugins disabled, I ended up using the built in “Live preview” of twentynineteen, and the problem persists.

In terms of reproducing the problem, here are links to the full resolution version of my images. I’m wondering if it’s related to the (relatively) high resolution of my files?

https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/01.sigma35.e0.5.png
https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/03.sigma35.e0.5.png
https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/04.sigma35.e0.5.png
https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/07.sigma35.e0.5.png

@bcworkz , does it work fine if you make a gallery from these images?

Image size wouldn’t factor into gallery functionality.

Yeah, your images work fine in my localhost test site’s gallery. To be clear, the resulting img tag in the gallery still uses the full size image URL for the src attribute, but the img tag also lists smaller sizes in the srcset attribute and there are matching width specifications in the sizes attribute so the browser can decide what is best for its screen size and fetch the appropriate image size. Checking the browser’s network developer tool, the medium sized images were what the browser decided to use.

My test site is plain vanilla WP, no plugins and twentynineteen theme. Well, TBH there is one plugin containing custom test code in the form of hooks, but all the add_filter() and add_action() lines are commented out, so the plugin doesn’t currently do anything.

So your installation’s galleries have no srcset or sizes attributes in the img tags? Verify that WP is creating smaller image versions when you upload images. There wouldn’t be a srcset attribute if there are no smaller images to list.

In my case the full-size image is not used in the gallery, but the 1024 down-scaled one. Here is the code for one of the figures in the gallery:

<figure><a href="https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5-811x1024.png"><img src="https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5-811x1024.png" alt="" data-id="4868" data-link="https://www.ekran.org/ben/wp/2019/early-full-resolution-explorations/23-sigma35-e0-5/" class="wp-image-4868" srcset="https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5-811x1024.png 811w, https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5-420x530.png 420w, https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5-238x300.png 238w, https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5-768x970.png 768w, https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5.png 1109w" sizes="(max-width: 811px) 100vw, 811px" /></a></figure>

So srcset is included, and does include the proper thumbnail sizes. So why is sizes set to "(max-width: 811px) 100vw, 811px"? Also the href links to https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5-811×1024.png (the down-scaled version, not the “media file”).

The code below is the same figure included without the gallery:

<figure class="wp-block-image"><a href="https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5.png"><img src="https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5-420x530.png" alt="" class="wp-image-4868" srcset="https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5-420x530.png 420w, https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5-238x300.png 238w, https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5-768x970.png 768w, https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5-811x1024.png 811w, https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5.png 1109w" sizes="(max-width: 420px) 100vw, 420px" /></a></figure>

Where sizes = "(max-width: 420px) 100vw, 420px" which selects appropriately my thumbnail size. Also the href links to “https://www.ekran.org/ben/wp/wp-content/uploads/2019/08/23.sigma35.e0.5.png (the “media file”, not the down-scaled version).

It would be nice to know if this is a bug, or a configuration challenge in order to more forward.

I can tell you the sizes attribute is based upon the image dimensions of the URL supplied as the src attribute. Apparently the linked media image is as well. Cause and effect. So it comes down to why does the gallery select a down sized image as the src attribute?

I don’t know. I’m guessing it either picks the “large” image size, or it picks the next biggest size over the theme’s content width setting, which is often “large” size. I suspect this is done because so many people upload ginormous 12Mpx images straight from their phone without thought of file or image sizes. For people who know what they are doing and intend to offer a hi-rez image out of the gallery link, this could be seen as a bug. But I suspect it’s viewed as a “feature”.

In any case, the gallery picking a “large” or whatever size as the base src attribute is in fact how it works. It appears to be intentional, but I cannot say definitively. I’m not privy to the dev’s thinking. It would be nice if we could choose to override the default selection, but that is not an option at this point. It’s part of why I’m still using the old style gallery.

As the gallery behaviour is totally inconsistent with the normal image insertion behaviour (I can think of no reason they should not be consistent) I’ll consider this a bug and submit as such.

Sure. It needs improvement no matter what you call it ?? Thank you for reporting and contributing to its improvement.