Here’s a quick video tip on how to move HTML tags within a topic in Flare. This is a new thing for me – so I need to know from you if you like the video approach.

I’m going to show you a cool way to manage the size of images in printed output, specifically PDF, using CSS. Essentially, I’ll show you how a single settings can cover a large percentage of scenarios when inserting screenshots, etc.

 Image size, meaning dimensions, is not as critical in online help as it is in printed and this solution, in my opinion, is not recommended for use in online help.

 

I’m going to start with this page.

imagesz4

Now I need to add an image and I’m going to use the neat-o-rific shortcut shown here.

imagesz5

Easy enough to add…but now I have a problem: the image is wider than the margins.

imagesz3

There are a number of ways I could go here including using the little resizer tool in the bottom right-hand corner of the image.

imagesz6

It’s easy, sure, but when you do it this way, you’re resizing it to a particular size that may not be ideal for multiple printed outputs.

You could also resize it via Capture and the Print size option.

imagesz7

But again, it would be a set size that may work great in this particular instance but not others. Let me show you why it’s a quick fix – but not ideal.

Via this screen in Capture, I’m going to change the print size from it’s current size of 6.96 inches across to 5.86 inches. I settled on this after trying a few intermediate sizes to see which would result in the image fitting in the margins.

imagesz8

Here’s what the newly resized image looks like in the topic:

imagesz9

Looks great, right? But what if I want to use that same image again somewhere else? OR I want to reuse it in another output like a small pamphlet instead of a standard 8 1/2×11 page?

Here’s the same page in a 5×8 pamphlet with 1/2″ margins, etc. Check out the image.

imagesz10

Wow, that’s a mess! My first thought is to resize the image to fit – but then I realize that resizing it here will result in the image being much smaller when printed in the regular PDF.

The solution is to create an img class called screenshot (or whatever you want to call it) and set the max-width (in the Unclassified property group) to 100%. Be sure to do this in the Printed medium only!!

imagesz12

¬†Don’t set this style to the root img or ALL of the images in your project will be affected. You want to limit this setting to only those images that you label as screenshots.

 

I do a build of the standard-sized document and the pamphlet (exact same content, just a different size PDF).

imagesz13

Notice how the image (the identical file!) is produced in two different sizes.

Now, I added the image in a nested list in the same topic. Let’s see how that turned out. Below is the identical file in two different locations in the same document. You can clearly see how the images are resized to fit the space they’re in.

imagesz14

Behold the power of ‘max-width’ for images!!!!

Try it out and let me know how it turns out.

 

%d bloggers like this: