Tutorial:

Displaying an
Image of a PDF
Last Revised 7/21/21

1
This Photo by Unknown Author is licensed under CC BY-SA
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 • Have to get comfortable

fuzziness. with a little bit of code
EXAMPLES:
• Displays actual PDF, making Miramonte Bell Schedule >>
it undeniably ADA compliant. Weldon Bell Schedule >>
• Can be used in a News
Component!
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 7
To add photo, select REQUIRED
Browse. Select the JPG Add Alternative Text for
version of the PDF you each photo.
just saved from your
computer.
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 14
Click Gallery Options to Displays control
make changes. buttons
(forward/backward)
11 15
Enter dates for gallery to
Displays Thumbnails.
show/expire, if desired.
Always auto checked, but
NOT recommended.
12
Select Display Mode:
Fotorama Gallery: slideshow 16
Lightbox Thumbnails:
thumbnails of all images in a grid Allows users to click a button to enlarge their view
(depending on how many images of the photo. (You can do this with image versions
present). Examples on following of PDF flyers, as long as the PDF & RTF version is
pages. also available on the page.)

13
Select Rotation & 17
Timing options. Select Transition Effect options.

18
Click Save.
19
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.”
IMPORTANT: The PDF you want
to iFrame must already exist as a
Download link on the page
2 where you’re adding the iFrame.
Click Add Page If it doesn’t, do that first.
Component. (For details, see the Adding a
PDF or Download Tutorial.)

3
Under Type,
select Text Window.
Optional: You can enter your Internal
WARNING: Name and Component Name now too.
DO NOT try to attach your PDFs as a 4
hyperlink file in a Text Window Click Add Component.
component.
*This component will appear at the
bottom of your components list.
You also may experience errors if you are
trying to upload a PDF file into a Link
component. 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
9
In the Text window
and click the 3
10
dots, then click the Copy the code below and paste it in the
code icon (< >). text window.

<iframe width="100%" height="500"

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

11
DO NOT click Save yet.

17
12
Click on the tab you
opened earlier of the PDF
and copy the URL.
(The shortcut for copy is 13
Ctrl + c) Click back to the
tab where you've been
editing the "code" in your
text window.
14
Highlight https://chs.cusd.com/Downloads/Bell%20Schedule%2019-20%20normal4.pdf”

the https://chs.cusd.com/Download
s/Bell%20Schedule%2019- 15
20%20normal4.pdf link of the code Click Save.
snipet in and paste your new URL.
(The shortcut for paste is Ctrl+v).

Using the shortcut will replace whatever

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