# Responsive image array from folder

**URL:** <https://talk.jekyllrb.com/t/responsive-image-array-from-folder/8749>\
**Category:** Help\
**Created:** [December 8, 2023, 1:21pm UTC](https://talk.jekyllrb.com/t/responsive-image-array-from-folder/8749 "2023-12-08T13:21:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![burntboard](https://avatars.discourse-cdn.com/v4/letter/b/c67d28/32.png) [@burntboard](https://talk.jekyllrb.com/u/burntboard)\
**Post date:** [December 8, 2023, 1:21pm UTC](https://talk.jekyllrb.com/t/responsive-image-array-from-folder/8749/1 "2023-12-08T13:21:19Z")

</div>

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](https://jekyllcodex.org/without-plugin/image-gallery/)  
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

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

```

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.

```auto
<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:

 ![Screenshot (156)](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/2/20a9c101e11bcbe45210e7627bd8a1c92d03b7cf.png)

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:

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

```

with that?

```auto
{% 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!

---

<div class="post-metadata">

**Author:** ![jhvanderschee](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jhvanderschee/32/583_2.png) [@jhvanderschee](https://talk.jekyllrb.com/u/jhvanderschee)\
**Post date:** [December 30, 2023, 6:51pm UTC](https://talk.jekyllrb.com/t/responsive-image-array-from-folder/8749/2 "2023-12-30T18:51:22Z")

</div>

You are seeing the bullets from the list items. Add `list-style: none` to `.image-gallery li` only and you should be good. If it does not work, use `!important`.