Site Building Tools, Tips, Modules, and Tricks · • Drupal site building or theming basics •...

SiteBuildingTools,Tips,Modules,andTricks

ShaniFelderAugust24,2018

DrupalGovCon2018

Welcome•Whoisthischick?•Whoisthisfor?•Whatareweheretolearn?

Hi,I’mShani

• Front-endWebDeveloper/Designer• DrupalSiteBuilder&Themer• StillnewtosomeDrupal,notashamed!

Whoareyou?• Thissessionisforsitebuilderswhomightwonder:• "Whydidn'tIknowaboutthismodule3websitesago?"• "Isn'tthereabetterwaytosearchandsortallofthiscontent?"• "Willthistaskrequirecustomcode?"• "Isthereamoduleforthat??"

• Anyoneelseinthehouse?

Whatyou’lllearntoday• AfewmodulesthatmakeviewingandusingtheDrupaladminareaeasier• SimpleDrush(DrupalShell)commandstohelpyoumanageyoursitequickly• TriedandtrueresourcesthathelpyoulearnDrupalatyourownpace• Whatotherattendeesaredoingandusingduringashareandtellsegment• Whatwe'llmiss:

• Drupalsitebuildingorthemingbasics• Creatingmodules• Installingdrush

ThissessionwillbegearedtothoseusingDrupal7,butwithanemphasisontoolsandmodulesalsoavailableinDrupal8. (AnyencouragementtomigrateyourDrupal7websitestoDrupal8ispurelypossiblycoincidental☺)

ModulesforSiteBuilders

TheEssentials• Views• Token• Webform• CKEditor• BlockClass• MenuAttributes• Link• Media• Pathauto• Context• Superfish• Paragraphs• Findcontent

• Viewsslideshow• AdminToolbar• DisplaySuite• Replicate• Flexslider• SlickSlideshows• LanguageSwitcherDropdown• NodeExport• AutomatedLogout• BackupandMigrate• Select(orOther)• andsomanymore!

Today’sHighlights

• ModuleFilter• AdministrationViews• EIM(ExtendImageModule)• FocalPoint• FieldGroup

ModuleFilterdrupal.org/project/module_filter

• Improvesmodulereadabilityandfindability• AvailableforDrupal7and8• SomefunctionalitybuiltintoDrupal8core

ModuleFilterDrupalExtend/ModulesPage(/admin/modules)

ModuleFilterModulesPagewithModuleFilterEnabled(Drupal7)

ModuleFilterModulesPagewithModuleFilterEnabled(Drupal8)

AdministrationViewsdrupal.org/project/admin_views

• ReplacesobjectmanagementpagesinDrupalcorewithViews• Usefulforsortingandfindingcontent• IncludedinDrupal8core(butstillmaintainedfor7)

AdministrationViewsDrupal7CoreContentPage(/admin/content)

- nosearching- nocustom /additionalfilters

AdministrationViewsDrupal7ContentPagewithAdministrationViews(admin_views)enabled

AdministrationViewsDrupal8CoreContentPage

AdministrationViewsDrupal7AdministrativeNodeView(/admin/structure/views/view/admin_views_node)Drupal8ContentView(/admin/structure/views/view/content)

EIM(ExtendImageModule)drupal.org/project/eim

• AllowsustomakeimageAlttextandtitletextrequired!• ThesearenotrequiredbydefaultinDrupal7

• IncludedinDrupal8core

EIM(ExtendImageModule)Drupal7CoreDefaultAccessibleImageOptions

Drupal7ImageFieldinAddContentForm

Alttextnotrequired,easilyskipped

EIM(ExtendImageModule)DrupalAccessibleImageOptionswithEIMenabled

DrupalImageFieldinAddContentForm

FocalPointdrupal.org/project/focal_point

• NeverallowDrupaltocropabadimageagain!• Eliminatetheneedformultipledimensionsofthesameimage• Specifythemostimportantportionofanimage(itsfocalpoint)• BlendsnicelywithDrupal’simagestylesandvariousimagesizes• AvailableforDrupal7and8

FocalPointDefaultimagefieldincontentform

FocalPointHeroimage,nofocalpoint

Themovie’smaincharacteriscropped outoftheimage!

