DCE mit FAL / Source Collection und respond Image mit picturefill

gistfile1.ts

Beispiel für ein CE Element : Referenzen

Anlegen von drei Feldern (Kunde, Bild und Link auf Homepage)
1. Kunde / Variable: titel
<config>
	<type>input</type>
	<size>30</size>
	<eval>trim,required</eval>
</config>

2. Bild
<config>
	<type>inline</type>
	<foreign_table>sys_file_reference</foreign_table>
	<foreign_field>uid_foreign</foreign_field>
	<foreign_sortby>sorting_foreign</foreign_sortby>
	<foreign_table_field>tablenames</foreign_table_field>
	<foreign_match_fields>
		<fieldname>image</fieldname> <!-- Name of variable! -->
	</foreign_match_fields>
	<foreign_label>uid_local</foreign_label>
	<foreign_selector>uid_local</foreign_selector>
	<foreign_selector_fieldTcaOverride>
		<config>
			<appearance>
				<elementBrowserType>file</elementBrowserType>
				<elementBrowserAllowed>gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai</elementBrowserAllowed>
			</appearance>
		</config>
	</foreign_selector_fieldTcaOverride>

	<minitems>1</minitems>
	<maxitems>1</maxitems>

	<appearance>
		<useSortable>1</useSortable>
		<headerThumbnail>
			<field>uid_local</field>
			<width>45c</width>
			<height>45</height>
		</headerThumbnail>

		<showPossibleLocalizationRecords>0</showPossibleLocalizationRecords>
		<showRemovedLocalizationRecords>0</showRemovedLocalizationRecords>
		<showSynchronizationLink>0</showSynchronizationLink>
		<useSortable>1</useSortable>
		<enabledControls>
			<info>1</info>
			<new>0</new>
			<dragdrop>0</dragdrop>
			<sort>1</sort>
			<hide>1</hide>
			<delete>1</delete>
			<localize>1</localize>
		</enabledControls>

		<createNewRelationLinkTitle>LLL:EXT:cms/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
	</appearance>

	<behaviour>
		<localizationMode>select</localizationMode>
		<localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
	</behaviour>
</config>

3. Link

<config>
	<type>input</type>
	<size>30</size>
	<eval>trim</eval>
	<softref>typolink,typolink_tag,images,url</softref>
	<wizards>
		<_PADDING>2</_PADDING>
		<link>
			<type>popup</type>
			<title>Link</title>
			<icon>link_popup.gif</icon>
			<script>browse_links.php?mode=wizard</script>
			<params>
				<!--<blindLinkOptions>page,file,folder,url,spec</blindLinkOptions>-->
			</params>
			<JSopenParams>height=500,width=500,status=0,menubar=0,scrollbars=1</JSopenParams>
		</link>
	</wizards>
</config>

----------------------------------------------------------------------------------------------------------------------------------------

Das Template:

{namespace dce=Tx_Dce_ViewHelpers}
<f:layout name="Default" />

<f:section name="main">
	<div class=" col-sm-6 col-md-6 col-lg-3 ">
	<div class="refbox">
	<h4>{field.titel}</h4>
  <f:for each="{dce:fal(field:'image', contentObject:contentObject)}" as="image">
    <a href="{f:uri.image(src:image.uid,treatIdAsReference:1)}" class="t3colorbox" data-rel="{image.uid}"> 
	  <f:cObject typoscriptObjectPath="lib.responsiveImage" data="{image.uid}"></f:cObject></a>
  </f:for>

	<a href="{dce:typolinkUrl(parameter:'{field.link}')}" target="_blank" class="ani-button yellow"><div class="light"></div>zur Webseite..</a>
  </div>
  </div>
</f:section>

--------------------------------------------------------------------------------------------------------------------------------------
  Integration von Picturefill + Jquery in TYPO3
  
  Download unter:
  https://github.com/scottjehl/picturefill
  
  page {
  includeJS {
  file1  = {$filepaths.scripts}jquery.js
  file1 = {$filepaths.scripts}picturefill.js

    
  }
 }

# Einbau über die globale Konfiguration
lib.responsiveImage = IMAGE
lib.responsiveImage {
  file {
    import.current = 1
    treatIdAsReference = 1
  }
  sourceCollection < tt_content.image.20.1.sourceCollection
  layout < tt_content.image.20.1.layout
  layoutKey = picturefill
}

#Ggf. Einbau mit abweichenden Breakpoints z.B. für ein Headerpic etc. 

lib.responsiveImage {
  file {
    import.current = 1
    treatIdAsReference = 1
  }
  sourceCollection < tt_content.image.20.1.sourceCollection
  layout {
      default {
        element = <img src="###SRC###" width="###WIDTH###" height="###HEIGHT###"###PARAMS######ALTPARAMS######BORDER######SELFCLOSINGTAGSLASH###>
      }
      srcset {
        element = <img src="###SRC###" srcset="###SOURCECOLLECTION###"###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###>
        source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
      }
      picturefill {
   element (
      <picture class="first-match responsive">
     <!--[if IE 9]><video style="display: none;"><![endif]-->
      ###SOURCECOLLECTION###
      
      <!--[if IE 9]></video><![endif]-->
      <img class="picturefilltext responsive" src="###SRC###" ###ALTPARAMS### ###SELFCLOSINGTAGSLASH### />
   
      </picture>
   )
   source = <source srcset="###SRC###" media="###MEDIAQUERY###" ###ALTPARAMS###>
}
      data {
        element = <img src="###SRC###"###SOURCECOLLECTION######PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH### />
        source = data-###DATAKEY###="###SRC###"
        source.noTrimWrap = ; ;;
        source.noTrimWrap.splitChar = ;
      }
    }
  
     sourceCollection {
      small {
        width = 420
        srcsetCandidate = 600w
        mediaQuery = (max-device-width: 600px)
        dataKey = small
      }
      smallRetina {
        if {
          value = {$styles.content.imgtext.layoutKey}
          equals = default
          negate = 1
        }
        width = 600
        pixelDensity = 2
        srcsetCandidate = 600w 2x
        mediaQuery = (max-device-width: 600px) AND (min-resolution: 192dpi)
        dataKey = smallRetina
      }
}
layoutKey = picturefill
}