Jekyll Appending Paginator path to img path

1

I’ve added basic pagination to my jekyll site and it seems to work well for page 1 where the site path has not changed. But going to page 2 where the path is now http://localhost:4000/page2/ causes all thumbnail imgs to not be found because the imgs are all set in the front matter like: image: assets/img/DCM_post_19.jpg and not /page2/assets/img/DCM_post_19.jpg' so none of the image thumbnails are displaying properly after the first page.

How can this be fixed because I cannot create that directory structure cause I could never know what imgs belong on what page permanently.

2

Do research on relative vs absolute urls

A relative URL is going to add to the current path.

An absolute path will work from anywhere.

Add a forward slash at the start of your URL

1 Like
3

@MichaelCurrin Ah thank you Michael. I will familiarize myself with that concept. It fixed the issue.

One other problem came up though during implementation of pagination. I have a highlighted post that appears first before all other blog posts in a larger, wider thumbnail. But now it gets moved over to page 3 of pagination rather than staying on the homepage.

My index.html looks like this (only part relevant to highlighted post is shown):

 {% assign sortedPosts = paginator.posts | sort: 'post-priority' %}

  {% if site.post_type == 'highlight' %}

    {% for post in sortedPosts %}
    {% if post.highlight %}
    <div class="section-highlight section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">

      <header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}></header>

      <div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
        <div class="mdl-card__supporting-text">
          <h4>{{ post.title }}</h4>
          <p>{{ post.excerpt }}</p>
        </div>
        <div class="mdl-card__actions">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">Read More</a>
        </div>
      </div>

    </div>
4

Actually I just noticed the posts are all out of their typical order and not following the post priority anymore.

5

That is a different issue. I see covered here now. I don’t know how sorting works.

1 Like