TYPO3 Bilder #FAL Image #SECTION FAL Image #Picture Tag #Background Image #Lightbox Link #fluid

BackgroundImage.html

<div class="spBackgroundImage" style="background: url({f:uri.image(image:field.image.0, treatIdAsReference:1)}) no-repeat center / cover"></div>
		</f:if>

falImage.html

<f:if condition="{field.image}">
    <f:for each="{field.image}" as="fileReference">
        <f:link.typolink parameter="{fileReference.link}">
            <f:image src="{fileReference.uid}" treatIdAsReference="1" alt="{fileReference.alternative}" title="{fileReference.title}" />
        </f:link.typolink>
        <div class="imgdescription">{fileReference.description}</div>
    </f:for>
</f:if>

falImageInline.html

{f:uri.image(src:fileReference.uid, treatIdAsReference:1)}

{f:uri.image(src:imageUid.uid,treatIdAsReference:true, width:1280c, height:800c)}

fromFileFalImage.html

<f:uri.image src="EXT:myext/Resources/Public/typo3_logo.png" />

lightbox.html

<a class="lightbox" data-fancybox="galery{contentObject.uid}" href="<f:uri.image image='{slide}' width='480c' height='385c' treatIdAsReference='false' />">
	<picture>
		  <source srcset="<f:uri.image image='{slide}' width='480c' height='385c' treatIdAsReference='false' />" media="(max-width: 480px)">
		  <source srcset="<f:uri.image image='{slide}' width='768c' height='615c' treatIdAsReference='false' />" media="(min-width: 481px) and (max-width: 768px)">
		  <source srcset="<f:uri.image image='{slide}' width='1024c' height='820c' treatIdAsReference='false' />" media="(min-width: 769px) and (max-width: 1024px)">
		  <source srcset="<f:uri.image image='{slide}' width='1280c' height='851c' treatIdAsReference='false' />" media="(min-width: 1025px) and (max-width: 1280px)">
		  <source srcset="<f:uri.image image='{slide}' width='1920c' height='1289c' treatIdAsReference='false' />" media="(min-width: 1281px)">
		  <f:image image="{slide}" treatIdAsReference="false" alt="{slide.alternative}" title="{slide.title}" width='1920c' height='1289c' />
	 </picture>
</a>

pictureTag.html

<picture>
	  <source srcset="<f:uri.image image='{slide}' width='322c' height='212c' treatIdAsReference='false' />" media="(max-width: 480px)">
	  <source srcset="<f:uri.image image='{slide}' width='375c' height='268c' treatIdAsReference='false' />" media="(min-width: 481px) and (max-width: 768px)">
	  <source srcset="<f:uri.image image='{slide}' width='435c' height='301c' treatIdAsReference='false' />" media="(min-width: 769px) and (max-width: 1024px)">
	  <source srcset="<f:uri.image image='{slide}' width='545c' height='359c' treatIdAsReference='false' />" media="(min-width: 1025px) and (max-width: 1280px)">
	  <source srcset="<f:uri.image image='{slide}' width='545c' height='359c' treatIdAsReference='false' />" media="(min-width: 1281px)">
	  <f:image image="{slide}" treatIdAsReference="false" alt="{slide.alternative}" title="{slide.title}" width='545c' height='359c' />
 </picture>

sectionFal.html

#### SECTION FAL IMAGE  ########
    <f:for each="{field.section}" as="item">
        <f:if condition="{item.images}">
            <f:for each="{item.images}" as="imageUid">
                <a href="{f:uri.image(src:imageUid.uid,treatIdAsReference:true)}" class="magnificpopup">
                    <f:image image="{imageUid}" width="350" />
                </a>
            </f:for>
        </f:if>
    </f:for>
    
    
    config
    
    <config>
	<type>group</type>
	<internal_type>db</internal_type>
	<appearance>
		<elementBrowserType>file</elementBrowserType>
		<elementBrowserAllowed>gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg</elementBrowserAllowed>
	</appearance>
	<allowed>sys_file</allowed>
	<size>5</size>
	<minitems>0</minitems>
	<maxitems>5</maxitems>
	<show_thumbs>1</show_thumbs>

	<dce_load_schema>1</dce_load_schema>
	<dce_get_fal_objects>1</dce_get_fal_objects>
</config>