7 @moRtenDk - PowerPoint PPT Presentation

dEvel DOWnLOAd DEvEL mODUlE INStALL DEVeL + KINt INStALL DRUsH DRUsH En KInT DOCs.DRuSH.oRG/eN/MaSTEr/INsTALl/ @moRtenDk #drUpaltWIG

dIsaBle csS cAche @moRtenDk #drUpaltWIG

THEmE DeBUG FTW! SERvICEs.YMl @moRtenDk #drUpaltWIG

FILe NAmE SuGGEsTIOnS FILe NAmE SuGGEsTIOnS @moRtenDk #drUpaltWIG

PATh TO ACTiVE tEMPlAtE @moRtenDk #drUpaltWIG

@moRtenDk #drUpaltWIG

kInt KRUmO FoR DrUPAl 8 {{ kint( foo ) }} screenshot af kint fra video {{ content.field_image }} @moRtenDk #drUpaltWIG

tWig deBug: SITeS/AlL/DeFAUlT/SeRVIcES.yMl DRUsH Cr {{ KInT(FoO) }} @moRtenDk #drUpaltWIG

tE m pL a tE sT r uC t uR e EVErYTHiNG iS A TEMpLATe FIlE @moRtenDk #drUpaltWIG

125 TemPlaTes WE nUKEd THe THeME fUNCtIONs* TURnED iT AlL INTo A mETRiC FUCkTON OF tEMPlATEs @moRtenDk #drUpaltWIG

@moRtenDk #drUpaltWIG

gRouPs do we really need this here ? @moRtenDk #drUpaltWIG

tEmpLatE gRouPs LAYoUT CONtEnT FORm BLOcK USEr CONtENT-EDIt VIEwS MISc FIElD NAViGATiON DATaSeT @moRtenDk #drUpaltWIG

hTml CSS + Js HEAdER HTMl.HTmL.TwIG @moRtenDk #drUpaltWIG

pAge PAGe.HTmL.TwIG HTMl.HTmL.TwIG @moRtenDk #drUpaltWIG

rEgiOn's REGiON.hTML.TWIg REGiON.hTML.TWIg PAGe.HTmL.TwIG HTMl.HTmL.TwIG REGiON.hTML.TWIg @moRtenDk #drUpaltWIG

cOntEnt BLOcK.HtML.tWiG VIEw.HTmL.TwIG NODe.HTmL.TwIG HTMl.HTmL.TwIG REGiON.hTML.TWIg @moRtenDk #drUpaltWIG

nOde NODe.HTmL.TwIG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD-—IMAgE.HtML.tWiG @moRtenDk #drUpaltWIG

aLl The fiElds FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG WE’RE gONNa TAlK AbOUT FIElDS lATEr FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG @moRtenDk #drUpaltWIG

lA y oU t THE MAGiC Of WItHOUt @moRtenDk #drUpaltWIG

wIthOut fuNctIon PIPe VaR {{ content|without(‘field’) }} NAMe TWIg FUnCTIoN @moRtenDk #drUpaltWIG

NODe.HTmL.TwIG @moRtenDk #drUpaltWIG

wIthOut imaGe conTeNt tagS @moRtenDk #drUpaltWIG

{{ content }} {{ coNtenT }} {{ imAge }} {{ teXt }} {{ taGs }} @moRtenDk #drUpaltWIG

{{ content|without(‘image’) }} {{ imAge }} {{ coNtenT | WithOut(*) }} {{ teXt }} {{ taGs }} {{ content.image }} @moRtenDk #drUpaltWIG

{{ content|without(‘image’,‘tags’) }} {{ imAge }} {{ coNtenT | WithOut(**) }} {{ taGs }} {{ teXt }} {{ content.tags }} {{ content.image }} @moRtenDk #drUpaltWIG

{{ content|without(‘image’,‘tags’) }} {{ imAge }} {{ coNtenT | WithOut(**) }} {{ taGs }} {{ teXt }} {{ neW }} NEW FIElD {{ content.tags }} {{ content.image }} @moRtenDk #drUpaltWIG

nOde.htMl.Twig CONtEnT @moRtenDk #drUpaltWIG

CONtENT.FIElD_ImAgE @moRtenDk #drUpaltWIG

CONtENT.FIElD_TaGS @moRtenDk #drUpaltWIG

fI e l d THE HEArT Of DRuPaL @moRtenDk #drUpaltWIG

HOW MANy <DiV>S DOEs IT TAKe TO MAKe A “SINgLE fIELd WItH OnE VaLuE” NO lABEl? @moRtenDk #drUpaltWIG

@moRtenDk #drUpaltWIG

Yo! @moRtenDk #drUpaltWIG

<div class=“field 
 field-name-field-single 
 field-type-text 
 field-label-hidden”> <div class=“field-items”> 7 <div class=“field-item even”> Yo! </div> </div> </div> @moRtenDk #drUpaltWIG

<div class=“field 
 field--name-field-single 
 field--type-string 
 field--label-hidden field__items”> Yo! CLAsSY </div> @moRtenDk #drUpaltWIG

Yo! <div> </div> @moRtenDk #drUpaltWIG

ONE DIV ZERo CLaSSEs 100% DrUPAl Yo! <div> </div> @moRtenDk #drUpaltWIG

ONE DIV ZERo CLaSSEs 100% DrUPAl Yo! <div class=“yolo”> </div> @moRtenDk #drUpaltWIG

dUde grEat sIngLe WHAt DO I UsE A nAked <DIv> @moRtenDk #drUpaltWIG