Man kann nicht überholen,

wenn man in andere Fußstapfen tritt!

Input && Text Checkbox && Select Group Miscellaneous File && Images

TYPE:FAL

Mit Hilfe der "File Abstraction Layer" kann eine beliebige Datei aus dem fileadmin ausgewählt und eingebunden werden. 

File Abstraction Layer

Die Standard Konfiguration lautet:

  1. <config>
       <type>file</type>
       <minitems>0</minitems>
       <maxitems>99</maxitems>
  2.  <dce_load_schema>1</dce_load_schema>
       <dce_get_fal_objects>1</dce_get_fal_objects>
    </config>

Mit "File Abstraction Layer" lässt sich eine Datei im Fileadmin auswählen und einbinden.

mit einer Erweiterung der Standard Konfiguration lässt sich die Auswahl auf verschiedene Dateitypen einschränken:

  1. <config>
       <type>file</type>
       <minitems>0</minitems>
       <maxitems>99</maxitems>
       <allowed>gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg</allowed>
  2.  <dce_load_schema>1</dce_load_schema>
       <dce_get_fal_objects>1</dce_get_fal_objects>
    </config>

 

Fluid Template

Standard <f:image> für eine Bildergalerie

  1. <f:for each="{field.myImages}" as="image">
       <f:image image="{image}" alt="{image.alternative}" width="300" height="200" />
    </f:for>
     

Wenn du nur das erste Bild ausgeben möchtest, kannst du diesen One-Liner verwenden:

  1.  <f:image image="{field.myImages.0}" />

Es ist auch eine Variable für die Bild-Description verfügbar:

  1. {image.description}

<f:uri.image> für eine <img>-Schleife (manuelles img-Tag)

  1. <f:for each="{field.myImages}" as="image">
       <img src="<f:uri.image src='{image.uid}' treatIdAsReference='1' />" 
            alt="{image.alternative}" width="300" height="200">
    </f:for>
     

Nutzen, wenn man das <img>-Tag selbst kontrollieren will (z. B. für Klassen oder srcset).

Beispiel: Responsive srcset

  1. <img 
       src="<f:uri.image src='{image.uid}' treatIdAsReference='1' maxWidth='800' />" 
       srcset="
           <f:uri.image src='{image.uid}' treatIdAsReference='1' maxWidth='400' /> 400w,
           <f:uri.image src='{image.uid}' treatIdAsReference='1' maxWidth='800' /> 800w
       " 
       alt="{image.alternative}">
     

 

<f:uri.image> für eine <video>-Schleife mit Vorschaubild (poster)

  1. <f:for each="{field.videos}" as="video" iteration="iteratorvideo">
       <f:for each="{field.posters}" as="poster" iteration="iteratorposter">
           <f:if condition="{iteratorvideo.index} == {iteratorposter.index}">
               <f:then>
                   <video poster="<f:uri.image src='{poster.uid}' treatIdAsReference='1' />" controls>
                       <source src="<f:uri.image src='{video.uid}' treatIdAsReference='1' />" type="video/mp4"/>
                   </video>
               </f:then>
           </f:if>
       </f:for>
    </f:for>
     

<f:image> für eine Lightbox-Galerie

Falls du eine Lightbox (z. B. mit Fancybox oder Featherlight) nutzen möchtest.

  1. <f:for each="{field.myImages}" as="image">
       <a href="<f:uri.image src='{image.uid}' treatIdAsReference='1' />" data-lightbox="gallery">
           <f:image image="{image}" alt="{image.alternative}" width="200" height="150" />
       </a>
    </f:for>
Anrufen
Instagram