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!
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."}