Adding an Image to a Page - LMU Marketing and Communications · Adding an Image to a Page Until...
11
Adding an Image to a Page Until now, we’ve been using the “2015 General Content” type. However, in order to properly add an image to a page, we’ll need to utilize a different content type, entitled “2015 General Content with Media Caption”, so in this tutorial we’ll go over what’s different about this content type and how to use it to add an image to your page. Start by opening the page where you’d like to add your image in TerminalFour, and head to the “Content” tab. Click the green “Create Content” button. You’ll be presented with all the available content types. You’ll be using the “2015 General Content” type almost any time you want to just add text to a page, as previously explained. However, if an image is needed, you should use the “2015 General Content with Media Caption”, typically listed on the second page of content type options.
Transcript of Adding an Image to a Page - LMU Marketing and Communications · Adding an Image to a Page Until...
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.
