Responsive Design : Solution for Background-Image with Image selection in Backend

Using Neos & Flow
1

Hi,
I’m looking for a solution to publish background-Images in different resolution/cropping for different media-types.

Maybe there is some Solution Out of the box.
Otherwise, did someone know how I could create Head Meta-data from type [style]

<head>
...
...

<style> 
.hero_1{ background: url('http://onepage.neos/_Resources/Persistent/480928c102f7f572120e611778e3b67f621a5561/pb_bg_small-579x386.jpg') no-repeat center center;
                    background-size: cover; }
                @media screen and (min-width: 40em) {
                    .hero_1 {background: url('http://onepage.neos/_Resources/Persistent/f7ebb0e9fd835337093f52b16873dff468bf42d1/pb_bg_medium-1084x713.jpg')}
                }
                @media screen and (min-width: 64em) {
                    .hero_1 {background: url('http://onepage.neos/_Resources/Persistent/a219e8d460b76eedfc2e88c87b91b2da5185da0e/pb_bg_large-1597x1064.jpg')}
                }
.hero_2{  same solution with mediaqueries but different image-path } 
.hero_3{  same solution with mediaqueries but different image-path }}
</style>
<head>

###My own targeted solution:
I would like to catch all images from type hero, from current page, put them into template with help from typoscript and concat it for delivering in html-meta area.
In Backend I defined 3 Image-Selection withNodeTypes. One for each mediaquery-width.
So the images are selectable/changeable with editor but also specific delivered for each media-width. (not possible with static css)

Maybe there is an existing solution?

Or could someone help me with typoscript?
–> catch the path’s from multiple hero-elements from one page-node
– wrap this with css through template-rendering (I should be able to create this part myself, with the already learned stuff)
–> concate all resulting css from each template-rendering
–> put them in the matching section like <f:section name="bgImageDef"></f:section>in the html-template default.html

All the other css-staff layed in other section before, called “stylesheets”.

2

Hey Martin,

You could do that, but I would advise to take a different approach instead in case you haven’t thought of it. Instead of needing to loop over the hero elements and creating CSS output for a <style> tag, you could use the new standard for responsive images using srcset and sizes on an image tag. For browser that doesn’t support it, you can provide a polyfill or use the default fallback behavior.

1 Like
3

Hi aertmann,
an already usable solution with srcset for Neos would have been my next question (maybe with different crop-ratio or a specific focus-point :smirk: (So many unknown thinkgs in Neos Universe. Most of the time Google is still on mute.)

I thought, only in web-kit srcset is usable for background-image (http://stackoverflow.com/questions/26801745/is-there-a-srcset-equivalent-for-css-background-image), but a functional for srcset in css attribute background-image for usual web-browsers would be great!

It is important to have “size: cover” functionality for easy “auto-strech” also in height, without distortions in ratio. Also the position-x and -y I have to controll: for parallax-effect.
My experiments with normal images and srcset and/or srcset in background-image attribute were not functional without Javascript polyfills. Would be very happy to get a html-css solution for this from you!

4

Good morning Martin,

I use for a custom nodetype the following template to get responsive background-images only with html and css (and fusion):

{namespace media=TYPO3\Media\ViewHelpers}
<f:if condition="{topImage}">
	<div class="topimage"></div>
	<style>			
			@media only screen and (min-width: 77rem) {
				.topimage {
					background-image: url('{media:uri.image(image: topImage, maximumWidth: 1920)}');
					height: 30vw;
				}		
			}
            @media only screen and (max-width: 48rem) {
			    .topimage {
				    background-image: url('{media:uri.image(image: topImage, maximumWidth: 658)}');
				    height: 50vw;
			}		
		}
		    @media only screen and (max-width: 24rem) {
				.topimage {
					background-image: url('{media:uri.image(image: topImage, maximumWidth: 280)}');
					height: 50vw;	
				}	
			}	
	</style>			
</f:if>

So as result I get responsive background-images. I don’t have to define 3 Image-Selections - fusion scales the image. Maybe this helps.

5

Thanks,
easier for editor, but the downscale-result is fare away from manuell optimized images in file-size, brilliance and also in alternative cutting.
I did this «automtic-image downscale» as alternative, if one of the particular definable Images is not set.