Great video, very useful. Did you work out how to ...
# newsc
Craig100
09/26/2023, 8:55 AMGreat video, very useful. Did you work out how to work with Slimsy to do background images? I noted your new codeshare site appears to have done it. Or at least there's a query string at the end of the background image url.
c
CodeSharePaul
09/26/2023, 9:14 AMThanks Craig. I’ve not gotten around to implementing slimsy yet on codeshare. I plan on doing it soon.
CodeSharePaul
09/26/2023, 9:19 AMI did have it on my old codeshare site. You would add a class of lazyload to the div and you would add a data attribute of
data-bg="yourhighqualityurlhere"style="background:url('lowqualityurlhere')"CodeSharePaul
09/26/2023, 9:20 AMAnd you reference the lazysizes js file in your page
CodeSharePaul
09/26/2023, 9:21 AMHere is the HTML for the header on my old version of my site
CodeSharePaul
09/26/2023, 9:21 AM Copy code
html
<div class="page-header-image lazyload" data-bg="/media/z3ta4wcc/codeshare-header.jpg?anchor=center&mode=crop&width=1904&height=604&rnd=132678230988700000" style="background-image: url('/media/z3ta4wcc/codeshare-header.jpg?anchor=center&mode=crop&width=190&height=60&rnd=132678230988700000');">
</div>c
Craig100
09/26/2023, 1:00 PMInteresting, thanks. I can see how that would give you a better page load speed index but not offer up the right image for the screen size.
c
CodeSharePaul
09/26/2023, 4:31 PMYeah the background one doesn't adjust the image to the screen size but the slimsy foreground ones do
c
Craig100
09/26/2023, 6:06 PMYeah, have used Slimsy for years in everything. The new tag helper is very nice. The docs could do with some TLC though. I think it actually does more than it's letting on 😉