FocalPointInstalltheCrop&FocalPointModules,selectthe“FocalPointScale&Crop”effectforyourImageStyle

FocalPointAdjusttheimage’sfocalpointinyourcontent

FocalPointHeroimage,withfocalpointassigned

FocalPointContentblockswithvariedimagesizesusingthesameimagestyle

FocalPointAdjustthefocalpointforeachnode’simage

FieldGroup

• Makesorganizingfieldseasier,moreintuitive• CleansuptheAddcontentform• ChoosefromTab,Accordion,otherUIoptions• AvailableforDrupal7or8

http://drupal.org/project/field_group

FieldGroupDefaultContenttype>ManageFieldsPage

FieldGroup

Addcontentform

FieldGroupCreate,draganddropgroupsoffields

FieldGroup

Addcontentformisnowtabbedandorganized

Tips&TricksforSiteBuilders

TheEssentials• AdoptaContentFirstattitude

• Planthenbuild• FollowtheDrupalWay

• Separatethecontent,theme,andfunctionalitylayers• WorkwithDrupal,notagainstit• Thinkofthosethatwillfollow

• Useyouradminshortcuts!

DrupalReportLog/admin/reports/dblog>Usefilters

SimpleDrushCommandsforSiteBuilders• Manageyoursitequickly

• Manageyourselfandotherusersquickly

DrushSiteManagementOpenyourDrupalShell(Drush)

● Open Terminal,Command Promptoranothercommandlineinterface○ IfusingAcquiaDevDesktop,clicktheterminal

windowicon● Navigatetoyoursite:$cdsites/myDrupalSite

Manageyourdatabase

● Backup: $drushsql-dump --result-file=my_backup_file.sql

● Restore○ $drushsql-drop (drop /clearalltables)○ $drushsql-cli <my_backup_file.sqlor

~/my_backup_file.sql○ Update:$drush updatedbor$drushupdb

Clearyoursite’scache

● Drupal7:$drushcc all○ $drushcc css-js

● Drupal8:$drushcr

Manageyourmodules

● List:$drush pmlor$drushpm-list● Enableanddisable

○ $drushen<module_name> or$drushen<module_name>*

○ $drushdis<module_name>● Download:$drushdl<module_name> -y● Updateall:$drushup● Uninstall:$drush dl<module_name> -y

DrushUserManagement

Createanewuser

● $drushucrt<username>● $drushucrtsfelder2--

mail=sfelder@email.com --password=password1

Manageroles

● Viewinfo:$drushuinfsfelder2● Addnewrole: $drushurol"administrator"

sfelder2

Manageuseraccountaccess

● Unblock auseraftertoomanypasswordattempts$drushuublk<username>

● Changeapassword$drushupwd<username> --password="SOMEPASSWORD"

Loginwithaonetimelink

● WorkswiththeWSOD!● $drushuser-login sfelder2● Generatesalink,copytheentireURLafter “http://default”

andpasteintoyouraddressbarafteryoursitedomain○ mylocalsite.com/user/reset/1/678971620/n75RR6vYY

jNqcb6jCAMERAz7rA6Iy-X_12345unj04R-fE/login

Tools&ResourcesforSiteBuilders

SiteBuildingToolbox• WebAIM ColorContrastChecker

• https://webaim.org/resources/contrastchecker• CheckRGB hexadecimal textcolorsagainstvariousbackgroundsforaccessibility

• DirtyMarkup• http://www.10bestdesign.com/dirtymarkup• BeautifypoorlyformattedHTML,CSS,orJS

• ConvertCase• http://convertcase.net• Converttexttoupper,lower,orSentencecase

• 0to255• http://www.0to255.com• Pickacolor,anycolor

• Lorem Pixel• http://lorempixel.com• Imageplaceholdersatanysize!

ResourcesforSiteBuilders• Drupalize.me• http://drupalize.me

• CodeKarate• http://codekarate.com/codekarate-posts/type/daily_dose_of_drupal

• DrupalDocumentation• http://www.drupal.org/documentation

• YouTube• http://www.youtube.com/results?search_query=drupal+site+building

• Yourfavoritesearchengine!

Thankyou!Specialthankstomyfamily,friends,andtheawesomeDrupalersatQuotient,Inc.

ShaniFelderdrupal.org/u/sfelder