Crop picture for PDF output

This Forum is for General Issues about Capture

Crop picture for PDF output

Postby deeptikorwar on Mon May 25, 2015 5:49 pm

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
deeptikorwar
Sr. Propeller Head
 
Posts: 111
Joined: Tue Aug 20, 2013 11:38 pm

Re: Crop picture for PDF output

Postby ChoccieMuffin on Tue May 26, 2015 2:49 am

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.
Started as a newbie with Flare 6.1, now using Flare 2019r1.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
ChoccieMuffin
Senior Propellus Maximus
 
Posts: 2221
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Crop picture for PDF output

Postby Nita Beck on Tue May 26, 2015 9:23 am

Deepti, you might find this discussion pertinent: https://forums.madcapsoftware.com/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/08/how-to-show-an-image-cropped-in-one-flare-output-but-not-in-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.
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3307
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Crop picture for PDF output

Postby dorcutt on Tue May 26, 2015 9:49 am

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.
-Dan, Propellerhead-in-training
dorcutt
Sr. Propeller Head
 
Posts: 234
Joined: Thu May 15, 2014 12:16 pm

Re: Crop picture for PDF output

Postby deeptikorwar on Tue May 26, 2015 6:40 pm

Thanks all. I will try them out. The padding option might not work for me as the padding would be different for each image.
deeptikorwar
Sr. Propeller Head
 
Posts: 111
Joined: Tue Aug 20, 2013 11:38 pm

Re: Crop picture for PDF output

Postby dorcutt on Wed May 27, 2015 7:09 am

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.
-Dan, Propellerhead-in-training
dorcutt
Sr. Propeller Head
 
Posts: 234
Joined: Thu May 15, 2014 12:16 pm


Return to Capture's General Discussion

Who is online

Users browsing this forum: No registered users and 1 guest

cron