Jekyll won't show content from Assets folder, please help

Help
1

Hello,

I am very new to this, but instructions on Jekyll official website was clear enough to me to start a project to build a portfolio website, however I am facing a big issue of Jekyll not setting up or reading assets folder correctly. Could someone help me solve the mystery? What I am trying to do is set up galleries for posts and some pages. Problem is that Jekyll won’t populate the galleries with the images from assets folder, to make matters even worse, I have a navigation menu that has a logo in it, it is designed as a separate html page that layout puts together. while it all works good in pages, posts doesn’t show the logo, even though the path to the logo is correct.

So this is how my code for the gallery looks like, any hints what I am doing wrong?

---
layout: two-column
title: "Portraits of a person"
excerpt_image: assets/images/Posts-Images/portraits-or-a-person/portraits-or-a-person-HD.jpg
post thumbnail: assets/images/Posts-Images/portraits-or-a-person/portraits-or-a-person-HD.jpg
image: assets/images/Posts-Images/portraits-or-a-person/portraits-or-a-person-HD.jpg
---
test1

<div class="uk-container">
  <div class="uk-grid uk-grid-match uk-grid-small uk-grid-masonry uk-lightbox">
    {% for image in site.static_files %}
      {% if image.path contains 'assets/images/Posts-Images/portraits-or-a-person' %}
        <div class="uk-width-1-4">
          <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
              <a href="{{ image.url }}" data-caption="{{ image.path | basename }}">
                <img src="{{ image.url }}" alt="{{ image.path | basename }}" class="uk-width-1-1 lazyload" data-src="{{ image.url }}">
              </a>
            </div>
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

it doesn’t show up, but if I view page source I see that it is populated with code that should do something.

In the front matter you can see my attempts to make post thumbnails or something to show images, that also doesn’t show up, I just see an icon that there should be an image.

it seems that Jekyll simply ignores my assets folder? can it be like that?
Do I need to make some specific changes to the config.yml? it is not much changed by me and mostly left default as whatever I try, usually breaks it all rather than helps the situation.

And this is the navigation menu code that works perfectly well for pages, but for posts, it shows a broken image link for the logo. but path to it is correct. and assets folder is generated by building. I assumed that when Jekyll creates an output, it would use this one assets folder with all content in it to populate website and posts.

<div class="uk-animation-slide-top-small"><img src="{{ site.baseurl }}assets/images/logo/Danas_Anis-imaging-nb.svg" width="150" height="230"></div>
<div class="uk-margin-medium-left">

<div class="uk-animation-slide-left-small">
<div uk-class="sidenav">
<div class="uk-margin-remove-left uk-width-1-2@s uk-width-2-3@m">
  <ul class="uk-nav-primary uk-nav-parent-icon" uk-nav>
      <li class="uk-active"><a href="{{ site.baseurl }}/index">Home</a></li>
      <li class="uk-active"><a href="{{ site.baseurl }}/">About</a></li>
      <li class="uk-active"><a href="{{ site.baseurl }}/new">New</a></li>
      <li class="uk-parent">
          <a href="#">Photography</a>
          <ul class="uk-nav-sub">
              <li><a href="#">Photo collection 1</a></li>
              <li><a href="#">Photo collection 2</a></li>

          </ul>
      </li>
      <li class="uk-parent">
          <a href="#">Video</a>
          <ul class="uk-nav-sub">
              <li><a href="#">Video Collection 1</a></li>
              <li><a href="#">Video Collection 2</a></li>
          </ul>
      </li>
      <li class="uk-active"><a href="#">Contact</a></li>
  </ul>
</div>
</div>
</div>

What am I doing wrong? I tried AI to help me and it doesn’t see issues with the code.
I am very grateful for your help.

2

can you do a simpler test and just try to display an image:

<img src=“{{ site.baseurl }}/assets/images/Posts-Images/portraits-or-a-person/portraits-or-a-person-HD.jpg” class=“uk-width-1-1 lazyload”">

  • be careful with folder and file names - I would recommend you always have them as all lowercase as some webservers are case sensitive and others are not which can drive you crazy with things like this - it can also be easy to mis type the path and forget how the case is. So the folder named Posts-Images would be better as posts-images.
  • be careful with the / you have some urls with a slash after baseurl and some without. I think you need one after it (like above) and the actual baseurl should have one at the beginning but not after it in the config. This may be why the logo shows on some pages and not others.

post a link to your repo if you can.

3

Hello!
Thank you very much for your reply and help!

