search

derhansen / sf_banners

Banner-Management is a banner management extension for TYPO3. It is based of Extbase and Fluid. Banners are loaded asynchronously using JavaScript so the page load time is affected as less as possible.
GNU General Public License v2.0
10 stars 20 forks source link

Center image banner via `margin: 0 auto` #260

Closed ste101 closed 7 months ago

ste101 commented 7 months ago

With this litte patch I was able to center a smaller image within a block

--- ImageBanner.html.orig   2024-03-16 11:06:17.125314100 +0100
+++ ImageBanner.html    2024-03-16 11:07:16.508973200 +0100
@@ -1,11 +1,16 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers"
+     data-namespace-typo3-fluid="true">
+
 <f:if condition="{banner.assets}">
     <f:then>
         <f:for each="{banner.assets}" as="asset">
-            <div class="banner banner-{banner.uid}">
+            <f:variable name="src" value="{f:uri.image(image: asset)}" />
+            <div class="banner banner-{banner.uid} d-block me-auto ms-auto mb-3" style="max-width: {bk2k:data.imageInfo(src: src, property: 'width')}px;">
                 <f:if condition="{asset.originalResource.properties.link}">
                     <f:then>
                         <f:link.action action="click" arguments="{banner: banner}" target="{banner.linkTarget}" pageType="{settings.clickPageTypeNum}" rel="noopener sponsored">
-                            <f:image image="{asset}" />
+                            <f:image class="img-fluid" image="{asset}" />
                         </f:link.action>
                     </f:then>
                     <f:else>
@@ -16,3 +21,5 @@
         </f:for>
     </f:then>
 </f:if>
+
+</html>