Tutorial: Displaying an Image of a PDF

Last Revised 7/21/21

Table of Contents

When to Use Guidelines Overview of Options
- Option 1: Convert PDF to JPG - Option 2: iFrame the PDF

2

When to Use

When you have PDFs on your page that you also want to show a picture of? For example:

• Schedule • Flyer
• Infographic • Etc.

3

Guidelines

To maintain Tier 1 ADA Compliance, it is very important to follow these guidelines:

Even after you add an image of your PDF, you still need to have PDF & RTF files available for download on the pages.

• A picture (jpg) with information and text on it (like a flyer, etc) MUST still be uploaded to your page as a PDF AND RTF.

• Adding the jpg version allows the information to be visible on the website page so that the information is accessible right away, but you CANNOT only have a picture of the file. You must ALSO have a PDF and RTF of the file.

Images cannot replace PDF & RTF files because:

• An image flattens text, which makes it impossible for a screen reader to recognize the words. • When iFraming, the PDF file must be present because it creates the link for the iFrame.

4

Overview of Options

Option 1: Convert PDF to a JPG

• Familiarity with process	• Degrades the quality of words when converted

EXAMPLES:
Alta Sierra Bell Schedule >> Fugman Bell Schedule >>

Option 2: iFrame the PDF

• Clear text; no degradation or fuzziness.

• Displays actual PDF, making it undeniably ADA compliant.

• Can be used in a News Component!

• Have to get comfortable with a little bit of code

EXAMPLES:
Miramonte Bell Schedule >> Weldon Bell Schedule >>

5

Option 1: Convert PDF to a JPG

1

Convert the PDF to a JPG image.

a)	Open your PDF on your computer. It should open in Adobe Acrobat Reader.

b) Click “File” in the upper left corner.

c)	In the drop-down, click Export To > Image > JPG.

d) Choose where you want to save your file and click Save.

You should now have TWO files: 1 PDF format, 1 JPG format.

6

2

Go to the page where you want to add the image of the PDF.
Click “Edit Page”

3

Click Add Page Component.

4
Under Type, select Photo Gallery.

5

Click Add Component.

6
To add photo, select Browse. Select the JPG version of the PDF you just saved from your computer.

7
REQUIRED

Add Alternative Text for each photo.

Only .png, .jpg, .tiff files allowed

8
Title / Description are optional. They will add a black description box on the photo.

9
Click Upload to save.

10
Click Gallery Options to

make changes.

14 Displays control buttons

(forward/backward)

11
Enter dates for gallery to

show/expire, if desired.

15
Displays Thumbnails.

Always auto checked, but

12	Select Display Mode:	NOT recommended.

Fotorama Gallery: slideshow Lightbox Thumbnails: thumbnails of all images in a grid (depending on how many images present). Examples on following pages.

13
Select Rotation & Timing options.

16

Allows users to click a button to enlarge their view of the photo. (You can do this with image versions of PDF flyers, as long as the PDF & RTF version is also available on the page.)

17
Select Transition Effect options.

18
Click Save.

1
	9
To change the size of the Photo Gallery on the page, go to Edit
Page in the black bar at the TOP of the browser. Change the
		
	percentages to the width of the page you want the Photo Gallery to take. You can play around with the size.

Be sure to click the blue Save button!

	

10

Fotorama Gallery

Automatically takes up the full width of your component.

You cannot change the size of the photos, BUT you can change the size of your component using the columns method.

Title and Description show at the bottom of each photo.

Lightbox Thumbnails Gallery

Automatically takes up the full width of your component.

You cannot change the size of the photos, BUT you can change the size of your component using the columns method.

Title shows at bottom of each photo.

Users can click on the image to enlarge it.

Option 2: iFrame the PDF

What is an iFrame?

An iFrame is an html code element that allows you to display or embed an external webpage onto a webpage.

13

1
Go to the page where you want to add the iFrame of the PDF.
Click “Edit Page.”

2

Click Add Page Component.

IMPORTANT: The PDF you want to iFrame must already exist as a Download link on the page where you’re adding the iFrame. If it doesn’t, do that first.
(For details, see the Adding a PDF or Download Tutorial.)

3
Under Type,
select Text Window.

WARNING:
DO NOT try to attach your PDFs as a hyperlink file in a Text Window component.

You also may experience errors if you are trying to upload a PDF file into a Link component.

Optional: You can enter your Internal Name and Component Name now too.

4	Click Add Component.

*This component will appear at the bottom of your components list.

14

5

Exit out of the Edit page view so you can see the page.

6
Right click the PDF link for the file for which you are creating an iFrame, and click Open in New Tab.

Leave the new tab open for later reference.

15

7
			
	Click Edit Page to go back into your components list.

• To add this new component, repeat: • Edit Page (at top of browser)
			
• New Component
• Text Window = Type

8

Find the new Text Window you just created and click Edit.

16

1
	0

Copy the code below and paste it in the text window.

<iframe width="100%" height="500" src="https://chs.cusd.com/Downloads/ Bell%20Schedule%2019-20%20normal4.pdf" allowfullscreen></iframe>

9

In the Text window and click the 3 dots, then click the code icon (< >).

https://chs.cusd.com/Downloads/Bell%20Schedule%2019-20%20normal4.pdf

11

DO NOT click Save yet.

17

https://chs.cusd.com/Downloads/Bell%20Schedule%2019-20%20normal4.pdf
	”

	

12
Click on the tab you opened earlier of the PDF and copy the URL.
(The shortcut for copy is Ctrl + c)
		
	1
	3
		
				Click back to the tab where you've been
editing the "code" in you text window.

r

1
	4
					
	Highlight

15
Click Save.
		
	the
	https://chs.cusd.com/Downloa
	d
					
		s/Bell%20Schedule%2019-

r
				
		20%20normal4.pdf
	link of the code
					
	snipet in and paste your new URL. (The shortcut for paste is Ctrl+v).

Using the shortcut will replace whateve
is highlighted with whatever is copied.
					
		18

Now you have an iframe of the pdf from your page!

If you want to adjust the height or width of the iFrame, you can go back into the code and change the numbers for width & height.

width=“100%” height=“500”

19