Tesla CMS Helpdesk

Foto’s beheren voor 1 pagina maar toch vasthouden aan een voor gedefineerde layout. Het is mogelijk binnen Tesla. Laten we hieronder eens kijken hoe dit bereikt kan worden. Laten we als voorbeeld de volgende html code gebruiken.

<div class=”pictures”>
	<ul>
		<li>
			<img src=”/media/img1.jpg” alt=”Image 1” />
			<span class=”description”>Description image 1</span>
		</li>
		<li>
			<img src=”/media/img2.jpg” alt=”Image 2” />
			<span class=”description”>Description image 2</span>
		</li>
		<li>
			<img src=”/media/img3.jpg” alt=”Image 3” />
			<span class=”description”>Description image 3</span>
		</li>
	</ul>
</div>

We gaan nu eerst instellen dat het mogelijk is voor gebruikers om de image zelf te configureren.

Hiervoor loggen we met het superadmin account in op de backend. Vervolgens navigeren we naar de pagina’s waar we de foto’s in gaan implementeren.

Bij de sectie van stap: 0 plaatsen we achter “max media” het aantal in dat maximaal aan foto’s mag worden toegevoegd. In ons voorbeeld is dat 3.

We slaan nu de pagina op.

Vanaf nu is het mogelijk om de foto’s op de pagina te beheren. We moeten ze echter ook nog implementeren op de pagina zelf.

We navigeren dan ook naar de volgende map /root/public/templates/onze_template/content/

We openen in deze het bestand index.tpl

En vervangen de herhalende html code met de volgende code {media=image.tpl}. 

Laten we deze code eens van dichterbij bekijken.

                {                              Geeft aan dat het gaat om het begin van een template code

                Media                  Geeft aan dat het gaat om media

                =                             Geeft aan dat we meerdere elementen terug verwachten

                Image.tpl            Is de naam van de file waarin we de data verder in zullen specificieren

                }                              Geeft aan dat het gaat om het einde van de template code.

Onze html code zal er nu als volgt uit moeten zien.

<div class=”pictures”>
	 <ul>
		 {media=image.tpl}
	 </ul>
 </div>

We slaan nu index.tpl op.

Uiteraard moeten we de details nog verder uit specificieren en dus navigeren we naar de volgende map. /root/public/templates/onze_template/components/media

Hierin maken we het bestand image.tpl aan.

Vervolgens openen we image.tpl We hebben beschikking over de volgende tags

                {$file}                   De bestandsnaam van het bestand

                {$title}                  De titel van de foto

                {$content}          De beschrijving die is meegegeven

                {$link}                   De link die eventueel is meegegeven

Onze code zal er dan ook als volgt eruit zien.

<li>
	<img src=”/media/{$file}” alt=”{$title}” />
	<span class=”description”>{$content}</span>
</li>

We slaan nu het bestand image.tpl op.

Gefeliciteerd je hebt afbeeldingen beheer nu geconfigureerd.