Displaying a PDF on Screen Photo Galleries vs iframes

Last Revised 2/11/20

1

NEWOption 2: iframe the document

PRO:• Clear text; no degradation or

fuzziness.

• Displays actual PDF, making it undeniably ADA compliant.

• Can be used in a News Component!

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

CON:• Have to get comfortable

with a little bit of code.

2

Guidelines for your iFrame

• You still need to upload the PDF & RTF files.• This maintains Tier 1 ADA compliance• This create a link for your iframe

What is an iframe?

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

4

Click “Edit Page”

5

To add a new component, click Edit Page in the top bar.

Select “Downloads” as your component Type.

You can write your internal name and public name now too.

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.

*

Click “Add Component”***This component you just made

will add to the bottom of your components list. 6

On your page, right click the PDF and click Open in New Tab.

7

Stay on your webpage. Add a Text Window to your page.• To add this new component, repeat:

• Edit Page (at top of browser)• New Component• Text Window = Type

8

Edit the text window and click the <>arrows at the bottom of the text window.

9

Copy this code and pasted in the text window:

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

10

Click on the tab you opened earlier of the PDF and copy the URL. (ctrl c)

11

Click back to the tab where you've been editing the "code" in your text window.

Highlight the https://chs.cusd.com/Downloads/Bell%20Schedule%2019-20%20normal4.pdf link of the code snipet in and paste your new URL (the short key for paste is ctrl v).

Using the short key will replace whatever is highlighted with whatever is copied.

12

Click Save. Now you have an iframe of the pdf from your page.

To adjust the height or width of the iframe, you can change the numbers of the code: width="100%" height="500"

13

Will look like this:

14

Option 1: PDF Saved as JPEG

PRO:• What we've already been

practicing.

EXAMPLES:• Alta Sierra Bell

Schedule page >>

• Fugman Bell Schedule >>

CON:• Degrades the quality of

words when converted to a JPEG.

15

Guidelines for your Image

• You still need to upload the PDF & RTF files.• This maintains Tier 1 ADA compliance• Since an image flattens text, a screen reader

can no longer recognize the words.

17

Open your PDF. It should open in Adobe Acrobat Reader

1

You may have PDFs on your page, but what if you also want to show a picture of the PDF flyer directly on the page too? Too make the image of that PDF show up on your page, you will need to convert your PDF to a jpg. That way you will have TWO files: 1 is a PDF, the other a jpg.

Follow these steps to convert your PDF to a .jpg image!

*

Click File in the upper left corner.2

In the dropdown, click Export To > Image > JPG3

Choose where you want your file to save. You should now have TWO files: 1 PDF format, 1 JPG format.

4

In order to stay ADA compliant:

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 present on the website page to be the information accessible right away, but You CANNOT only have a picture of the file. You must ALSO have a PDF and RTF of the file.

*

Select Photo Gallery as Type

To add your jpg, select Browse OR simply drag or images into

the blue Step 1 Section.

Only jpg files allowed.

WARNING: photos are not added yet!

1. Add Alternative Text2. Title / Description are

optional. They will add a black description box on the photo.

Click UPLOAD to upload your photos.

Wait for photos to upload one by one. The page will refresh when done.

Note: you do not get to change photo sizes in this component. To change the amount of space this component takes up, change the column number to less than 12 (Edit Page).

Click Gallery Options to make changes.

Fotorama Gallery: slideshow

Lightbox Thumbnails: thumbnails of all images in a grid (depending on how many images present.Rotation/timing

Control Buttons (forward/backward arrows)

Always auto checked, but NOT recommended.

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

Transition effect options.

23

To change the size of the gallery, go to Edit Page in the black bar at the TOP of the browser (not the edit pencil). Change the Columns to less than 12. You can play around with the size.

Fotorama Gallery

Title / Description

Auto 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. See the columns/window 2 tutorial for more info.

Lightbox Thumbnails Gallery

Auto 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.

Users can click on the image to enlarge it.