Hi all,
** Main Question: Can I implement lazy loading of a photo when the photos are pulling from a HubDB? **
Why/backstory:
I’ve just swtiched my team directory over to pulling from a HubDB (for much easier edits), and I’m running into an issue trying to get them to lazy load. Because all of the 115 images are killing my loading time.
The coding below is coding that worked because it wasn’t pulling from a HubDB
HTML:
<div class=“grid”>
<div class=“item”>
<p><a href=“https://info.blockimaging.com/mohammed-ali” rel=" noopener"><img class=“lazy” data-src=“https://www.blockimaging.com/hubfs/a-team-member-photos-and-social/ali-mo-circle.jpg” alt=“ali-mo-circle” style=“width: 125px;” width=“125”></a></p>
<p><a href="https://info.blockimaging.com/mohammed-ali">Ali, Mohammed</a></p>
</div>
<div class=“item”>
<p><a href=“https://info.blockimaging.com/heather-anderson” rel=" noopener"><img class=“lazy” data-src=“https://www.blockimaging.com/hubfs/a-team-member-photos-and-social/anderson-heather-circle-s.jpg” alt=“anderson-heather-circle-s” style=“width: 125px;” width=“125”></a></p>
<p><a href="https://info.blockimaging.com/heather-anderson">Anderson, Heather</a></p>
</div>
<div class=“item”>
<p><a href=“https://info.blockimaging.com/tony-baggett” rel=" noopener"><img class=“lazy” data-src=“https://www.blockimaging.com/hubfs/a-team-member-photos-and-social/baggett-tony-circle-s.jpg” alt=“baggett-tony-circle-s” width=“125” style=“width: 125px;”></a></p>
<p><a href=“https://info.blockimaging.com/tony-baggett” rel=" noopener">Baggett, Tony</a></p>
(…and it continues for quite a few more times)
CSS:
Main CSS
{{ get_asset_url(‘/Coded files/Custom/system/css/2016_Golden_Responsive_Test_with_Menu.css’) }}
Page Level CSS
<style>
.grid {
display: grid;
/* Display as a Grid */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* repeat = as many times as you can fit */
/* auto-fit = fit as many items on the line as possible, go bigger if you need to */
/*minmax = (min size, max size) = the minimum size the column should be is 200px, but if there’s space then give them all 1fr of that width. */
grid-gap: 10px;
}
.item {
height: 100%;
text-align: center;
}
.item2 {
height: 400px;
text-align: center;}
</style>
JavaScript File that links in the template file :
{{ get_asset_url(‘/blockimaging_shared/scripts/lazy_loading_images.js’) }}
Now, I’m trying to get it work work with my HubDB module, but this is what I’m getting. It starts with the image showing but when you scroll it starts looking like this:
Here’s the coding relating to that:
URL: https://www.blockimaging.com/team-007-0?hs_preview=wrCWdXsk-23543576882
JS and CSS unchanged
HTML+HUBL in Module:
<div class=“grid”>
{# Get Team Members from HubDB #}
{% set table = hubdb_table_rows(2028560, queryparam)%}
{% for row in table %}
<div class=“item” style=" display: block; margin-left: auto; margin-right: auto; padding-bottom: 20px;">
<a href=“{{ row.url}}”> <img class=“team lazy” src=“{{ row.image }}” alt=“{{ row.first }} {{ row.last }}”> </a>
<p>
<a href=“{{ row.url }}”> {{ row.last }}, {{ row.first }} </a>
</p>
</div>
{% endfor %}
</div>
----------
I tried my best to include everything, but let me know if you need anymore information to help.
I appreciate anyone’s time and effort on this!
Lauren