S
stookyDec 16, 2022
hi semicolon
I would like to add an overlay to the cards images with link and lightbox
but when I use normal code samples from the canvas-demo, the overlay always spans to the whole card
even if I wram the image and overlay
can you please help?
this is a partial from my typo3-cms extension where I integrated the code
it renders ONE SINGLE CARD
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
data-namespace-typo3-fluid="true">
<!--
=====================
Partials/List/Product-4col.html
-->
<div class="col-lg-4 col-md-6 mb-5 d-flex align-items-stretch">
<div class="articletype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}" itemscope="itemscope" itemtype="http://schema.org/Article">
<n:excludeDisplayedNews newsItem="{newsItem}"/>
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="card h-100">
<f:if condition="{newsItem.mediaPreviews}">
<!-- media preview element -->
<f:then>
<div class="news-img-wrap">
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<f:alias map="{mediaElement: newsItem.mediaPreviews.0}">
<f:if condition="{mediaElement.originalResource.type} == 2">
<f:image class="card-img-top img-fluid" image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" loading="{settings.list.media.image.lazyLoading}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
</f:if>
<f:if condition="{mediaElement.originalResource.type} == 4">
<f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}"/>
</f:if>
<f:if condition="{mediaElement.originalResource.type} == 5">
<f:image class="card-img-top img-fluid" image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" loading="{settings.list.media.image.lazyLoading}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
</f:if>
</f:alias>
</n:link>
</div>
</f:then>
<f:else>
<f:if condition="{settings.displayDummyIfNoMedia}">
<div class="news-img-wrap">
<span class="no-media-element">
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<f:image src="{settings.list.media.dummyImage}" title="" alt="" loading="{settings.list.media.image.lazyLoading}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
</n:link>
</span>
</div>
</f:if>
</f:else>
</f:if>
<div class="card-body d-flex flex-column">
<h5 class="card-title fs-4 border-bottom">
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<span itemprop="headline">{newsItem.title}</span>
</n:link>
</h5>
<div class="card-text mb-0">
<n:removeMediaTags>
<f:if condition="{newsItem.teaser}">
<f:then>
<div itemprop="description">{newsItem.teaser -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()}</div>
</f:then>
<f:else>
<div itemprop="description">{newsItem.bodytext -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()}</div>
</f:else>
</f:if>
</n:removeMediaTags>
</div>
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}" class="btn btn-custom button-rounded mt-auto align-self-end">» Details «</n:link>
</div>
</div>
</div>
</div>
</html>