The picture element
Developer Preview
Hi!
Some weeks ago my wife and I finally launched our studio website.
EECMS 2 failed on image galleries for a lot of time, until the arrive of the grid field. Now, the picture element can make things a little obsolete again.
As I was following the picture element specification closely, we chose to try it. There’s a js polyfill for now and Firefox and Chrome implementations are on the way.
If the images for all devices are the same, the manipulations can do the job, but we really need to be allowed to set different qualities for each one, because retina images can use more compression than the traditional ones.
The things become trickier because we chose to have different images for every media query breaking points.
Our solution was to use a grid field:
- smart_p - image file
- smart_l - image file
- tablet_p - image file
- tablet_l - image file
- desktop - image file
- wide - image file
- caption - text
- alt - text
The suffixes _p and _l show the orientation of the device.
And the template:
{case_gallery}
{if case_gallery:count == 1}<section class="gallery">{/if}
<figure>
<img alt="{case_gallery:alt}"
sizes="
{case_gallery:desktop}(min-width: 1280px) {width}px,{/case_gallery:desktop}
{case_gallery:tablet_l}(min-width: 1024px) {width}px,{/case_gallery:tablet_l}
{case_gallery:tablet_p}(min-width: 768px) {width}px,{/case_gallery:tablet_p}
{case_gallery:smart_l}(min-width: 481px) {width}px,{/case_gallery:smart_l}
{case_gallery:smart_p}(max-width: 480px) {width}px,{/case_gallery:smart_p}
"
srcset="
{case_gallery:wide}{url} {width}w,{/case_gallery:wide}
{case_gallery:desktop}{url} {width}w,{/case_gallery:desktop}
{case_gallery:tablet_l}{url} {width}w,{/case_gallery:tablet_l}
{case_gallery:tablet_p}{url} {width}w,{/case_gallery:tablet_p}
{case_gallery:smart_l}{url} {width}w,{/case_gallery:smart_l}
{case_gallery:smart_p}{url} {width}w,{/case_gallery:smart_p}
">
{if case_gallery:caption}<figcaption>{case_gallery:caption}</figcaption>{/if}
</figure>
{if case_gallery:count == case_gallery:total_rows}</section>{/if}
{/case_gallery}
The images for retina are still missing.
The worst part we found after start to publish content. Sometimes, the images are in fact the same, but we still need to fill them.
Is it possible to give us a tag to look for the next or previous not empty column of a certain type? Something like {grid_field:next_col:type} and {grid_field:next_col:type}.
{case_gallery}
{if case_gallery:count == 1}<section class="gallery">{/if}
<figure>
<img alt="{case_gallery:alt}"
sizes="
{if case_gallery:wide}
{case_gallery:wide}(min-width: 1280px) {width}px,{/case_gallery:wide}
{if:else}
{!-- we need to add an image resizer here --}
{case_gallery:previous_col:file}(min-width: 1280px) {width}px,{/case_gallery:previous_col:file}
{/if}
[...]
"
srcset="
{if case_gallery:wide}
{case_gallery:wide}{url} {width}w,{/case_gallery:wide}
{if:else}
{!-- we need to add an image resizer here --}
{case_gallery:previous_col:file}{url} {width}w,{/case_gallery:previous_col:file}
{/if}
[...]
">
{if case_gallery:caption}<figcaption>{case_gallery:caption}</figcaption>{/if}
</figure>
{if case_gallery:count == case_gallery:total_rows}</section>{/if}
{/case_gallery}
Of course, this isn’t enough. We still need an addon to resize the image, because to create one manipulation that probably will not be used for every image is a waste. I’ve been using Img-Resize, but probably it’s the time for an official one.
I hope these info can help you.
THanks for your attention!
Is it possible to give us a tag to look for the next or previous not empty column of a certain type? Something like
{grid_field:next_col:type}and{grid_field:next_col:type}.
Hmm, I suppose it’s possible, but just calling next_col gives you no idea where you’re at. What about a tag pair that looped over columns of a particular tag? For example:
{grid_field:iterate type="file"}
{grid_field:iterate:contents}
{grid_field:iterate:name}
...
{/grid_field:iterate}
I had to stop to think about this for now, but I’m studying the issue and gonna back on this.
Thanks for your attention, Wes.