I have an overview (i.e. list with around 150 items). Each of those items has an appropriate "teaser image". When a user is hovering a list item the appropriate teaser image fades in, on mouse out it fades out again.

As I didn't want to add all images into the page on load I am doing that effect with JS and loading the image url I've attached to each html list item as data-attribute, e.g.

<a data-image="{{ asset.getUrl() }}">Item Title</a>

// js
link.addEventListener("mouseover", () => {
  image.setAttribute("src", imageUrl)

My problem is that I can't apply an image transform now as the image is not "generated" on page load but on hover only. Is there any way of applying an image transform in such a scenario? (I think I know the answer as the asset is coming from the server via JS and its url and not via rendering on load)

Or would you simply recommend a using a plugin and applying the transform in the CP?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.