### Author:  [@budparr](https://discourse.gohugo.io/u/budparr)
#### Post date: [October 6, 2017, 6:52pm UTC](https://discourse.gohugo.io/t/drop-in-replacement-for-the-hugo-figure-shortcode-for-lazyloading-etc/8701/1 "2017-10-06T18:52:50Z")
I made a shortcode for Hugo as a drop-in replacement of the Hugo `figure` shortcode that uses lazy loading and markdownifys the caption and title. Might save someone with similar needs a bit of time.
>
_And, keeping with an earlier thread of sharing resources, I’ve tagged the gist with `#gohugo` but the search there isn’t all that good._
---
### Author:  [@maiki](https://discourse.gohugo.io/u/maiki)
#### Post date: [October 6, 2017, 9:44pm UTC](https://discourse.gohugo.io/t/drop-in-replacement-for-the-hugo-figure-shortcode-for-lazyloading-etc/8701/2 "2017-10-06T21:44:57Z")
```auto
```
I went and looked up what the gif was, and I am still a little iffy on how it is used. Could you explain its inclusion, and your usage? 🙂
---
### Author:  [@budparr](https://discourse.gohugo.io/u/budparr)
#### Post date: [October 6, 2017, 10:09pm UTC](https://discourse.gohugo.io/t/drop-in-replacement-for-the-hugo-figure-shortcode-for-lazyloading-etc/8701/3 "2017-10-06T22:09:26Z")
It’s just a placeholder for `src.`
---
### Author:  [@bep](https://discourse.gohugo.io/u/bep)
#### Post date: [October 6, 2017, 10:12pm UTC](https://discourse.gohugo.io/t/drop-in-replacement-for-the-hugo-figure-shortcode-for-lazyloading-etc/8701/4 "2017-10-06T22:12:24Z")
> [@budparr](#):
>
> It’s just a placeholder for src.
Yea, but what does it contain? An image of a carrot?
---
### Author:  [@budparr](https://discourse.gohugo.io/u/budparr)
#### Post date: [October 6, 2017, 10:14pm UTC](https://discourse.gohugo.io/t/drop-in-replacement-for-the-hugo-figure-shortcode-for-lazyloading-etc/8701/5 "2017-10-06T22:14:19Z")
It’s invisible. I sometimes do use something similar with the site name and the shape of the image its replacing, but this one only serves the purpose of having something in the src tag.
---
### Author:  [@rybi](https://discourse.gohugo.io/u/rybi)
#### Post date: [October 7, 2017, 2:57pm UTC](https://discourse.gohugo.io/t/drop-in-replacement-for-the-hugo-figure-shortcode-for-lazyloading-etc/8701/6 "2017-10-07T14:57:03Z")
Great work, I also used lazysizes and found it to be the best of the lazy loading libraries, in addition to loading the most appropriate image version.
If I see it right, you put width and height manually in the shortcode. Do you see a way for hugo to get this data automatically, at some point in the future? Or at least the proportion of width/height?
For my use case I let imagemagick generate the lowest possible quality (but same width/height) version of the image to use as a placeholder until the better version was loaded. It had some nice old-school aesthetic to it, but still was 10-20 kb per image instead of \<1 kb for the gif placeholder.
---
### Author:  [@budparr](https://discourse.gohugo.io/u/budparr)
#### Post date: [October 7, 2017, 7:00pm UTC](https://discourse.gohugo.io/t/drop-in-replacement-for-the-hugo-figure-shortcode-for-lazyloading-etc/8701/7 "2017-10-07T19:00:12Z")
It is a great library. Simple to use and plugins for most every scenario. I just carried over the width and height from the existing shortcode. My goal was to change only what I needed and otherwise leave it alone.