1

I want to render responsive images with Typo3 7.6.2 LTS and fluid_styled content like this:

<picture>
 <source srcset="path_to_small" media="(min-width: 768px) AND (max-width: 991px)">
 <source srcset="path_to_big" media="(min-width: 1200px)">
 <source srcset="path_to_middle" media="(min-width: 992px) AND (max-width: 1199px)">
 <img src="path_to_picture">
</picture>

With Typo3 6.2 LTS I've used css_styled_content and I added following Typoscript for this:

tt_content.image.20.1.sourceCollection {
 large.mediaQuery = (min-width: 1200px)

 middle.maxW = 1200px
 middle.mediaQuery = (min-width: 992px) AND (max-width: 1199px)

 small.maxW = 992px
 small.mediaQuery = (min-width: 768px) AND (max-width: 991px)
}

But this not working with the latest Typo3 version.

I want to edit the fluid_styled_content templates and used the viewhelper but there are no responsive images yet.

There are another possibility to solve this problem (without extra extension)?

GoatMachine
  • 127
  • 1
  • 13

2 Answers2

1

Basically all you have to do, is to create a lib object and assign the sourceCollection to it. Then you will be able to call it in your Fluid Template.

setup.ts

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 = {$styles.content.imgtext.layoutKey}
}

FluidTemplate.html

<f:cObject typoscriptObjectPath="lib.responsiveImage" data="{image.uid}"></f:cObject>


This might also help you:

How to implement the sourceCollection Responsive Image Rendering in typo3?

How to render responsive images in fluid templates (dce example) Raw

Community
  • 1
  • 1
Alexander Belokon
  • 1,452
  • 2
  • 17
  • 37
-1

in fluid_styled_content there is no standalone image-element anymore only the textmedia-element which is "text", "text with image" and "image".

deelde
  • 1,540
  • 13
  • 23
  • 1
    I know. I want to edit "MediaGallery.html". There are no possibility to create responsive images with with the latest Typo3 version? – GoatMachine Jan 12 '16 at 00:16
  • 1
    as far as i know: not yet.The only way i've found is this extension https://github.com/alexanderschnitzler/fluid-styled-responsive-images. – deelde Jan 12 '16 at 13:01