Mere tidssvarende bred skabelon

Fra Molrikwiki

Skift til: Navigation, Søgning

Nedenstående kode er min (Anders') løsning på at lave en bred skabelon, uden at skulle lave seperate filer eller skabeloner. Det eneste denne løsning ikke kan, er at fjerne højrekolonnen fra TemplaVoilás oversigt i sidemodulet, når man har valgt den brede skabelon. Men den kan til gengæld skalere billeder i indholdet, hvilket er smart.

[redigér] Eksempel-HTML

 <div id="mainContent" class="">
 	<div id="leftColumn">
 		Dette er venstre kolonne
 	</div>
 	<div id="rightColumn">
 		Dette er højre kolonne
 	</div>
 </div>

[redigér] Definition i DS

Tilføj disse to felter i DS'en for din skabelon:

<field_iswide type="array">
	<type>no_map</type>
	<tx_templavoila type="array">
		<title>Bred skabelon</title>
		<sample_data type="array">
			<numIndex index="0"></numIndex>
		</sample_data>
		<eType>check</eType>
		<TypoScript></TypoScript>
		<preview></preview>
	</tx_templavoila>
	<TCEforms type="array">
		<label>Bred skabelon</label>
		<config type="array">
			<type>check</type>
			<default type="integer">0</default>
		</config>
	</TCEforms>
</field_iswide>
<field_wideclass type="array">
	<type>attr</type>
	<tx_templavoila type="array">
		<title>Bred skabelon</title>
		<sample_data type="array">
			<numIndex index="0"></numIndex>
		</sample_data>
		<eType>none</eType>
		<TypoScript>
			10 = TEXT
			10.value = wideLeft
			10.if.isTrue.field = field_iswide
		</TypoScript>
		<preview></preview>
		<proc type="array">
			<int>0</int>
			<HSC>0</HSC>
			<stdWrap></stdWrap>
		</proc>
	</tx_templavoila>
</field_wideclass>

Ovenstående XML-kode gør følgende:

  1. opretter et felt (der ikke skal mappes) ved navn field_iswide. Det sørger for, at der er en checkbox under sidens egenskaber med titlen "Bred skabelon".
  2. opretter et felt, der skal mappes til "class"-attributten på et element i din HTML. I ovenstående eksempel skal det mappes til div#mainContent.

Det "indbyggede" typoscript sørger dernæst for, at hvis der er kryds i checkboxen fra "field_iswide", så får div#maincontent sat sin class-property til "wideLeft". Resten kan du klare med simpel CSS.

Og hvorfor gør det med to felter? Med ovenstående løsning vil slutbrugeren blot se følgende i sin skabelon-oversigt: "Bred skabelon: 1", i stedet for obskure klassenavne og lignende.

[redigér] Automatisk skalering af billeder i kolonnerne

  1. Sæt config.maxImageWidth til den maksimale billedbredde din side kan håndtere (med andre ord: den maksimale billedbredde hvis man vælger den brede skabelon). Det skal du gøre alligevel, så det er jo nemt. :-)
  2. Redigér DS for den skabelon du lavede bred-skabelon-tricket i, og find frem til dine indholds-kolonner.
  3. Redigér TS-koden for den kolonne der kan blive bred (sædvanligvis den venstre), og indsæt følgende:
5 = LOAD_REGISTER
5.maxImageWidth = 430
5.maxImageWidth.if {
  isTrue.field = field_iswide
  negate = 1
}
10 = RECORDS
[...]
15 = RESTORE_REGISTER

Ovenstående kode sørger for, at den maksimale bredde for et billede i kolonnen er 430px. MEN - hvis field_iswide er sat, så bliver ændringen slået fra, hvorved billedstørrelsen falder tilbage til config.maxImageWidth.

Personlige værktøjer