search

sitegeist / sms-responsive-images

This TYPO3 extension provides ViewHelpers and configuration to render valid responsive images based on TYPO3's image cropping tool.
GNU General Public License v2.0
34 stars 18 forks source link

responsive background images #25

Closed DanielRuf closed 6 years ago

DanielRuf commented 6 years ago

So far it seems there is no f:uri.image replacement.

Might be useful to also provide a VH to generate responsive background images with the needed breakpoint CSS.

s2b commented 6 years ago

What would you expect this ViewHelper to return? Can you give an example?

DanielRuf commented 6 years ago

It should at least generate the src/url paths which point to the generated images based on the input (breakpoint / cropVariant).

Generating the CSS markup based on this as additional VH is a nice to have.

s2b commented 6 years ago

Have you tried using the f:uri.image viewhelper? I don't think that there needs to be any "intelligence" if the viewhelper just returns a url to a cropped image.

https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Uri/Image.html

DanielRuf commented 6 years ago

Have you tried using the f:uri.image viewhelper? I don't think that there needs to be any "intelligence" if the viewhelper just returns a url to a cropped image.

We do not use this. We use the image object + the cropVariants as picture tag with multiple sources. In all cases. Not a normal img tag.

s2b commented 6 years ago

So you really need a viewhelper which generates a <source /> tag?

DanielRuf commented 6 years ago

Sure. That's how responsive images and art direction is properly done in modern frontend development.

s2b commented 6 years ago

To clarify: You need a viewhelper that generates just a <source /> tag to achieve "real" art direction as mentioned in #13?

I really don't think it makes sense to add a f:uri.image alternative. Also, I don't think that it's a good idea to generate CSS with Fluid. However, I understand the need to specify multiple source images. This could be solved with sms:picture.source or something alike.

DanielRuf commented 6 years ago

We solved this now by replacing the background image with a generated picture tag with different sources, some CSS (position: absolute, object-fit and so on) and the right markup. Even better for a11y as these support alt and title attributes.

So I think we can close this issue.