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

ModulesinJoomlaInstructorforthisWorkshop–LauraGordon

WebDevelopment

SchoolofArtsandSciences

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

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.


4

MODULEPOSITIONSEachtemplatethatisusedinJoomla!Hasdifferentmodulepositions.ForourSAS-REDtemplatethepositionsareasdocumentedbelow:

Seepositionnamesinthemodules

Page 5

CREATEACUSTOMMODULEAcustommoduleallowsyoutoaddcustomtextorimageandplaceitinapositiononthewebsite.

CREATEANEWMODULE

1.Extensions!Modules

2.ClicktheNewButtontocreateanewmodule

3.SelectTYPEofModule(selectCUSTOMMODULE)

ExtensionsàModules

ClickNEW

SelectCustom


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

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)


8

DISPLAYACATEGORYLISTIftherearemultiplearticlesinthesamecategory,anditwouldbeusefultodisplayalistofthosearticlesinapositiononthepage,aCategoryListmoduleisveryuseful.

Forexample,thissitehasdifferentarticlesforeachofthecourseofferings.Theyarebrokenoutby‘category’

1.Createanewmodule,withthetype:ARTICLES-CATEGORY

1.GraduateCourseOfferingsisaModule

2.theArticlesarearrangedandgroupedbyCATEGORY

3.TheArticlesareSORTEDbythemanualarticleorder

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.


10

4.GroupingOptions

5.DisplayOptions(2ndtolastTAB)

1.Selecttypeofgrouping(bycategoryforexample)

2.Selectsortorder

3.Ifgroupingbydate,canformatthedate(byyearforexample)

1.Displaya‘linkedtitle’

2.Showorhideintrotext/readmore,etc

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…


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

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.


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

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.


16

3.Whenonthemodulepage,filterby‘faculty’(thetitleofthemodule).ThenclicktheGREENbutton.

4.Youwillnowseethemoduleincludedinthearticle

5.Ifyouusethe‘other’modulebutton,youcanadditslightlydifferently…

TypeFacultyinthesearch

ClicktheGREENbuttonwiththenameofthemodule

Clickonthemodulebuttonthatlookslikeithas‘multiple’items.

Page 17

6.Thistoolis‘ModulesAnywhere’

7.Seethedisplayofthemoduleinthearticle

8.Previewofusingthemoduleinsideofthearticle

EnterFacultyintheSearch

CanclickontheModuleIDnumber,thiswayifyouchangethe‘title’ofthemodule,thistoolwillstillwork.

ThecodingforthisoneusestheModuleID.

FYI,youcanjustchangethemoduleidtodisplayadifferentmodule,aslongasyouknowtheModuleIDNumber


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

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


20

4.SelectPagestodisplayon(inMenuAssignmentTab)

Documents

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