So I'm editing this template to use for gallery project, but when I attempt to replace links like

<img src="https://source.unsplash.com/random/?tech,yet"> 

with something like

<img src="https://www.geoawesomeness.com/wp-content/uploads/2013/11/earth.jpeg">

The picture isn't visible and and picture without direct link is displayed on top of it.

All layout just collapses. i got the template from codepen. codepen.io/vhanla/pen/PxjZvj Any ideas what can be causing this behavior please? thank you

CodePudding user response：

The codepen seems to use dynamically resized images to mimic the masonry plugin

https://unsplash.com/documentation#dynamically-resizable-images

Dynamically resizable images
Every image returned by the Unsplash API is a dynamic image URL, which means that it can be manipulated to create new transformations of the image by simply adjusting the query parameters of the image URL.
This enables resizing, cropping, compression, and changing the format of the image in realtime client-side, without any API calls.
Under the hood, Unsplash uses Imgix, a powerful image manipulation service to provide dynamic image URLs.