Art directed responsive image rendering
# ❓questionsn
Nechalon
03/23/2023, 11:10 AMHello, How are twill image crops applied? I have different crops defined for desktop, tablet and mobile. But I only see desktop displayed in all cases. I display the images with 'desktop' crop key (
$item->image('picture', 'desktop')tabletmobiledesktopn
Nechalon
03/23/2023, 11:32 AMI see, I didnt use picture tags before, how can I display all versions of the pictures with twill-image?
Nechalon
03/23/2023, 11:32 AMNechalon
03/23/2023, 11:33 AMI see that the documentation is here, im not sure what to try from here
i
ifox
03/23/2023, 11:41 AMcheck the
presetifox
03/23/2023, 11:50 AMIf you feel like that's still too much to learn, here's a quick example of how to implement it without the package:
Copy code
<picture>
<source srcset="{{ $item->image('medias_field_name', 'crop_key', ['w' => 200] }} 200w, {{ $item->image('medias_field_name', 'crop_key', ['w' => 400] }} 400w, ...<as many width as you need depending on how large the image is rendering at in your frontend>" sizes="<media query defining when to use this source and a value defining how much of the viewport width this image takes eg. 50vw>">
<as many sources as you have crop keys>
<img tag with a placeholder image and width height attributes or a ratio box to avoid layout shifts>
</picture>ifox
03/23/2023, 11:58 AMn
Nechalon
03/23/2023, 12:43 PM Copy code
<picture class="figures col-12 col-md-{{ App\Helpers\Course::colCount(count($block->images('gallery', 'desktop'))) }} mb-4">
<source media="(max-width: 768px)" srcset="{{ $image['image_url']['mobile'] }}">
<source media="(min-width: 768px) and (max-width: 992px)" srcset="{{ $image['image_url']['tablet'] }}">
<source media="(min-width: 992px)" srcset="{{ $image['image_url']['desktop'] }}">
<img src="{{ $image['image_url']['desktop'] }}" class="img-fluid">
</picture>Nechalon
03/23/2023, 12:43 PMThis did the trick! Thanks @ifox
2 Views