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?

  • Couldn't you use docs.craftcms.com/v3/config/… and set it to true to ensure they exist on page load?
    – Brad Bell
    Commented Feb 24, 2020 at 21:59
  • Thanks @BradBell. Yeah but if they exist on load I would need to load all images on page load (and we're talking about 150 high-res images). Commented Feb 25, 2020 at 15:49
  • Maybe you could consider using the Imager X plugin: plugins.craftcms.com/imager-x, and / or the use of Imgix: imgix.com
    – Romain P.
    Commented Feb 27, 2020 at 15:53
  • @RomainPoirier Thanks for the input. That's what I went for then. Commented Mar 3, 2020 at 17:16


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.