UnionActive Support
       
How to Show Full Image of PDF, Word Doc, etc. On Your Website or Email Blast
Posted On: Feb 20, 2018

Have you ever wanted to insert the full image of a PDF, Word Document, or any other non-image file into your website, email blast, etc. but it just won't work? The trick is to convert your non-image file into a valid image file such as a .jpg or .png - you can even link the image to the original file so that users will open the original file upon clicking the picture of it. Below are instructions on converting a non-image file to a .jpg.

For users who have a program that will directly save a PDF as .jpg:

  • If you have Adobe Photoshop or the full Adobe Acrobat program (not just the free Adobe Reader) you can easily save a PDF as various other file types, including .jpg - simply open your PDF and choose File > Save As > and change the file type to .jpg.
  • If you do have a program that will let you save a PDF as a .jpg - and you are starting with a Word Document or anything other than a PDF - you'll need to first convert that file to a PDF, then save it as a .jpg.
  • You can now insert the .jpg version of your file into your website page, article, email blast, etc.
  • Note: when inserting the image into an email blast make sure to use the full (absolute) URL of the image so that your recipients can successfully view the image.
    This means instead of using a relative URL, such as:
    /images/UALOGO_small.jpg
    Rather, use the absolute URL of:
    https://www.unionactive.com/images/UALOGO_small.jpg

For users who DO NOT have a program that will directly save a PDF as .jpg:

If you don't have the full Adobe Reader, Adobe Photoshop, etc. you still have options!

Option 1 is to do an Internet search for "convert PDF to jpg" - there are a ton of free online converters but be careful of malware or bad websites that try to do harm to computers. There are legit options available though.

Option 2 is to take a screenshot of the PDF on your computer, crop as needed and save that as an image. Here are instructions:

For PC:

  1. Open the PDF on your computer and view the whole PDF as big as you can but where you can see the entire document and nothing is getting cut off.
  2. Push the Print Screen button on your keyboard - it may say PrtScr or Prt Scr and is usually near the numbers at the top of your keyboard.
  3. Now you have a picture of your whole desktop on the clipboard. You'll need to paste this into a picture editing program and just crop out the PDF portion and save it as a .jpg.
  4. All PCs come with a free image editing program called Paint (or MS Paint). In the lower left corner of your screen type Paint into the search box and hit enter. If you don't have a search box go to the Start Menu > All Programs > Accessories > Paint.
  5. Once you've opened Paint, expand the Paint window to be as large as your screen. Paste your clipboard image into Paint by either using the keyboard shortcut Ctrl+V or clicking the Paste tool from the top left corner and selecting "Paste" (not "Paste from"). If nothing happens when you paste your screenshot you'll need to take it again. Minimize Paint, view your whole PDF as large as possible, push the Print Screen button and try to paste it into Paint once more.
  6. Click the minus sign in the lower right-hand corner of the Paint window to zoom to 50% so you can see your whole screenshot easier.
  7. Click the Select tool from the top left section of the window - it looks like a dashed line rectangle. Click and drag the Select cross-hair tool around just the picture of your PDF.
  8. Once you've selected just the PDF click the Crop link found just to the right of the Select tool at the top of the screen.
  9. Now you should have just an image of the PDF and you can zoom back to 100% to make sure it looks like you're expecting.
  10. The last step is to choose File > Save As > and save the file as a .jpg to your computer. You can now insert this image into the website.
  11. You can now insert the .jpg version of your file into your website page, article, email blast, etc.
  12. Note: when inserting the image into an email blast make sure to use the full (absolute) URL of the image so that your recipients can successfully view the image.
    This means instead of using a relative URL, such as:
    /images/UALOGO_small.jpg
    Rather, use the absolute URL of:
    https://www.unionactive.com/images/UALOGO_small.jpg

For Mac:

  1. Open the PDF on your computer and view the whole PDF as big as you can but where you can see the entire document and nothing is getting cut off.
  2. To take a screenshot of a selected portion of your screen first press Shift-Command-4. The pointer will change to a cross-hair.
  3. Move the cross-hair to where you want to start the screenshot, then drag to select an area. Select the entire PDF and nothing else. While dragging, you can hold Shift, Option, or Space bar to change the way the selection moves.
  4. When you've selected the area you want, release your mouse or track-pad button. You may hear a clicking sound signifying the screen capture was successful. To cancel and start over, press the Esc (Escape) key before you release the button.
  5. You will find the screenshot as a .png file on your desktop. The file name will likely be long and include the current date and time. However, you can rename it to something more simple and logical.
  6. You can now insert the .jpg version of your file into your website page, article, email blast, etc.
  7. Note: when inserting the image into an email blast make sure to use the full (absolute) URL of the image so that your recipients can successfully view the image.
    This means instead of using a relative URL, such as:
    /images/UALOGO_small.jpg
    Rather, use the absolute URL of:
    https://www.unionactive.com/images/UALOGO_small.jpg

To link your .jpg to your original file:

If you'd like users to open the PDF, Word Doc, etc. file from which you created your .jpg - upon clicking the .jpg - you can easily do this by using the Link tool in your text editor toolbar as described here:

  1. Once you've inserted your .jpg into the desired place in your article, email blast, etc. you will single click the image from within the text editor and it should become highlighted.
  2. Now click the Link tool from the text editor toolbar - it usually has a small picture of a chain link on it.
  3. From the Link properties window click Browse Server.
  4. You're now looking at the File and Image Manager of your website. If the original file has already been uploaded to the website find it now and click on it.
    If it hasn't yet been uploaded you can do this now by:
    1. Go to the folder in which you'd like to upload your file (such as Docs)
    2. Click "Choose File" or "Browse", etc. from the lower left corner of the window (the exact wording will vary from browser to browser)
    3. Find the file on your local computer and click Open
    4. Click Upload in the lower right corner of the window.
    5. Once your file uploads find it and click on it.
  5. Note: when linking an image to a file within an email blast make sure to use the full (absolute) URL of the file so that your recipients can successfully view/download the file.
    This means instead of using a relative URL, such as:
    /docs/unionactive_getting_startedV3.pdf
    Rather, use the absolute URL of:
    https://support.unionactive.com/docs/unionactive_getting_startedV3.pdf
  6. If you are linking to a PDF and want the PDF to open in a separate browser window click the Target tab in the Link properties window and set it to New Window (_blank).
  7. Click OK.

As always, if you need any assistance with your website don't hesitate to Contact Us!


Tech Tips
Add Videos to your Website
How to Show Full Image of PDF, Word Doc, etc. On Your Website or Email Blast
Mobile View Testing
Online Voting
Why Does My Browser Show a Password Data Breach Warning?
  Mobile Apps  
Learn more
     
Member Database Builder

Learn more
  GrievTrac  

Online Grievance Tracking
Click to learn more.
     
UnionActive Member SYNC

Click to learn more.
Site Search
Site Map
RSS Feeds
-
  • support.unionactive.com

    Copyright © 2024. All Rights Reserved.

    Powered By UnionActive
    Staff


  • Top of Page image