I was able to get the image working using the code that you designed:

<img src="{{ site.baseurl }}/assets/images/posts-images/portraits/portrait-hd.jpg" class="uk-width-1-1 lazyload">

I renamed all files to lower case just in case. But looks like it is working!

I tried another experiment and was successful in making this work

<div class="uk-card-default uk-card-small uk-card-body" uk-lightbox="animation: slide;">
       <div><a class="uk-inline" href="{{ site.baseurl }}/assets/images/posts-images/portraits/portrait-hd.jpg"><img src="{{ site.baseurl }}/assets/images/posts-images/portraits/portrait-hd.jpg" width="30%" height=""></a></div>
    </div>

for some reason video files don’t want to show up, but that is for a future, if I will manage to make images show up, I guess code suitable for images will work for video files with the right interpretation.
now the question is how do the one makes the script, markdown code or how it is called to work?

Thank you so much for the hint about usage of the /
Solved my problem with the Logo!
Unfortunately I don’t have a repo, this site will be hosted on a hosting server outside github.
I am developing it locally, but I can think of something to share my project if needed, I will just have to figure images to place for testing.
Kind regards,
Danas

4

for a gallery? I’d make a new post and ask a question there. There are some existing jekyll gallery things, try searching the forum for info or google.

5

yeah, I would be so great if it did work.
in theory it should work, I don;t know why it doesn’t in practice,
I have tried creating assets folder in the exported site in the posts directory which seemed to attempt doing what it should but with broken image icon.

I tried checking this code with Gemini AI and it said this code seems to be correct.

<div class="uk-container">
  <div class="uk-grid uk-grid-match uk-grid-small uk-grid-masonry uk-lightbox">
    {% for image in site.static_files %}
      {% if image.path contains '/assets/images/posts-images/2014-12-karolis-r-portraits' %}
        <div class="uk-width-1-4">
          <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
              <a href="{{ image.url | absolute_url }}" data-caption="{{ image.path | basename }}">
                <img src="{{ image.url | absolute_url }}" alt="{{ image.path | basename }}" class="uk-width-1-1 lazyload" data-src="{{ image.url | absolute_url }}">
              </a>
            </div>
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

I am very grateful for your help! I was able to fix some things in the project and it gave me hope!
Worst case scenario, at least now I can manually populate posts and keep my initial site structure.
The improvised gallery code was supposed to save me from manual labor of putting images one by one to the posts. But now having a working concept I won;t drop this project. I was on edge to be honset :sweat_smile:

6

if you are doing something in the _site folder - don’t - everything in there gets deleted each time jekyll runs.

Try doing your loop but without the if statement - just so you can see if the main loop is the issue or the if statement.

When it shows the broken image icons check them in the browser dev tools (right click on one and choose Inspect) and then see what the url is that it is trying to load. That will help give you a clue as to why the link is broken.

At a glance your code looks like it should work.

7

hello,

So I was able to find a solution by accident, apparently, for gallery to work I had to change the code from

<div class="uk-container">
  <div class="uk-grid uk-grid-small uk-grid-masonry" uk-grid uk-scrollspy="target: .uk-card-default; cls: uk-animation-slide-bottom-small; delay: 500;" uk-lightbox>
    {% for image in site.static_files %}
      {% if image.path contains '/assets/images/posts-images/portraits' %}
        <div class="uk-width-1-4@m uk-width-1-2@s">
          <a href="{{ image.url }}" data-caption="">
            <img src="{{ image.url }}" alt="{{ image.path }}" class="uk-width-1-1 uk-box-shadow-small lazyload" data-src="{{ image.url }}">
          </a>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

to

<div class="uk-container">
  <div class="uk-grid uk-grid-small uk-grid-masonry" uk-grid uk-scrollspy="target: .uk-card-default; cls: uk-animation-slide-bottom-small; delay: 500;" uk-lightbox>
    {% for image in site.static_files %}
      {% if image.path contains '/assets/images/posts-images/portraits' %}
        <div class="uk-width-1-4@m uk-width-1-2@s">
          <div class="uk-card uk-card-default">
            <a href="{{ image.path }}" data-caption="">
              <img src="{{ image.path }}" alt="{{ image.path }}" class="uk-width-1-1 uk-card-media lazyload" data-src="{{ image.path }}">
            </a>
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

For some reason instead of image.url it wanted image.path
for images to show up. I also left data caption blank as I don’t need it to show directory to images, I guess a title will do better, anyway, it works!