Fixes #48 - Better handling of background images

[mabolek]

No description provided.

[MattiasNilsson]

This looks good to me, just some smaller nitpicks! 👍

[MattiasNilsson]

Remove commented code.

[pixelmatseriks]

It is a great feature to be able to have different images for different devices, but this commit will affect all GridElement CE:s (f.ex. Parallax), not just the advanced grid. We need to have a way to enable it per CE. Maybe there is a way to implement it using the new "cropVariant"?

[mabolek]

@pixelmatseriks cropVariant support would probably be good in any case (I haven't looked too closely at it yet), but regarding the feature affecting other grid element CEs: Wouldn't it be good to have responsive images for parallax as well? Have I missed your point? 🙂

[pixelmatseriks]

@mabolek Not all of the gridelements CE:s uses the image as a background image.

[mabolek]

@pixelmatseriks Hmm... In that case, the current implementation has the same problem. All GridElements have a style="background-image: url('{f:uri.image(src: '{files.0.uid}', treatIdAsReference: 1)}')" if there's a file referenced in the content element. Only difference is that this pull request compresses the file so it's no larger than necessary.

[pixelmatseriks]

@mabolek hmm, you are right. The Default layout always include a background-image if there's a file referenced in the content element, but the Empty layout doesn't. There is a condition in Collapsible, SimpleAccordion and Tab to use Default or Empty, but all of the other templates uses Default. The Parallax also includes file.0 if present in the template itself, but maybe it is a "fallback".

[mabolek]

@pixelmatseriks I suggest we use the current implementation and open separate feature requests for 1) implementing cropVariant and 2) improving the way layouts work, so files are only included in CEs that need them.

[dmh]

#211