# Site.static\_files Image Gallery demo - thumbnails not displaying

**URL:** <https://talk.jekyllrb.com/t/site-static-files-image-gallery-demo-thumbnails-not-displaying/6144>\
**Category:** Help\
**Created:** [June 12, 2021, 12:59pm UTC](https://talk.jekyllrb.com/t/site-static-files-image-gallery-demo-thumbnails-not-displaying/6144 "2021-06-12T12:59:52Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [June 12, 2021, 12:59pm UTC](https://talk.jekyllrb.com/t/site-static-files-image-gallery-demo-thumbnails-not-displaying/6144/1 "2021-06-12T12:59:52Z")

</div>

People,

I have created a new Jekyll site and followed instructions here:

> **[Image gallery](https://jekyllcodex.org/without-plugin/image-gallery/#help)**
>
> Introduction: This script creates an image gallery. The script reads all images from a specific (user-defined) folder in Jekyll, automagically crops them to ...

which works OK except that the thumbnail does not display (see screencap):

 ![Screenshot_2021-06-12_22-58-29_jekyll_static_file_image-gallery](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/d/dfc8230d89b5062bb647eb9143d8475be9a03f00.png)

Although when clicking on the link, the full image displays happily . .

I can’t see what is wrong - any enlightenment?

Thanks,  
Phil.

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [June 12, 2021, 4:00pm UTC](https://talk.jekyllrb.com/t/site-static-files-image-gallery-demo-thumbnails-not-displaying/6144/2 "2021-06-12T16:00:08Z")

</div>

can you post a link to your repo and or the live site? or at least the code that you have?

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [June 12, 2021, 4:10pm UTC](https://talk.jekyllrb.com/t/site-static-files-image-gallery-demo-thumbnails-not-displaying/6144/3 "2021-06-12T16:10:21Z")

</div>

This was the original code:

```auto
<style>
    .image-gallery {overflow: auto; margin-left: -1%!important;}
    .image-gallery li {float: left; display: block; margin: 0 0 1% 1%; width: 19%;}
    .image-gallery li a {text-align: center; text-decoration: none!important; color: #777;}
    .image-gallery li a span {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0;}
    .image-gallery li a img {width: 100%; display: block;}
</style>

<ul class="image-gallery">
	{% for file in site.static_files %}
		{% if file.path contains include.folder %}
			{% if file.extname == '.jpg' or file.extname == '.jpeg' or file.extname == '.JPG' or file.extname == '.JPEG' %}
				{% assign filenameparts = file.path | split: "/" %}
				{% assign filename = filenameparts | last | replace: file.extname,"" %}
				<li>
					<a href="{{ file.path | relative_url }}" title="{{ filename }}">
						<img src="//images.weserv.nl/?url={{ site.url | replace: 'http://','' | replace: 'https://','' }}{{ file.path | relative_url }}&w=300&h=300&output=jpg&q=50&t=square" alt="{{ filename }}" title="{{ filename }}" />
						<span>
							{{ filename }}
						</span>
					</a>
				</li>
			{% endif %}
		{% endif %}
	{% endfor %}
</ul>

```

But I deleted a lot of stuff and the result below worked for me (the photos are low-res and almost thumbnails anyway so this was good enough for this particular exercise):

```auto
<div>
	{% for file in site.static_files %}
		{% if file.path contains include.folder %}
			{% if file.extname == '.jpg' or file.extname == '.jpeg' or file.extname == '.JPG' or file.extname == '.JPEG' %}
				{% assign filenameparts = file.path | split: "/" %}
				{% assign filename = filenameparts | last | replace: file.extname,"" %}
				<p>
					<a href="{{ file.path | relative_url }}" title="{{ filename }}">
						<img src="{{ file.path | relative_url }}" alt="{{ filename }}" title="{{ filename }}" />
						<span>
							{{ filename }}
						</span>
					</a>
				</p>
			{% endif %}
		{% endif %}
	{% endfor %}
</div>

```

but it would still be good to know what the original problem was . .

Thanks,  
Phil.

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [June 12, 2021, 9:16pm UTC](https://talk.jekyllrb.com/t/site-static-files-image-gallery-demo-thumbnails-not-displaying/6144/4 "2021-06-12T21:16:41Z")

</div>

> [@philiprhoades](#):
>
> `<img src="//images.weserv.nl/?url`

not sure, but this had two slashes instead of one, and what is weserve.nl? your host for the images?

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [June 13, 2021, 1:47am UTC](https://talk.jekyllrb.com/t/site-static-files-image-gallery-demo-thumbnails-not-displaying/6144/5 "2021-06-13T01:47:16Z")

</div>

Changing it to one slash gives this:

“ERROR `/images.weserv.nl/’ not found.”

The comment from the page on Jekyll Codex (see OP) says:

“Note that the images are being resized and served by images.weserv.nl.”

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [June 13, 2021, 1:49am UTC](https://talk.jekyllrb.com/t/site-static-files-image-gallery-demo-thumbnails-not-displaying/6144/6 "2021-06-13T01:49:08Z")

</div>

right - but are you using that site? I think the author is but I think his code is an example, and if you are not using that site then you need to do the url to where your images are.

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [June 13, 2021, 1:52am UTC](https://talk.jekyllrb.com/t/site-static-files-image-gallery-demo-thumbnails-not-displaying/6144/7 "2021-06-13T01:52:22Z")

</div>

Oh I think I see what you mean - I will try something . .

The only thing I could get to work was changing the first line to the second line:

```auto
<img src="//images.weserv.nl/?url={{ site.url | replace: 'http://','' | replace: 'https://','' }}{{ file.path | relative_url }}&w=300&h=300&output=jpg&q=50&t=square" alt="{{ filename }}" title="{{ filename }}" />

<img src="{{ file.path | relative_url }}" alt="{{ filename }}" title="{{ filename }}" />

```

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [June 13, 2021, 2:01am UTC](https://talk.jekyllrb.com/t/site-static-files-image-gallery-demo-thumbnails-not-displaying/6144/8 "2021-06-13T02:01:32Z")

</div>

which is probably correct assuming you are not using that site to serve images. The difference is just the way that person could request a certain size image I think. There are services that you upload your original images to and then you can request them at a certain size like `&w=300&h=300&output=jpg` for a 300x300 jpg.

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [June 13, 2021, 2:02am UTC](https://talk.jekyllrb.com/t/site-static-files-image-gallery-demo-thumbnails-not-displaying/6144/9 "2021-06-13T02:02:25Z")

</div>

Right - thanks for that!

---

<div class="post-metadata">

**Author:** ![AlesBucek](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/alesbucek/32/5793_2.png) [@AlesBucek](https://talk.jekyllrb.com/u/AlesBucek)\
**Post date:** [February 17, 2024, 10:29pm UTC](https://talk.jekyllrb.com/t/site-static-files-image-gallery-demo-thumbnails-not-displaying/6144/10 "2024-02-17T22:29:26Z")

</div>

The resizing service on images.weserv.nl does not and can not work when you test your web on localhost - because it is necessary for the resizing online service to receive your images which they can not from your localhost. You can check the page source code of your html, find the url generated for the thumbnail image and enter the url into your browser - you should receive a message instead of thumbnail photo:  
`{"status":"error","code":404,"message":"The hostname of the origin is unresolvable (DNS) or blocked by policy."}`