lazy load more images

This commit is contained in:
Justin Cooper 2025-03-31 16:21:40 -05:00
parent 3595c71752
commit 17ce1b83ee
2 changed files with 15 additions and 10 deletions

View file

@ -1,8 +1,9 @@
<div class="image"> <div class="image">
{% assign guide = site.data.guides[include.index] %} {% assign guide = site.data.guides[include.index] %}
<img class="image-headline" alt="{{ guide.image_alt_attribute }}" <img class="image-headline"
alt="{{ guide.image_alt_attribute }}"
src="{{ guide.image }}" src="{{ guide.image }}"
/> loading="lazy" />
<span class="image-title"> <span class="image-title">
<span> <span>
<p><a href="{{ guide.guide_url }}">{{ guide.title }} by {{ guide.author }}</a></p> <p><a href="{{ guide.guide_url }}">{{ guide.title }} by {{ guide.author }}</a></p>
@ -10,6 +11,6 @@
<img alt="Made with CircuitPython Logo" <img alt="Made with CircuitPython Logo"
src="{{ "assets/images/made_with_circuitpython.svg" | src="{{ "assets/images/made_with_circuitpython.svg" |
relative_url }}" relative_url }}"
/> loading="lazy" />
</span> </span>
</div> </div>

View file

@ -36,7 +36,8 @@ layout: home
<div> <div>
<img alt="Brain Circuit Icon" <img alt="Brain Circuit Icon"
src="{{ "assets/images/icons/brain-circuit.svg" | src="{{ "assets/images/icons/brain-circuit.svg" |
relative_url }}" /> relative_url }}"
loading="lazy" />
<div> <div>
<h3>Beginner Friendly</h3> <h3>Beginner Friendly</h3>
<p> <p>
@ -47,7 +48,8 @@ layout: home
<div> <div>
<img alt="Microchip Icon" <img alt="Microchip Icon"
src="{{ "assets/images/icons/microchip.svg" | src="{{ "assets/images/icons/microchip.svg" |
relative_url }}" /> relative_url }}"
loading="lazy" />
<div> <div>
<h3>File Storage</h3> <h3>File Storage</h3>
<p> <p>
@ -58,7 +60,8 @@ layout: home
<div> <div>
<img alt="Files Icon" <img alt="Files Icon"
src="{{ "assets/images/icons/files.svg" | src="{{ "assets/images/icons/files.svg" |
relative_url }}" /> relative_url }}"
loading="lazy" />
<div> <div>
<h3>Easy Code Updates</h3> <h3>Easy Code Updates</h3>
<p> <p>
@ -70,7 +73,8 @@ layout: home
<div> <div>
<img alt="Terminal Icon" <img alt="Terminal Icon"
src="{{ "assets/images/icons/terminal.svg" | src="{{ "assets/images/icons/terminal.svg" |
relative_url }}" /> relative_url }}"
loading="lazy" />
<div> <div>
<h3>Serial Console + REPL</h3> <h3>Serial Console + REPL</h3>
<p> <p>