I found a video online explaining how to add featured images to Jekyll posts using liquid. I followed the instructions but I needed to extend the code for especial cases. In this post I explain what I added.

My idea was to add another front matter variable for the feature image source link. This would be a simple task if we assumed that we will only get one source link per post (if always only referencing one source per image).

The featured image in my first post, a mood board, required multiple links (it is composed of multiple images). This seemed a great opportunity to practice some liquid language so here is what I did:

In every post’s front matter I assign the source of the image to a variable image_url. If the image has only one source then the variable will be a string containing that information.

# 2022-12-18-my-post-title.markdown
---
image_url: https://unsplash.com/photos/Adl90-aXYwA
---

If the image refers to multiple sources then the image_url variable will be an array containing all the sources:

# 2022-12-18-my-post-title.markdown
---
image_url: 
  - https://unsplash.com/photos/Adl90-aXYwA
  - https://unsplash.com/photos/4QVoKxlnsx0
  - https://unsplash.com/photos/asYCpxbYTWc
---

In liquid, we can use the array filter “first” to check if a variable is a string or a list of elements. This way, when image_url is an array I use a loop for displaying the links to the sources with numbers using forloop.index.

<!-- post.html -->
{%- if page.image -%}
    <img src="{{- page.image | relative_url -}}" alt="" class="featured-image-post">
    {%- if page.image_url.first -%}
      {% comment %} multiple urls provided! {% endcomment %}
      <p>
        (Picture sources: 
        {% for url in page.image_url %}   
          {%- if forloop.last -%}
            <a href="{{url}}">{{forloop.index}}</a>
          {%- else -%}
            <a href="{{url}}">{{forloop.index}}</a>,&nbsp;
          {%- endif -%}
        {%- endfor -%}
        )
      </p>
      {%- else -%}
        {% comment %} one url only {% endcomment %}
        (Picture: {{page.image_url}})
    {%- endif -%}
{%- else -%}
    {%- assign postImage="/assets/images/image-default.jpg" -%}    
    <img src="{{- postImage | relative_url -}}" alt="" class="featured-image-post">
    <p>(Picture: https://unsplash.com/photos/cckf4TsHAuw)</p>
{%- endif -%}

This solution works for me for now. I am learning jekyll and liquid as I move forward, so there might be a better approach that I am not aware of - I will post a better solution in the future if I find one.