Forums

Imagery on pages not printing properly - Grand Gallery block

Permalink
Hello

I am using the Grand Gallery block for images, and i would like to be able to print the page with the images stacked. At the moment the images are all over the place.

I have a print.less file which currently has in it 

// - - - - - - - - - - - - - - - -  - - - - - - - 
// v1.0
// - - - - - - - - - - - - - - - - - - - - - - - - 
/*
/*! Source:https://github.com/vladocar/Hartija---CSS-Print-Framework... */
// ==========================================================================
// Print styles.
// Inlined to avoid the additional HTTP request: h5bp.com/r
// ==========================================================================
@media print {
#horizontal-nav, .mc #footer, .mc footer, .header-socials { 
   display: none; 
   }
   #body img {
      float: left;
Viewing 15 lines of 21 lines. View entire code block.


I've got this line of code in top.php 
<link rel="stylesheet" href="https://unpkg.com/hartija---css-print-framework@1.0.0/print.css" type="text/css" media="print" charset="utf-8">

which i got from github.

So print.less is looking at the correct css as in the print preview it's not showing the nav or footer, but you will see the images are all over the place. I feel like i'm not targeting the imagery within the Grand Gallery correctly so that is why the images are a mess when printed.

This is an example page in which the gallery will not print correctly.
https://dda-engineers.co.uk/project/beijing-aquatic-centre...

I would really appreciate any guidance to help me fix this or point me in the right direction.

Thanks so much
Laura
 
EvanCooper replied on at Permalink Best Answer Reply
EvanCooper
Nice looking site! I've got some styles to add to your print.less file that I think will do the trick:

body .ccm-page .gg-container {

 position: static !important;

 display: block !important;
  height: auto !important;
}
body .ccm-page .gg-item-outer {
    margin: 5px;

    position: static !important;
 
    display: block !important;
}


That's a big masonry grid thing, so you have to target the specific styles that make it grid-y - unfortunately just targeting the images alone won't do much. But I think those styles above should hopefully stack them vertically for you.

One other thing I was noticing - I think a number of the photos on the site are PNGs that are a bit hefty causing some slow load times - you can really speed up the site by optimizing those (saving them as JPGs, compressing them a bit, etc.). Here's some information on how to do that:https://web.dev/fast/#optimize-your-images...

Hope that helps!
lauraslater replied on at Permalink Reply
Hi Evan

Wow you legend, that works!!! Thank you for taking the time to answer that for me, really appreciated. Is there a way of stopping the images breaking up on the page break?

I've put in 
page-break-inside: avoid;

but it doesn't seem to like that.

Also thank you for the tip regarding the PNG imagery - that is really helpful.

Thank you!
Laura
Myq replied on at Permalink Reply
Myq
Wow, great idea, Evan. That's a great way of fixing this issue!
EvanCooper replied on at Permalink Reply
EvanCooper
Thanks Myq!
EvanCooper replied on at Permalink Reply
EvanCooper
Yeah, I know that can be tricky. I think from a CSS perspective all you can do is make sure everything is set to "display: block" - so if you inspect those elements in your browser inspector and just make sure every piece of that grid is set to "display: block" in your print.less I think that will be your best bet.