The only CSS properties you should place on the tag itself are the following: img Adding style attributes to the basic tag can result in a lot of visual nuttiness. So if you want all of your screenshots to have a thumbnail and a border, you set those properties for the tag, right? Wrong! That would be a big mistake because the tag is used for all images, including the graphical widgets you can click to open and close drop-downs. The tag adds an image to a MadCap Flare topic. If you are new to Flare and CSS, you can use Flare’s internal CSS editor to create and manage the thumbnail classes.

In the examples below, you can copy and paste the CSS into the text editor. In this article, I’ll show you how to create image thumbnail classes in your stylesheet to set up a simple and consistent approach for handling images. Second, they pop up the full-size image in a separate window that lifts it away from the text flow, allowing it to appear larger than it could if it were constrained within the text column. First, thumbnails shrink large images so that they don’t overwhelm the words on the page. Who doesn’t love image thumbnails? They provide two extremely helpful features in HTML5 outputs. When he’s not occupied with all things Flare, Jay writes fiction under the pen name JB Strand. After discovering MadCap Software tools over a decade ago while working as a technical writer in Seattle, he has designed and implemented Flare projects for clients in government, law, education, healthcare, and technology.

Jay Slagle is an independent consultant and certified MadCap Software Advanced Developer who is passionate about using CSS to enhance the power of MadCap Flare.

Create thumbnail from pdf