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