[Frage] Responsive Image Rendering TYPO3-Version: 8.7.19

  • michael_m michael_m
    Typ im Roten Hemd
    0 x
    2 Beiträge
    0 Hilfreiche Beiträge
    30. 08. 2018, 15:04

    Hallo zusammen.
    Ich suche mir schon länger einen Wolf zu diesem Punkt.
    Ich suche nach einer Möglichkeit zum automatisierten Bildererstellen für verschiedene Auflösungen/Ausgabegeräte. Weitgehend so wie im Bootstrap Package von Benjamin Kott.

    Kennt da jemand etwas?

    Danke im Voraus
    Michael


  • 1
  • Teisinger Teisinger
    Jedi-Meister
    0 x
    441 Beiträge
    29 Hilfreiche Beiträge
    30. 08. 2018, 17:53

    Kenn die Ext nicht, aber mit Fluid kannst du sowas doch ganz easy machen.
    Zum Beispiel:

    [code]<picture>
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '1920')}" media="(min-width: 1601px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '1600')}" media="(min-width: 1334px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '1333')}" media="(min-width: 1001px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '1000')}" media="(min-width: 801px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '800')}" media="(min-width: 601px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '600')}" media="(min-width: 401px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '400')}" media="(min-width: 321px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '320')}" media="(min-width: 200px)">
    <img src="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{dimensions.height}', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '{data.imagewidth}')}"
    {f:if(condition: '{data.imagewidth}', then: 'width="{data.imagewidth}"', else: 'width="{dimensions.width}"')}
    {f:if(condition: '{data.imageheight}', then: 'height="{data.imageheight}"', else: 'height="{dimensions.height}"')}
    {f:if(condition: '{file.title}', then: 'title="{file.title}"')}
    {f:if(condition: '{file.alternative}', then: 'alt="{file.alternative}"')} />
    </picture>
    [/code]

    https://github.com/groundstack-org

  • 1