[Plugin: Blurry Placeholder] High-res image wont show up

Kirby 3 Solved ✅
1

Hi,

I have truobles getting the High-res image up. Blurry is working fine. I’ll try fetching the images in a foreach.

<?php 
$projects = page('work')->children()->listed()->filterBy('onhome', true);
if(isset($limit)) $projects = $projects->limit($limit);
?>
<?php foreach($projects as $project): ?>
<img src="<?= $project->cover()->toFile()->placeholderUri() ?>" data-src="<?= $project->cover()->toFile()->url() ?>" data-lazyload data-sizes="auto">
<?php endforeach ?>
2

Hey, welcome to the forum :wave:.

It helps if you always post a link if you are referring to third party resourses.

Have you included the lazyloading script?

3

Hi @moritzbastian,
I assume you’re using the blurry placeholder plugin. As Sonja mentioned, you have to include the default lazyloading script of the plugin or add your own lazyloading solution. You can find more information on how to do this in the »lazy loading in the frontend« section of the plugins GitHub-page.

4

Hi all,

The Developer provided me with a prebundled libary which worked perfectly.

Attached below:

(()=>{var z=!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),b=(t,o=250)=>{let e;return(...s)=>{e&&clearTimeout(e),e=setTimeout(()=>{e=null,t(...s)},o)}},c=t=>{let o=t.dataset.src;o&&(t.src=o);let e=t.dataset.srcset;if(e){t.srcset=e;let s=t.dataset.sizes;s&&(t.sizes=s==="auto"?`${t.offsetWidth}px`:s)}t.dataset.loaded="true"},d=t=>t.dataset.loaded==="true",g=t=>{for(let o of t)o.dataset.sizes==="auto"&&(o.sizes=`${o.offsetWidth}px`)},w=t=>(o,e)=>{for(let s of o)if(s.intersectionRatio>0||s.isIntersecting){let{target:n}=s;if(e.unobserve(n),d(n))continue;c(n),t(n)}},v=(t,o=document)=>t instanceof Element?[t]:t instanceof NodeList?[...t]:o.querySelectorAll(t);function f(t="[data-lazyload]",o={}){let{root:e,rootMargin:s="0px",threshold:n=0,loaded:a=()=>{}}=o,u=new IntersectionObserver(w(a),{root:e,rootMargin:s,threshold:n});return{observe(){let r=v(t,e);for(let i of r)if(!d(i)){if(z){c(i),a(i);continue}u.observe(i)}let l=b(()=>g(r),100);window.addEventListener("resize",l)},triggerLoad(r){d(r)||(c(r),a(r))},observer:u}}var L=f();L.observe();})();