AddinganImagetoaPage

Untilnow,we’vebeenusingthe“2015GeneralContent”type.However,inordertoproperlyaddanimagetoapage,we’llneedtoutilizeadifferentcontenttype,entitled“2015GeneralContentwithMediaCaption”,sointhistutorialwe’llgooverwhat’sdifferentaboutthiscontenttypeandhowtouseittoaddanimagetoyourpage.

Startbyopeningthepagewhereyou’dliketoaddyourimageinTerminalFour,andheadtothe“Content”tab.Clickthegreen“CreateContent”button.

You’llbepresentedwithalltheavailablecontenttypes.You’llbeusingthe“2015GeneralContent”typealmostanytimeyouwanttojustaddtexttoapage,aspreviouslyexplained.

However,ifanimageisneeded,youshouldusethe“2015GeneralContentwithMediaCaption”,typicallylistedonthesecondpageofcontenttypeoptions.

Whenyoufirstopenthiscontenttype,you’llseethatthefirstcouplefieldsarethesame.Onceyoubegintoscrolldown,however,you’llseethatthere’sabitmoretoit.Here’saroughbreakdownofhoweachareaofthiscontenttypeworks.

Thetwotextareasworkessentiallythesamewayasthestandard“2015GeneralContent”type,solet’slookatthesettingsthatallowyoutocontrolyourimage.

First,goaheadandclick“SelectMedia”nexttothe“MediaCaptionImage”field.ThisallowsyoutoselectyourimagefromaMediaLibrarywindowthatappearsinasimilarfashiontohowyouselectaPDFfilewhenaddingaPDFlinkintoyourpage.

It’simportanttonotethatyouwilllikelyseedifferent“variants”ofyourimage.We’llcoverthisinmoredetailinalatertutorial,soforthetimebeingjustclickthenameoftheversionthatsays“Original”inthe“Type”column.

Oncethat’sdone,you’llseethattheimageissetinplacenexttothe“MediaCaptionImage”field,alongwithalittlethumbnail,theMediaLibrarynameoftheimage,filename,filesize,MediaLibraryfolderlocation,andthreenewbuttonsallowingyouto“SelectMedia”ifyou’dliketochooseadifferentimage,“ClearSelection”toremovetheimagecompletely,and“Download”ifyou’dliketosavetheimagefiletoyourcomputer.

Belowthataretwofieldstitled“MediaCaptionYoutubeEmbedCode”and“KalturaVideoEmbed“.Theseallowyoutoturnyourimageintoavideoplayerwitha“play”buttonovertopofthem,butwe’llcoverthatinamoreadvancedtutoriallater,soforthetimebeingyoucanignorethem.

Afterthose,you’llseea“MediaCaptionText”field.Youcanaddatextcaptionherethatwilldisplaydirectlybelowyourimageonthefinalpage.Thisisn’trequired,butcanbeutilizedtogiveyourimagemorecontextwhennecessary.

Thelastfieldisacheckboxtitled“FloatMediaRight“.Thisallowsyoutospecifyifyou’dlikeyourimagetoappearontheright-handsideofthepagewiththebottomtextareacontentappearingtotheleftandwrappingaroundit,orifyou’dprefertheimagetospanthefullwidthofthepagewiththebottomtextareacontentappearingbelowit.Let’sleaveitcheckedfornow.

Forthesakeofbuildingoutourpage,I’mgoingtogiveourcontenttypea“Name”attheverytop,andsomedummytexttothetopandbottomtextareas.Onceit’sallsaidanddone,here’swhatour“2015GeneralContentwithMediaCaption”lookslike:

Ifwe“SaveandApprove”,wecanthen“Preview”ourcontentviatheblue“Actions”dropdownnexttoit.

Thiswillopenaseparatebrowsertabtoshowuswhatourpagewilllooklikeonceitpublishestothelivewebsite.Asyoucansee,thetoptextareaisdisplayingabovetheimage,thebottomtextareaisdisplayingtotheleftoftheimageandwrappingaroundunderneathit,andourimageanditscaptionareappearingontheright-handside.

Butwhatifwe’dlikeourimagetoactasmoreofabanneracrossthetopofthepage,ratherthanjustdisplayingtuckedbetweendifferentparagraphs?Todothis,let’s:

Reopenourcontent:

Removethetoptextareacontentinorderfortheimagetomoveuponthepage:

Anduncheckthe“FloatMediaRight”checkbox:

Oncethat’sdone,“SaveandApprove”onceagain,andclick“Preview”fromthe“Actions”dropdown.Here’swhatweshouldsee:

Voila!Ourimagenowspansthefullwidthofthepage,andrestsabovealltheothercontent.