Crop picture for PDF output

[deeptikorwar]

Hi,

Is it possible to define an area within an image to appear in the PDF output. I have image A with some whitespace for the online content. I want to remove the whitespace in print output to reduce the image size. If I choose the Enable print size option for the image, the clarity is reduced. Is there a way to define a portion of the image to appear within the print output. That way I can avoid creating an additional image for the print content.

Thanks,
Deepti

[ChoccieMuffin]

As an alternative to having an image that contains white space in your online version, have you considered styling the paragraph that the image sits in so that you don't need to include white space? I include my graphics in a paragraph called p.graphic, which increases the white space above and below the image compared to a regular <p>. That might be a suggestion for you to think about as an alternative.

[Nita Beck]

Deepti, you might find this discussion pertinent: viewtopic.php?f=75&t=17074&p=90488&hilit=crop#p90488.

I also wrote a blog article on a solution a couple of years ago: http://beck-communications.com/2013/06/ ... n-another/

BTW, I think that Choccie's advice is good. If all you're trying to do is remove whitespace that you added, I'm confident you can add the whitespace via CSS (perhaps as padding?) and then, in the medium you use for your PDF, remove the whitespace there.

[dorcutt]

Additionally, if you use CSS to add the whitespace, you can use CSS mediums so that a different amount of whitespace appears when the image is in a PDF than when the same image is used in an online output.

[deeptikorwar]

Thanks all. I will try them out. The padding option might not work for me as the padding would be different for each image.

[dorcutt]

Well, you could set up classes of images, and assign a different class to each image depending on how much padding you wanted. For instance:

Code: Select all

@medium print

{

  /* set padding to 0 for print output images */
  img.MinPad, img.VSmallPad, img.SmallPad, img.Pad, img.LargePad, img.VLargePad, img.HugePad, img.MaxPad
  {
    padding: 0px;
  }

}

@medium non-print
{

  /* add padding for non-print output */
  img.MinPad
  {
    padding: 1px;
  }

  img.VSmallPad
  {
    padding: 2px;
  }

  img.SmallPad
  {
    padding: 3px;
  }

  img.Pad
  {
    padding: 4px;
  }

  img.LargePad
  {
    padding: 5px;
  }

  img.VLargePad
  {
    padding: 6px;
  }

  img.HugePad
  {
    padding: 8px;
  }

  img.MaxPad
  {
    padding: 10px;
  }

I think this would do what you want, and would save you from messing with the actual image files at all. It also saves you from having to add the whitespace manually and makes making adjustments to many images at once much, much easier.

A few other notes:

• You can configure each edge individually with padding-left, padding-top, etc.
• You might want to use margin: (and margin-left, margin-top, etc.) instead of padding if you're planning on using CSS to add a border to your images with CSS.
• It might be a good idea to add the padding as classes of the p tag instead of classes of the image tag. That wouldn't work for in-line images though.
• Instead of the shorthand that I used for the CSS for the print version, you can set the padding to 0 individual for each style using Flare's internal editor if you like to use Flare's interface to control your styles instead.

Hope this helps.

PS- That's a great blog entry, Nita. Thanks for sharing. I'll look at implementing that when I get the spare time.