rtgx

Fluid: f:image, f:uri.image

Základné použitie

Nastavenie rozmerov (orezanie - crop - na 200 px), priradenie CSS triedy a popisov (alt, title).

<f:image
src="uploads/tx_extension/{item.image}"
width="200c"
height="200c"
class="lazyOwl"
alt="{item.title}"
title="{item.title}"
/>
<img data-src="{f:uri.image(src: 'uploads/tx_extension/{item.image}' width: '200c', height: '200c')}" class="lazyOwl" alt="{item.title}" title="{item.title}">

Atribút additionalAttributes

Do tagu img pridá atribút data-src-large, ktorý bude obsahovať cestu k obrázku vo väčšom rozlíšení (používa sa napr. pre LightBox).

 

<f:image
src="uploads/tx_extension/{item.image}"
maxWidth="120"
maxHeight="120"
alt="{item.title}"
class="img-responsive"
additionalAttributes="{data-src-large: '{f:uri.image(src: \'uploads/tx_extension/{item.image}\' maxWidth: \'380\', maxHeight: \'380\')}'}"
/>

Atribút treatIdAsReference

Načítanie cesty obrázku z FAL (File Abstraction Layer), Typo3 6.2 >.

<section
class="slide"
data-img-mobile="{f:uri.image(src: '{item.imageMobile.uid}', treatIdAsReference: '1')}"
data-img-desktop="{f:uri.image(src: '{item.imageDesktop.uid}', treatIdAsReference: '1')}"
>

Zoznam obrázkov z FAL pre LightBox

Na každom tagu img je navyše odkaz ukazujúci na obrázok vo vyššom rozlíšení.
Zaujímavé je aj nastavenie alt/title: ak obrázok nemá vlastný title, nastaví sa z rodičovského záznamu (item.title).

<f:for each="{item.images}" as="image" iteration="imageIterator">
<a href="{f:uri.image(image: '{image}', maxWidth: '900', maxHeight: '700', treatIdAsReference: '1')}">
<f:image
image="{image}"
alt="{f:if(condition: '{image.originalResource.title}', then: '{image.originalResource.title}', else: '{item.title}')}"
title="{f:if(condition: '{image.originalResource.title}', then: '{image.originalResource.title}', else: '{item.title}')}"
width="300m"
height="300m"
treatIdAsReference="TRUE"
class="img-responsive thumbnail"
/>
</a>
</f:for>

Generátor typoscriptu

Vytvára typoscript pre bežné použitie. Generátor je jednoduchý na obsluhu, stačí vyplniť zopár položiek formulára.

Odkazy