@picture(path)

Renders a <picture> element for an image in the media library, with a smaller source for each breakpoint narrower than the image. Breakpoints come from image_breakpoints in config/textstemapp.php (400, 800 and 1600 by default).

For example, if assets/foo.jpg is 1000px wide, @picture('assets/foo.jpg') produces:

<picture>
    <source srcset="/img/400/assets/foo.jpg" media="(max-width: 400px)" />
    <source srcset="/img/800/assets/foo.jpg" media="(max-width: 800px)" />
    <img src="/storage/assets/foo.jpg" alt="Just a foo" title="Very foo" />
</picture>

The alt and title come from the asset's description and title. If no asset is found for the path, nothing is output.

@picture is short for Textstem::picture($path). Call the facade directly to add attributes:

{!! Textstem::picture('assets/foo.jpg', new \Illuminate\View\ComponentAttributeBag(['class' => 'rounded', 'alt' => 'A foo'])) !!}

id, class, alt and title are used.

esc