modules in joomla - rutgers university › images › faq › web_dev › joomla › ... ·...
TRANSCRIPT
![Page 1: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/1.jpg)
ModulesinJoomlaInstructorforthisWorkshop–LauraGordon
WebDevelopment
SchoolofArtsandSciences
![Page 2: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/2.jpg)
Joomla!WorkingwithModulesinJoomla!2018
2
TABLEOFCONTENTS
Welcome...............................................................................................................................................3WhatisJoomla?.................................................................................................................................................3
WhatisaModule?..............................................................................................................................3ModulePositions...............................................................................................................................4CreateaCustomModule..................................................................................................................5CreateaNewModule......................................................................................................................................5
EditaCustomModule.......................................................................................................................7DisplayaCategoryList.....................................................................................................................8Displaya‘NEWSFLASH’forArticleContentDisplay...........................................................11RandomImageModule.................................................................................................................12
WorkwithImagesviaMEDIA(option#1)......................................................................................................12UploadImagesusingJCEEditor–FileBrowser(Option#2)..................................................................13CreateRANDOMImageModule...........................................................................................................................14
PlaceaModulewithinContent...................................................................................................15PlaceRandomImagesModulewithinanArticle.................................................................18AddMenustoyoursite.................................................................................................................19
![Page 3: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/3.jpg)
Page 3
ModulesinJoomla!
WELCOMEInstructorforthisWorkshop
SchoolofArts&Sciences,WebDevelopment
Onceyouarrive:
1. LogintotheworkstationwithyourNetID2. Openawebbrowser(FirefoxorChrome)
3. Gotothewebsite:http://www.sas.rutgers.edu/cms/sandbox34. Opena2ndtabforthe‘backend’
a. http://www.sas.rutgers.edu/cms/sandbox3/administrator
WHATISJOOMLA?Joomla!isContentManagementSystem(CMS)softwarethatrunsonawebserver,andallowsyoutoupdateyourunit'swebsitethroughabrowser(suchasGoogleChrome,MozillaFirefox,orSafari).
Acontentmanagementsystemisolatestheprocessofupdatinginformationfromthemoretechnicalaspectsofupdatingawebsite(suchasadministration,configuration,anddesign),andeliminatestheneedtoeditHTMLorusewebdesignsoftware.
Visitwww.joomla.organdhelp.joomla.orgformoreinformationonJoomla!
WehostthelocalNJUserGroupMeeting:joomlausersnj.com
WHATISAMODULE?AModuleinJoomlaisa‘miniprogram’thatcanbedisplayedinvariouspositionsonthewebsite.Modulescanmakeyoursitemoredynamicandeasiertoworkwithifusedproperly.Amoduleastwoveryimportantproperties:
1.Position
ThisdeterminesWHEREonthewebpageitwilldisplay
2.MenuAssignment
Thisdetermineswhatpage(s)themodulewilldisplayon.Ifapositiondoesn’t‘exist’onaspecificpageitwillnotdisplay.
![Page 4: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/4.jpg)
Joomla!WorkingwithModulesinJoomla!2018
4
MODULEPOSITIONSEachtemplatethatisusedinJoomla!Hasdifferentmodulepositions.ForourSAS-REDtemplatethepositionsareasdocumentedbelow:
Seepositionnamesinthemodules
![Page 5: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/5.jpg)
Page 5
CREATEACUSTOMMODULEAcustommoduleallowsyoutoaddcustomtextorimageandplaceitinapositiononthewebsite.
CREATEANEWMODULE
1.Extensions!Modules
2.ClicktheNewButtontocreateanewmodule
3.SelectTYPEofModule(selectCUSTOMMODULE)
ExtensionsàModules
ClickNEW
SelectCustom
![Page 6: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/6.jpg)
Joomla!WorkingwithModulesinJoomla!2018
6
4.DefinetheCustomModule
(Forthisclass,titleshouldbe:CustomFirstName,LastInitial)
5.DeterminewhatPAGE(s)themodulewillappearon(ForclassselectYOURMENUITEM)
1.ModuleTitle
2.Todisplaytitleonpage,click‘show’
3.ModulePosition(whereitwilldisplayonthepage)
4.Contentcanincludetext,imageoranythingthatyoulike
1.SelectModuleAssignment:
Onlyonthepagesselected
2.Clickon‘none’to‘de-select’allitems,beforeselectingtheitemstoclick.
3.Checktheboxnexttothemenuitem(s)orpagesyouwantthemoduletobedisplayedon
![Page 7: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/7.jpg)
Page 7
EDITACUSTOMMODULEIfamodulealreadyexistsonyourwebsite,andyouneedtoeditit,firstfigureoutwhattypeofmoduleitis.Ifitjusthastextoranimageinit,itisprobablyaCUSTOMmoduletype.
(Forthisclass,EditYOURModulethatyoujustcreated)
1.SampleCustomModule
2.Gotobackend,Extensions!Modules
3.Inthesearch,type‘Contacts’
4.Editthemoduleasneeded(similartoeditinganarticle)
ContactsisaCustomModule.Ithastext‘typed’intoit.
Type‘contact’inthesearch.
Hit<ENTER>
ClickonContacts(inpositionsidebar-b)
![Page 8: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/8.jpg)
Joomla!WorkingwithModulesinJoomla!2018
8
DISPLAYACATEGORYLISTIftherearemultiplearticlesinthesamecategory,anditwouldbeusefultodisplayalistofthosearticlesinapositiononthepage,aCategoryListmoduleisveryuseful.
Forexample,thissitehasdifferentarticlesforeachofthecourseofferings.Theyarebrokenoutby‘category’
1.Createanewmodule,withthetype:ARTICLES-CATEGORY
1.GraduateCourseOfferingsisaModule
2.theArticlesarearrangedandgroupedbyCATEGORY
3.TheArticlesareSORTEDbythemanualarticleorder
![Page 9: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/9.jpg)
Page 9
2.SelecttheFilteringOptions
3.SelecttheOrderingOptionsToselect‘RANDOM’,thatisintheoptionforArticleFieldtoOrderBy
HowtoORDERarticlesManually
GotoContent!Articles
1.Select#ofarticlestodisplay
2.Selectcategoryormultiplecategoriestodisplay
3.SelectifFeaturedarticlesSHOULDorSHOULDNOTappear
4.CanselectspecificIDsnottoappearintheresult.
IfArticleOrderisselected,itispossibleto‘manually’definetheorderofthearticles
1.ClicksearchTools
2.SelectCATEGORYtodisplaythearticlesfrom.
3.Clickonthe‘ORDERING’ICON
4.Oncethe‘3dots’areblack,youcanDRAGthearticlesintothesequenceasneeded.
![Page 10: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/10.jpg)
Joomla!WorkingwithModulesinJoomla!2018
10
4.GroupingOptions
5.DisplayOptions(2ndtolastTAB)
1.Selecttypeofgrouping(bycategoryforexample)
2.Selectsortorder
3.Ifgroupingbydate,canformatthedate(byyearforexample)
1.Displaya‘linkedtitle’
2.Showorhideintrotext/readmore,etc
![Page 11: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/11.jpg)
Page 11
DISPLAYA‘NEWSFLASH’FORARTICLECONTENTDISPLAYNowthattheArticleCategorymodule(seeinstructionsabove),candisplayarticlecontent,thismoduletypemaynotbenecessary.Butitisa‘simpler’approach.
Asampleuseforthisistodisplaya‘testimonial’,randomlyonapage,eachtimeyouvisitthepageadifferent‘articleparagraph’candisplay.
ThiscoreJoomlaModulehasexistedinJoomlasinceJoomla1.0.
1.CreateanewmodulewithatypeofArticlesNewsFlash
2.DefineoptionsforNewsflash
1.Canselectmultiplecategories
2.Defineifyouwantimagesdisplayedornot
3.showreadmoreornot
4.OrderingcanonlybebyDate,Ordering(manualarticleordering),Random(nooptiontoorderbytitle)
*cannotselectfeaturedornot…
![Page 12: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/12.jpg)
Joomla!WorkingwithModulesinJoomla!2018
12
RANDOMIMAGEMODULEThismodulewilldisplayasingleimagefromafolder.Ifyouhave10imagesinthefolder,eachtimethepageisvisitedadifferentimagewillbedisplayed.Thiscanaddinterestingvarietytothesite,withouthavingacomplexslideshow.
ItisrecommendedthattheimageisRESIZEDandCROPPEDsoallimagesinthefolderarethesamesize.
ItispossibletoassignalinktoALLimages,ifsomeoneclicksontheimagetheycanbetakentoaspecificareaofthewebsite.ThelinkhastobetheSAMEforallimages.
Thisisnottosubstituteforanactualphotogalleryorslideshow.
Asuggesteduseisfora‘studyabroad’orperhapsdifferentpiecesofartworktobedisplayedonthehomepageofawebsite.
WorkwithImagesviaMEDIA(option#1)1.UploadImagestotheSpecificFolder(Content!Media)
2.CreatenewFoldertoplaceimagesin
3.Uploadimagesintothefolder(Selectfolderfirst)
![Page 13: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/13.jpg)
Page 13
UploadImagesusingJCEEditor–FileBrowser(Option#2)IfyoursystemdoesnothaveJCEEditor,createaworkorder
IfyouhaveJCEEditor,butdonotseeFileBrowser,Createaworkorder,wecanadditforyou
1.Components!JCEEditorPro!ControlPanel
2.ClickonFILEBROWSER
3.ClickonphotofolderonLEFT(orthefolderthattheinstructorrequests)
4.ClicktoUploadimage
1.OpenFolder
2.ClickUPLOAD
1.ClickBROWSEtofindfile
2.ClickUploadoncefileisinthebox.
![Page 14: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/14.jpg)
Joomla!WorkingwithModulesinJoomla!2018
14
CreateRANDOMImageModule1.Createnewmoduletype:RANDOMIMAGE
2.DefinetheoptionswithRandomImageModule(alltextisCASESENSITIVE
3.SetupModuletodisplay
1.SpecifyImageFOLDERthattheimagesarein.
2.SpecifyasingleLINK(optional)
3.DefinetheWIDTHandHEIGHTofthedisplay.ImagesshouldberesizedFIRSTandshouldallbethesamesize.
1.SelectPOSITION(sidebar-b)
2.SelectMENUASSIGNMENT
![Page 15: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/15.jpg)
Page 15
PLACEAMODULEWITHINCONTENTNormallyamoduleisdisplayedinaspecificmodule‘position’.Itispossibleto‘nest’amoduleinsideofanarticle.Forexampleifyouhavealistofcoursesthataretaughtforaspecific‘unit’youcanputthis‘list’or‘schedules’insideofthearticle.
1.CreatetheModulefirst
Inthisexample,I’mcreatingaArticles–CategoryListingofFacultyMembers
Thismodulehasthefollowingcriteria:
• Filtered!FacultyCategory• Position!NONE(donotsettheposition)• MenuAssignment!NONE(Donotsetittoappearonmenuitems)
2.CreatetheArticle
Title:Faculty
Description:Addinformationintothearticle,placecursorwhereyouwantthe‘module’toappear.
ClickonModuleatthebottomoftheeditor.
(NoteyoucanuseeitherModulebutton),wewilltrythefirstonefirst.
![Page 16: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/16.jpg)
Joomla!WorkingwithModulesinJoomla!2018
16
3.Whenonthemodulepage,filterby‘faculty’(thetitleofthemodule).ThenclicktheGREENbutton.
4.Youwillnowseethemoduleincludedinthearticle
5.Ifyouusethe‘other’modulebutton,youcanadditslightlydifferently…
TypeFacultyinthesearch
ClicktheGREENbuttonwiththenameofthemodule
Clickonthemodulebuttonthatlookslikeithas‘multiple’items.
![Page 17: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/17.jpg)
Page 17
6.Thistoolis‘ModulesAnywhere’
7.Seethedisplayofthemoduleinthearticle
8.Previewofusingthemoduleinsideofthearticle
EnterFacultyintheSearch
CanclickontheModuleIDnumber,thiswayifyouchangethe‘title’ofthemodule,thistoolwillstillwork.
ThecodingforthisoneusestheModuleID.
FYI,youcanjustchangethemoduleidtodisplayadifferentmodule,aslongasyouknowtheModuleIDNumber
![Page 18: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/18.jpg)
Joomla!WorkingwithModulesinJoomla!2018
18
PLACERANDOMIMAGESMODULEWITHINANARTICLE1.COPYRandomImagemodulecreatedbefore
ClickontheRandomImageModuleCreatedBefore
ClickSAVEASCOPY
Renameas:YourName–(copy)
2.GointoyourARTICLE(withyourname)
Toinsertthemodule,clickonthe‘modulebutton’
3.ClickontheModuleNUMBERtoinsertitintothearticle
4.Viewthe‘code’thatisaddedintothearticle:
1.SetPOSITIONtoNONE(removeposition)
2.SetMenuAssignmenttoNOPAGES
ClickonModuleButton
![Page 19: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/19.jpg)
Page 19
ADDMENUSTOYOURSITEItisusefultodisplayrighthandmenusonyoursitepages,especiallypageswheretherearemultiplenavigationoptions.
1.CreateMenuModule->Type=Menu
2.DefineModuleOptions
3.DefineMenuAssignmenttab
SeeDropdownMenu‘underpeople’.
ThemenuontherightistheIDENTICALmenu.
Thisgivesuserseasynavigationoptions.
1.SelectMenu=MainMenu
2.StartLevel=2(sinceitisjustgoingtoshowthe‘submenu’)
3.Showtitle=SHOW
4.Position=sidebar-b
![Page 20: Modules in Joomla - Rutgers University › images › FAQ › web_dev › joomla › ... · 2018-04-27 · 8 Joomla! Working with Modules in Joomla! 2018 DISPLAY A CATEGORY LIST If](https://reader034.vdocuments.us/reader034/viewer/2022042403/5f15ed272eddfd1eba5ae6a3/html5/thumbnails/20.jpg)
Joomla!WorkingwithModulesinJoomla!2018
20
4.SelectPagestodisplayon(inMenuAssignmentTab)