Uncategorized

Full-size print images in Flare.

If you have pop-up images in your HTML5 output …

…you’ll want to ensure that images are displayed in full-size when you click “Print”, and don’t remain thumbnail size. It should look something like this:

This is not how Flare works out-of-the box, but fortunately – it’s a quick fix:

  • First, add this Javascript to you Master page:
$(document).ready(function () {
	$(".MCPopupThumbnailLink").each(function(){
		var src = $(this).attr("href");	
		$(this).after("<img class='print-only' src=" + src + " />");
	});
});
  • The, update your CSS like this – making sure the full-size image isn’t displayed in the HTML output, and that the full-size image is visible in the print output.
.print-only
{
    /* Makes sure the print image doesn't show up in the HTML output */
    display: none;
}

@media print
{
    .print-only
    {
    /* The print image should be visible when you click "print:" */
        display: block;
    }
    .MCPopupThumbnailLink
    {
    /*Remove the thumbnail image in the HTML5 output */
        display: none;
    }
}

I hope this helps!  🙂

Leave a Reply

Your email address will not be published. Required fields are marked *