Hello together,
I started to built a website with jekyll some days ago. I don’t have a clue about html and css, but I liked the idea of hosting my website for free on github pages - at least in the beginning. With some tutorials and only the need of markdown, I was able to write several pages. My website won’t be a blog, but rather a documentation. Hence that I am using the just-the-docs theme.
I am planning to integrate some image collections with that. Mostly in or under posts or rather bodies of text on a page. I read some posts here in this forum and searched the internet and I have found an include on jekyll codex very handy: Image gallery | Jekyll Codex
I like the idea of just stating a folder and the include generates an array of pictures. That’s a great and lazy solution in my opinion, which I like.
My problem is, that my site is displaying dots with those images, which bother me. I tried to use list-style-type: none but that didn’t help.
That’s the code from jekyll codex
<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>
I have then tried to add *list-style-type:none’ to the code and I ended up to add it to every css line. I didn’t know where it was supposed to go exactly, but it didn’t work. Those dots still remained.
<style>
.image-gallery {overflow: auto; margin-left: -1%!important; list-style-type: none;}
.image-gallery li {float: left; display: block; margin: 0 0 1% 1%; width: 19%; list-style-type: none;}
.image-gallery li a {text-align: center; text-decoration: none!important; color: #777; list-style-type: none;}
.image-gallery li a span {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0; list-style-type: none;}
.image-gallery li a img {width: 100%; display: block; list-style-type: none;}
</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>
The image array looks like this despite using the second code:
A dot with every image which are overlapping with previous images.
I would appreciate if anyone could explain in simple terms what is wrong with the include and how I can fix this. But as I said, I dont know anything about html or css… but I’d like to learn.
This but responsive?
I was also thinking about doing this with responsive images. I was planning on using the jekyll_picture_tag plugin for that, i.e. a piece of code which displays an array of responsive images just by stating a folder name. Tbh I wasn’t able to make that plugin work, because rmagick made some problems I couldn’t resolve yet, but let’s assume, this plugin would work. I’ll try to fix that problem later anyway. Would it be enough, to just change this part:
<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 }}" />
with that?
{% picture file.path %}
That’s how I imagine it could work once the plugin ist installed, but my feeling tells me this would be to easy anyway.
If anyone could share some insides to that too, I would be very grateful. Maybe there is even a different plugin or bit of code which would work better?
Thanks in advance!