Web Development School of Arts and Sciences€¦ · Page 3 Components in Joomla! WELCOME Instructor...
Transcript of Web Development School of Arts and Sciences€¦ · Page 3 Components in Joomla! WELCOME Instructor...
Galleries,Sliders&VideosJoomlaInstructorforthisWorkshop–LauraGordon
WebDevelopment
SchoolofArtsandSciences
Joomla!Galleries,Sliders&VideosinJoomla!2017
2
TABLEOFCONTENTS
Welcome...............................................................................................................................................3WhatisJoomla?.................................................................................................................................................3
WhatisaComponent?......................................................................................................................3WorkwithSmartSlider2................................................................................................................4EditCurrentSmartSliderSlideshow.......................................................................................................4SlideshowDetails..........................................................................................................................................................5DuplicateorDeleteSlide...........................................................................................................................................5EditaSlide.......................................................................................................................................................................6
IgniteGallery.......................................................................................................................................7CreateGallery.....................................................................................................................................................8UploadImages...................................................................................................................................................8EditImages(Description,AltText).......................................................................................................10AddIgniteGallerytoWebsite..................................................................................................................11DisplaywithaMenuItemLink.............................................................................................................................11DisplayInsideofanArticle.....................................................................................................................................12
AddVideousingIgniteGallery.................................................................................................................14WorkwithProfilesinIgniteGallery......................................................................................................15
InsertaVideointoyourArticle..................................................................................................17WorkwithPDFFiles(WithoutUsingDocman)....................................................................18WorkwithPopupWindows(Addfileswithinanarticle)............................................................19
Page 3
ComponentsinJoomla!
WELCOMEInstructorforthisWorkshop
SchoolofArts&Sciences,WebDevelopment
Onceyouarrive:
1. LogintotheworkstationwithyourNetID2. Openawebbrowser(FirefoxorChrome)
3. Gotothewebsite:http://www.sas.rutgers.edu/cms/sandbox3
WHATISJOOMLA?Joomla!isContentManagementSystem(CMS)softwarethatrunsonawebserver,andallowsyoutoupdateyourunit'swebsitethroughabrowser(suchasGoogleChrome,MozillaFirefox,orSafari).
Acontentmanagementsystemisolatestheprocessofupdatinginformationfromthemoretechnicalaspectsofupdatingawebsite(suchasadministration,configuration,anddesign),andeliminatestheneedtoeditHTMLorusewebdesignsoftware.
Visitwww.joomla.organdhelp.joomla.orgformoreinformationonJoomla!
WHATISACOMPONENT?AcomponentinJoomla!Isaprogramthatcanincludemorecomplexinformationthenjusta‘plain’Joomlaarticle.Thesecomponentsarereferencedas‘miniprograms’.TheycanbeassimpleasaweblinksmanagerorascomplexasJeventswhereeventsaremanagedandcreatedandorganized.
AJoomlaComponentmightalsoincludeamoduleaswell,whichcanpulltheinformationtogether.
Joomla!Galleries,Sliders&VideosinJoomla!2017
4
WORKWITHSMARTSLIDER2Smartslider2istheslideshowcomponentthatweuseonallofthehomepagesofthewebsite.Thistoolcanbeusedonotherpagesaswell.Thetoolisquitecomplex,wewillfocusonbasiceditingtechniques.
EDITCURRENTSMARTSLIDERSLIDESHOW
SelectSlideshowtoEdit
ComponentsàSmartSlider2
ClickonSlideshowtoedit.InthisexampleitistheSpotlightSlideshow
Page 5
SlideshowDetails
DuplicateorDeleteSlide
1.ClickonindividualSlidesheretoedit.
2.Clickonthe‘greencircle’toun-publishslides
3.DRAGslidesasneededtore-sequence
4.Ifchangesdon’tseemtosave,clickonREFRESHCACHE
Hovermouseoverslide,canselectDUPLICATEtomakeacopyofaslide.
CanselectDELETE(thiswilldeleteaslide)
Joomla!Galleries,Sliders&VideosinJoomla!2017
6
EditaSlideClickonaslidetoEdit
Tochangetheimage,clickontheimagebutton
AddALTTexttotheimageifitrepresentssomething
*NOTE,imagesshouldbe1200x400tofitproperly.
Tohavetheimagelinktoaspecificpage,typeintheURLintheLink
ImagesusedintheSmartSliderarestoredintheMEDIAMANAGER
Itisrecommendedtohaveafolderspecificallyfor‘bannerimages’.
Clickuploadjustasifyouareaddinganimagetomediamanager.
Page 7
IGNITEGALLERYIgniteGalleryisanimagegallerytoolthathasthefollowingfunctionalitybenefits:
1.DisplaygallerywithThumb-nailsonly(Responsive)
2.Displaygalleryasa‘slideshow’withamainimage(withorwithoutthumbnails)
3.CaneditimagesfromgalleryonFRONTEND(donotneedtologintoadministratortomanagegalleries)
4.Galleriescanbecreatedwithinnestedcategoriesforeasydisplay
Ifthistoolisnotinstalledonyourwebsite,pleasecreateaworkordertorequestthatweinstallitforyou.
Joomla!Galleries,Sliders&VideosinJoomla!2017
8
CREATEGALLERYComponents!IgniteGallery-!Category
Thecategorystructurecanbe‘nested’andcanhaveimagesineachlevelifneeded.
UPLOADIMAGESWhileontheCATEGORYListingPage,clickontheManageImages(0)link
ClickNewCategory
NameofCategory
SelecttheProfiletouse(canbechanged)
Parent(howthecategoryis‘nested’)
SettoPUBLISHED
Page 9
DragimagesintotheGRAYbox
ClickAddimagesbutton,togettothe‘browse’area.
Click‘StartUpload’touploadtheimagesintothegallery.
Joomla!Galleries,Sliders&VideosinJoomla!2017
10
EDITIMAGES(DESCRIPTION,ALTTEXT)WhileontheImageListingPage…
ClickEDITunderDescriptionorTag
EnterDescription
Tags(Thesecanbeusedtodetermineimageselectionnotrequired)
AltText:Thiscanbeusedtodisplaytextbelowthumbnails(theprofilehastobesettodisplaythistext)
ImageLink:Ifontheclickontheimageyouwanttogotoadifferentpageorarea,thisiswhereitisset.
Page 11
ADDIGNITEGALLERYTOWEBSITEThegallerycouldbedisplayedonthewebsiteeither‘inside’ofanarticle,orwithamenuitemlink.
DisplaywithaMenuItemLink
SampleDisplay:
Tochangetheimage,clickonthe‘choosefile’button.
MenuItemtype:
IgniteGalleryàDisplayCategory
SelecttheCategorytodisplay
Joomla!Galleries,Sliders&VideosinJoomla!2017
12
DisplayInsideofanArticleEditanArticle
ClickonGalleryButtonunderneaththeeditortoaddthegallery.
SelectCategorytoview
SelecttheProfiletouse(scrolldowntoseeprofileoption)
Page 13
CodeLayout:
Id=3128(thisisjustauniquenumber)
cid=1(thisistheCategoryID)
pid=1(thisistheProfileID)
Sampleresultofembeddinggalleryinanarticle:
Joomla!Galleries,Sliders&VideosinJoomla!2017
14
ADDVIDEOUSINGIGNITEGALLERY
1.Uploadimage(thiswillbethe‘thumbnail’forthevideo
ClickonEditforthe‘IMAGE’thatyouwanttoaddthevideoembedcodeto.
Gotowherethevideoishosted(shouldbewithintherutgersyoutube)
https://www.youtube.com/user/Rutgers
ClickonEmbed
HighlightthecodeandCOPY
PastetheEmbedCodeintotheMediaEmbedareaontheimagedetails(Scrolltothebottom).
Page 15
WORKWITHPROFILESINIGNITEGALLERY
Thebiggestdifferencewiththese2profiles,isthe‘main’profileshowsa‘largerimage’,andthe‘thumbsonlyprofile’showsjustthumbs.
Allsettingsaredefinedwitheachprofile.
EachCategoryisassignedaDEFAULTprofile,butwhenputtingthecategoryinsideofanarticle,youcanselectadifferentprofiletouseatthattime.Thiswillchangethedisplay.
CurrentlytheSAS-ITwebdevelopmentgroupwillberesponsibleforeditingyourprofiles,butifyouareinterestedincreatingyourownprofiles,pleasecreateaworkorder,andoncewewalkyouthroughhowtodoit,wecangiveyouthataccessaswell.
Youcannowseetheimageasa‘thumb’withtherestoftheimages.
Whenyouclickonit,youwillbetakentothelightbox,andthevideowillrun.
Joomla!Galleries,Sliders&VideosinJoomla!2017
16
Page 17
INSERTAVIDEOINTOYOURARTICLE1.Gotoyoutube.comtofindthevideo
2.BesuretoPAUSEthevideo
3.Clickonthesharebuttonunderthevideo,grabthelink:
https://youtu.be/oXYMG5LOQ2Q
4.Inthearticleplacethefollowingcode:
{youtube}VIDEOID{/youtube}(wherethevideoid=oXYMG5LOQ2Q)
DifferentParametersforVideo:
{youtube}oXYMG5LOQ2Q|100%|400{/youtube}
100%=FULLWIDTH
400=Heightof400px
*Ifyoupastethe‘LINK’,itwillnotwork,the‘link’mustbe‘brokenfirst’(clickonthevideoed,thenclickonthe‘unlink’option
Joomla!Galleries,Sliders&VideosinJoomla!2017
18
WORKWITHPDFFILES(WITHOUTUSINGDOCMAN)Theseinstructionsarehowtoworkwithandmanagefileswithoutputtinglinksintothearticle.ItisalsopossibletomanagefilesthroughtheArticleEditor,whichwewillworkthroughnext.
GotoComponents!JCEEditor
ClickonFILEBROWSER(Ifyoudonothaveaccess,pleasecreateaworkorderrequestingit)
1.Uploadanewfile
2.Checkoffthefile
3.Deletefile(becareful!)
4.Renamethefile(becareful!)
Page 19
WORKWITHPOPUPWINDOWS(ADDFILESWITHINANARTICLE)*Ifyoudonothavethisfeaturedinstalled,createaworkorderandrequestit,wecaninstallitforyou(evenintheoldertemplates).
Ifyouwouldliketoopenafileoranimageina‘popup’window…
EndResult:
Ifyouclickonthesmallerimageonthepage,alargerimage(doesnothavetobethesameimage)canbeinthepopup.Thiscanbedonefor.pdfdocumentsorimages.
ExamplewithImage:
ExamplewithPDF:
Joomla!Galleries,Sliders&VideosinJoomla!2017
20
ImplementPopup
1.InsertImageintoarticle(thisisthe‘smallerimage’)
2.ClickonIMAGE(toselectit),thenclickontheLINKIcontomakethepopup
Clickontheuploadicon
Uploadimageorpdffile