Displaying an image ofa pdf with eSchoolView

tableofcontents WhentoUse

Guidelines

OverviewofOptions

Option1:ConvertPDFtoJPG

Option2:iFramethePDF

WhentoUse

WhenyouhavePDFsonyourpagethatyou alsowanttoshowapictureof.

Schedule	Flyer	Infographic

Guidelines TomaintainatleastAAADACompliance(thelevelweasaschool
districtneedtoachieve),makesuretofollowtheseguidelines:

EvenafteraddinganimageofyourPDF,youmusthavePDFandRTFfiles availabletodownloadaswell.
Addinganimagemakestheinformationvisibleonthepagewithout downloading,butanimageisnotaccessiblebyascreenreader.

ImagescannotreplacePDFandRTFfiles.

Animageflattenstext,makingitimpossibleforascreenreadertorecognize thewords. WhencreatinganiFrametodisplayaPDFonthepage,thefileitselfmustbe presenttocreatethelinkfortheiFrame.
InformationoniFramesincludedinthistutorial

Pros/consofOptions Option1:ConvertPDFtoaJPG	Examples:
AltaSierraIntermediate

Familiaritywiththeprocess

Degradesthequalityofwords

whenconverted

bellschedule

FugmanElementary

bellschedule

Option2:iFramethePDF	Examples: Cleartext;nodegradationor	MiramonteElementary

fuzziness DisplaysactualPDF,makingit undeniablyADAcompliant CanbeusedinaNews
Component

Havetousethebasicsof	bellschedule coding(copy/pasteprovided
code)

Option1: ConvertPDF toaJPG

a.Open your PDF on your computer (in Adobe Acrobat Reader). b.Click "File" in the upper left corner.
1.Select Export To	Image	JPEG 2.Choose where to save your file, and click "Save". 3.You should now have 2 files: a JPG and a PDF.

1.Whenaddinganewcomponent,choosePhotoGallery.

2.Click"Browse"andselecttheJPGversionofthePDFyoujustsavedfromyourcomputer.

3.REQUIRED:Add AlternativeTextfor eachphoto.

4.(Optional):Addatitle and/ordescriptionfor yourphoto.Itwill appearinablackboxon yourphoto.

5.Click"Upload"tosave yourimages.

1.Oncethegalleryiscreated,youcan accesstheGalleryOptions.
2.(Optional)setdatesforthephotosto appear/disappear.
3.Choosehowimagesshoulddisplay (examplesonnextpage).
4.SelectRotationandTimingoptions. 5.Ifunchecked,thenavigationarrowswill
display. 6.Displaythumbnails(alwaysauto-
checkedbutNOTRECOMMENDED). 7.Offerfullscreen,imageenlargement
options. 8.Selectimagetransitionoptions. 9.ClickSavewhenfinishedmaking
changes.

PhotoGalleryOptions

Fotorama: Takesupfullcomponentwidth. Cannotchangesizeofphotosbut canchangesizeofcomponent. Titleanddescriptionwillshowat thebottomofeachphoto(if added).

LightboxThumbnails: Takesupfullcomponentwidth. Cannotchangesizeofphotosbutcan changesizeofcomponent. Titleanddescriptionwillshowatthe bottomofeachphoto(ifadded). Canclickoneachimagetoenlarge.

Option2: iFramethe PDF

WhatisaniFrame?

AniFrameisanHTML codeelementthat allowsyoutodisplay orembedanexternal webpageontoa webpage.

0.ThePDFyouwanttoiFrameMUSTEXISTasadownloadonyourpagealready.Make suretoaddthedownloadbeforesettingupyouriFrame. 1.AddaTextWindowcomponenttothepageyou'reworkingon. **DONOTtryattachingPDFsasahyperlinkfileinaTextWindowcomponent.

2.ExitoutoftheEditingpagetoseeyourwebpage.

3.Right-clickonthePDFlinkyou'readdingtotheiFrame,andselect"OpeninNewTab". Leaveopenforlaterreference.

4.GobacktoEditPage.Click"Edit"ontheTextWindowcomponentthatwillbeyour iFrameforthePDF.

5.IntheTextWindow,clickthe3dotsandclickthecodeicon<>. 6.Copythecodebelowandpasteitintothetextwindow:
<iframe width="100%" height="500" src="ADD YOUR LINK HERE" allowfullscreen></iframe>" allowfullscreen></iframe>
7.DONOTclick"Save"yet! 8.Clickonthetabyouopenedearlier(yourPDF)andcopytheURL.(Ctrl.+Cwillcopywhat ishighlighted). 9.HighlightADDYOURLINKHEREinthecodesnippetandpasteyourPDFURL(Ctrl.+Vwill pasteintothehighlightedspot).THENyoucanclick"Save".

KendraBurt DigitalMediaSpecialist

KendraBurt@cusd.com x79030