Image Resources
Reading image and folder resources in your templates — paths, dimensions, alt text, and hook-resized variants
Last updated
Was this helpful?
Was this helpful?
@if(hasPhotos)
<div class="grid grid-cols-3 gap-4">
@each(photo in gallery.resources)
<figure>
<img src="{{photo.image}}" alt="{{photo.alt}}" />
<figcaption>{{photo.caption}}</figcaption>
</figure>
@endeach
</div>
@endif// hooks.js
exports.transformHook = (rw) => {
const { gallery } = rw.props;
rw.setProps({
hasPhotos: gallery?.resources?.length > 0,
});
};// hooks.js
exports.transformHook = (rw) => {
const { photo } = rw.props;
const hasPhoto = Boolean(photo && photo.image);
rw.setProps({
hasPhoto,
thumbnail: hasPhoto ? rw.resizeResource(photo, 800) : null,
fullsize: hasPhoto ? photo.image : null,
});
};@if(hasPhoto)
<a href="{{fullsize}}"><img src="{{thumbnail}}" alt="{{photo.alt}}" /></a>
@endif<!-- com.realmacsoftware.image/templates/index.html -->
@each(source in lightImage.sources)
<source
media="{{source.media}}"
srcset="{{source.srcset}}"
@if(source.width)
width="{{source.width}}"
height="{{source.height}}"
@endif
/>
@endeach