Images in the Print and PDF
Showing and Hiding
One setting in the builder, and the same one in the WordPress plugin's settings, decides whether images are included at all. Turning them off suits sites where the pictures are decorative and readers are printing for the text.
It is a default, not a rule: your reader can put them back from the preview.
Where Images Sit
Four choices, set once for your whole site:
| Value | Result |
|---|---|
| block | Centered, each on its own line. |
| left | Floated left, text wrapping alongside. |
| right | Floated right. Text lines start in the same place, which reads faster. |
| none | Left however they fell on your page. |
Captions and Page Breaks
Wrap a picture and its caption together so a page break cannot separate them:
<div class="caption">
<img src="/diagram.png" alt="">
<p class="caption-text">Figure 1. How it fits together.</p>
</div>For a tall image that lands awkwardly, force the break yourself. Use page-break-before to start a new sheet ahead of it, or page-break-after to end one behind it:
<img class="page-break-before" src="/tall-diagram.png" alt="">Both are on choosing what gets printed with the rest of the classes.
When We Cannot Reach Your Images
The one setting worth knowing about
The Pro setting Encode images sends them from the reader's browser instead, so we never ask your server at all. It is the fix for images that appear in the preview and vanish from the download. Full detail on Actions and Pro Features.
Common Questions
Images are missing from the printout#
If they are in the preview but not the download, turn on Encode images, above. If they are missing from both, the causes are different and troubleshooting walks through them.
Can I control how large images print?#
Not as a setting, but your readers can resize them in the preview before printing. To constrain them for everyone, use custom CSS:
#pf-print-area img,
#printfriendly img {
max-width: 400px !important;
}Both wrappers, because the preview and the free PDF put your content in #pf-print-area and the Pro PDF puts it in #printfriendly.
A background image is not printing#
Backgrounds set in CSS are treated as decoration rather than content, and left out on purpose. If the picture matters, put it in an <img> tag.
On Pro, you can instead turn on bgImageUrlSupport=on in the settings tag, which converts CSS background images into ordinary images automatically. See the settings reference.
Separately, most browsers do not print background colors or images at all unless the reader turns that on in their print dialog.
My WordPress featured image is not included#
Featured images live outside the post content in most themes, so they are not always picked up. print-yes on the image element will rescue it.