Gallery images are cutted instead of properly wrapped

Hi @tp9283, yes your problem was well-explained and makes sense.
And ya, unfortunately testing how well things work when printed is often overlooked by web developers (basically, including me until I started Print My Blog.) Often, simpler and older code works better when being printed, but newer stuff not so much.

Some more info would be helpful to determine if there’s an easy fix or not.
Are you using WordPress’ built-in [gallery] shortcode? And what’s the URL of your site with the issue?

Hi Michael,

thanks for your reply. First of all to be more specific regarding “At a point of time this year, wordpress changed the editor”: It’s the Gutenberg-Editor, which I am using.
To my understanding, Gutenberg doesn’t use the [gallery] shortcode when embedding galleries.
Instead, if I look at the generated HTML, it uses the following classes to create the gallery:
<figure class="wp-block-gallery columns-3 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><a href="...

I hope this helps. Unfortunately i cannot provide the link right away, as my blog is a private one with pictures from my kids, etc. and requires login. But if it is needed for your investigation, I am happy to create a dummy-blog, recreate the issue and provide a link.

• This reply was modified 4 years, 6 months ago by tp9283.

Hi Michael,

did you have any chance to take a look into that so far and could potentially provide some hope for a fix? ??

Best regards,
Thomas

Oh sorry @tp9283, somehow I missed your reply from a month ago ??!

I recall having an issue with galleries like this, and the band-aid “fix” was to force a pagebreak before any big galleries, which just makes pagebreaks between the images less likely.

I’ll see if I can get this problem to happen using Gutenberg’s gallery block. If not, yes it would be helpful if you could setup a test site where I can see the problem. I’ll let you know (like within a week; feel free to ping me again if I somehow don’t reply before then!)

Ya @tp9283, when I created a gallery block, it adds the pagebreak before it in order to avoid splitting the images in half. Is it not doing that for you now? If not, it may be helpful to setup a test site where you’re seeing that happen, so I can inspect it.
I’m afraid though this will probably be pretty “invasive” fix (meaning I’ll need to majorly change the HTML for the gallery into something that’s more printer-friendly.) Just more work is all.

Actually, I may have some CSS that will fix the issue.
This worked for me to get the gallery to display nicely, even across page breaks. It actually also preserved the gallery look. Can you try adding this custom CSS to your site, then try printing again?

.pmb-posts .wp-block-gallery{
	overflow:visible;
}
.pmb-posts .blocks-gallery-grid .blocks-gallery-item{
	display:block;
	page-break-inside:avoid;
}
.pmb-posts .blocks-gallery-grid .blocks-gallery-item figure{
	display:block;
}
.pmb-posts .blocks-gallery-grid .blocks-gallery-item img{
margin-right: auto;
margin-left: auto;
}

• This reply was modified 4 years, 5 months ago by Michael Nelson. Reason: add some more CSS that centers images

Hi Michael!

Perfect, that works ??

Regarding this:

I recall having an issue with galleries like this, and the band-aid “fix” was to force a pagebreak before any big galleries, which just makes pagebreaks between the images less likely.

Is there an easy way to deactivate this (e.g. by CSS)? Because due to your CSS above this seems no longer necessary.

Best,
Thomas

Hi Thomas, I’m glad to hear that did the trick. Yes, if those CSS changes fix the issue, we can remove the page break in front of the galleries.
I’ll probably release this change early next week.

Amazing support from your side (for the 3rd time now!)
Thank you so much!

Hi @tp9283 I put that CSS into the main plugin, but made a few tweaks to it too.
Would you mind trying the next version and let me know how it goes for you?
Here’s how:

1. Download the new version from here: https://github.com/mnelson4/printmyblog/archive/BUG/gallery-block-improvements.zip
2. Go to your WordPress dashboard, click plugins, then “add new”, then “upload” and select the zip file you just downloaded
3. Deactivate the previous version Print My Blog
4. Activate the new version of Print My Blog (2.9.6)
5. Make sure to comment out the custom CSS I provided earlier, as it will interfere with the similar CSS that’s now part of the plugin
6. Make a printout like you did before. Gallery images should be laid out pretty well, and especially should span multiple pages fine and shouldn’t force a pagebreak before the galleries.

Please let me know how it goes; or whether you won’t be able to do test it for a few days (in which case I’ll probably just keep testing it myself.)

Hi Michael,

tested it in a few rounds. Works fine for me without any issues – and with the removed pagebreaks it looks much better. In some situations, if the text just fills approx. half of the page, there is a page break remaining although one could still put some of the images on that page. But that’s a minor thing and could also be treated as a feature ??

So overall: Great support from your side and I am fine with the solution. Together with the other two issues you already solved for me in the past I am now ready to print out the first three years of my daughter’s blog as a book ??

f the text just fills approx. half of the page, there is a page break remaining although one could still put some of the images on that page.

hmmm ya. It would be really helpful to see an example of this in order to debug further. But ya I think I’ll release this as-is and we can work on further improvements afterwards.

Oh and FYI @tp9283, I was communicating with someone else over email about galleries, and they noted that if their images have captions, the part of the image near the caption is all cut off. The fix for that is to have your browser “Print Backgrounds” or “Show Backgrounds”, which is a print setting.
Here’s a video I made showing how to change that setting in Firefox (Chrome and similar browsers instead have a setting under “More Settings” called “Background graphics” that does the same thing.)

heh, and by “here’s a video”, I meant: here’s a video: https://drive.google.com/file/d/1zRktKXPCRIA73AEU-FaG8nze1DhnldkZ/view

Thanks for this hint – also observed this problem.