Site.static_files Image Gallery demo - thumbnails not displaying

People,

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

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

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

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

Thanks,
Phil.

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

This was the original code:

<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):

<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.

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

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.”

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.

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:

<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 }}" />

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.

Right - thanks for that!