Tiled Galleries: improve layout when printing

[jeherve]

When printing Tiled Galleries, the image layout gets broken because of the lack of Javascript. Things get worse when lazy loading the images, and shown in this thread: https://wordpress.org/support/topic/tiled-gallery-printing-javascript

It'd be nice to come up with a better tiled layout just for print.

[odie2]

The simplest CSS solution for brutal force disable tiled layout could be:

@media print {
    .tiled-gallery .tiled-gallery-item img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: auto !important;
        max-width: 100%;
    }

    .tiled-gallery-item.tiled-gallery-item {
        float: none !important;
        display: block !important;
    }

    .tiled-gallery .gallery-group {
        float: none !important;
        height: auto !important;
        width: auto !important;
    }

    .tiled-gallery .gallery-row {
        height: auto !important;
        width: auto !important;
    }
}

Placed in bottom of "tiled-gallery.css". And in <noscript><link rel='stylesheet' href='[...]/plugins/jetpack/modules/tiled-gallery/tiled-gallery/tiled-gallery-nojs.css?ver=[...]' type='text/css' media='all' /></noscript> (without media print).

But it needs improve like prevent page-breaks for images (if possible) and vertical margins or other little look changes.

Result:

How disable LazyLoad or just full tiled galleries on print, no idea.

[stale[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[github-actions[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`, etc.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.