TechLifeWeb

Note 2025-01-22T22:35:57.000-08:00


Published by 
Scott Kingery
 on 

Trying to figure out if #11ty can add code to the output. For photos, I want to automatically change 'img src' to 'img class="u-photo" src'. Anyone know if it's possible?

Replies

  • Bob Monsour on 🐘 : @techlifeweb If you're using the image transform, and you're adding the images in markdown, you can use the markdown-it-attrs plugin. There's a post about it: https://www.aleksandrhovhannisyan.com/blog/eleventy-image-transform/#custom-image-attributes Eleventy Images Just Got Better | Aleksandr Hovhannisyan
  • John Brooks on 🐘 : @techlifeweb You could add a transform that does a search-and-replace on the content. https://www.11ty.dev/docs/transforms/ A simple string search for `<img src=` might work, but it might miss some too. A more robust method might incorporate a library like cheerio so you could parse and manipulate the content like a dom tree. https://www.npmjs.com/package/cheerio Transforms
  • Scott Kingery on 🐘 : @pupismyname Thanks. I actually figured it out last night using #11ty image plugin. I Hadn't been using plugin yet but once I figured it out (I'm teaching myself as I go) it was a simple add of u-photo to the imgAttributes section. https://www.11ty.dev/docs/plugins/image/#more-configuration-options 11ty Image

Reposts

    Bob Monsour