High-res, full-size images shrinking in PDF export

Exports
1

I’ve followed instructions for properly sizing images at 300DPI. Added a name under Image CSS Class as per these instructions and the custom code with dimensions in the PDF Stylesheet.

We only have two images (diagrams in Ch2 and Ch6) and they’re too small in the PDF export.

We can make them even smaller by adjusting sizes in the Stylesheet, but never bigger.

Here’s the code:

.highresfam {
width: 4in !important;
height: 3.5in !important; }
.highressup {
width: 4in !important;
height: 2in !important; }

I’ve made the book public. Thanks for any ideas!

One addl. note: the images showed up properly before in the PDF when we used the Clarke theme.

But when we ordered a proof from KDP, the margin was much too small at the top of the page. So we changed the default margin and added more space, but then ended up with 11 extra pages!

The designer had already finished the full cover with spine. So we switched to a different theme, McLuhan, and got the page count back down to match the original.

1 Like
2

@SteelWagstaff , any suggestions?

I copied one chapter in a new book and reverted back to the Clarke theme to see if that would work. The image was still too small.

Thank you!

3

@JenniferNM what’s the book URL? Have you checked for any competing CSS rules (like max-width)? That’s my first thought as to what might be happening …

1 Like
4

Thanks for your reply, @SteelWagstaff .

I don’t know how to find the book’s URL. Trying to find that in the manual.

I’m no CSS expert, so I wouldn’t have known what to look for in the stylesheet that might conflict with the fix we’re trying to make, as per Pressbook’s instructions!

The trick to ensure your image stays at the size you want is to add a Custom Image Class. To do so:

  1. Click on the image, and open the Advanced Options Menu.
  2. In the “Image CSS Class” field, enter a name for your custom class (this can be any word, preferably without spaces, such as “highrestest”) and click Update.

custom-class-image

  1. Next, apply the custom CSS theme (full instructions here)
  2. Go to in the PDF stylesheet, and enter this code at the end of the stylesheet:

.yourimageclass {

width: size in inches !important;

height: size in inches !important; }

Remember NOT to set the image larger in inches than calculated using the above formula, as this will cause your image to display at less than 300 dpi on the printed page.

In the example image above, the code would be:

.highrestest {

width: 3in !important;

height: 4in !important; }

  1. Click Save.
  2. Go to the Export page, and test to see whether the code has been correctly applied.
5

I think this is our URL: https://notbstrategies.pressbooks.com/

6

My husband is a programmer and this is what he wrote in the stylesheet, which worked!

p img.aligncenter, p img.alignleft, p img.alignright {
max-width: 100% !important}

.highresfam {
width: 4in !important;
height: 3.5in !important;
max-width: 100% !important; }

.highressup {
width: 4in !important;
height: 2in !important;
max-width: 100% !important; }

So if anyone else trying to solve this problem, you’d take the first part of the code and put that into your PDF stylesheet. Replace the image CSS class name with your own for your image and adjust the dimensions accordingly.

1 Like
7

@SteelWagstaff Are there any sensible defaults created already in Buckram, or is the recommendation to always create custom classes.