Skip to content

Instantly share code, notes, and snippets.

@renekreupl
Created January 28, 2019 22:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save renekreupl/34bb2e41598edbd61df26f75eee1672a to your computer and use it in GitHub Desktop.
Save renekreupl/34bb2e41598edbd61df26f75eee1672a to your computer and use it in GitHub Desktop.
Fluid Page List with Image
lib.contentElement {
templateRootPaths {
30 = EXT:phoenix_distribution/Resources/Private/Extensions/fluid/Templates
}
partialRootPaths {
30 = EXT:phoenix_distribution/Resources/Private/Extensions/fluid/Partials
}
}
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Main">
<section class="c-listing">
<div class="c-listing__filter">
<div class="c-listing__view">
<div class="c-listing__view-icon c-listing__view-icon--active" id="js__listing-grid">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Grid</title><g id="Ebene_2" data-name="Ebene 2"><g id="grid"><path d="M0,0H6V6H0ZM9,0h6V6H9Zm9,0h6V6H18ZM0,9H6v6H0ZM9,9h6v6H9Zm9,0h6v6H18ZM0,18H6v6H0Zm9,0h6v6H9Zm9,0h6v6H18Z"/></g></g></svg>
</div>
<div class="c-listing__view-icon" id="js__listing-list">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21"><title>Element 1</title><g id="Ebene_2" data-name="Ebene 2"><g id="Layer_1" data-name="Layer 1"><path d="M24,14.5a.5.5,0,0,1-.5.5H5.5a.5.5,0,0,1-.5-.5v-2a.5.5,0,0,1,.5-.5h18a.5.5,0,0,1,.5.5Zm-21-2a.5.5,0,0,0-.5-.5H.5a.5.5,0,0,0-.5.5v2a.5.5,0,0,0,.5.5h2a.5.5,0,0,0,.5-.5Zm21,6a.5.5,0,0,0-.5-.5H5.5a.5.5,0,0,0-.5.5v2a.5.5,0,0,0,.5.5h18a.5.5,0,0,0,.5-.5Zm-21,0a.5.5,0,0,0-.5-.5H.5a.5.5,0,0,0-.5.5v2a.5.5,0,0,0,.5.5h2a.5.5,0,0,0,.5-.5Zm21-12a.5.5,0,0,0-.5-.5H5.5a.5.5,0,0,0-.5.5v2a.5.5,0,0,0,.5.5h18a.5.5,0,0,0,.5-.5ZM3,6.5A.5.5,0,0,0,2.5,6H.5a.5.5,0,0,0-.5.5v2A.5.5,0,0,0,.5,9h2A.5.5,0,0,0,3,8.5Zm21-6a.5.5,0,0,0-.5-.5H5.5A.5.5,0,0,0,5,.5v2a.5.5,0,0,0,.5.5h18a.5.5,0,0,0,.5-.5ZM3,.5A.5.5,0,0,0,2.5,0H.5A.5.5,0,0,0,0,.5v2A.5.5,0,0,0,.5,3h2A.5.5,0,0,0,3,2.5Z"/></g></g></svg>
</div>
</div>
</div>
<f:if condition="{menu}">
<div class="c-listing__wrap c-listing__wrap--grid">
<f:for each="{menu}" as="page" iteration="iterator">
<article class="c-listing__item">
<a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}">
<div class="c-listing__item-image">
<f:if condition="{page.files}">
<f:for each="{page.files}" as="file">
<f:image image="{file}" alt="{file.alternative}" title="{file.title}" class="lazyload" />
</f:for>
</f:if>
</div>
<div class="c-listing__item-title">
<h3>{page.title}</h3>
<span class="c-listing__item-subtitle">{page.data.subtitle}</span>
<span class="c-listing__item-text">{page.data.abstract}</span>
</div>
</a>
</article>
</f:for>
</div>
</f:if>
</section>
</f:section>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment