Image path variable for collections

Help
1

When working with images, the paths can get quite long. In my case I work with a collections directory and put images corresponding to a collection in /assets/collections/<name_of_collection>/.... Is there a way to use variables to shorten the links to these images? I would like to avoid writing the first part of the image path (/assets/collections/<name_of_collection/) and instead use a variable. Something like {{ page.collection }}, {{ page.url }} or {{ site.url }} don’t seem useful in this case. Is there a way to define (global) variables in Jekyll that could be used to set the corresponding image path for each collection?

To display images I use the figure tag:

<figure>
    <a href="/assets/collections/a_collection/images/image-filename-1-large.jpg"><img src="/assets/collections/a_collection/images/image-filename-1-large.jpg"></a>
    <figcaption>Caption describing this image.</figcaption>
</figure>
2

you can make your own variables in the config file and then reference them using {{site.myVariableName}} so you could add to your config file:

imgpath: /assets/collections/

and then your urls could be {{site.imgpath}}cats/fluffy.jpg

not sure that is much shorter though.

You can also make that whole figure thing an include, and pass in the filename and maybe collection name and have the include do the rest. Not sure that makes it any shorter either.

3

Thank you @rdyar for the suggestions. I like the idea with a new include file. I saw that there is a collections variable page.collection. Do you know if it is possible to use this variable inside an include which then evaluates to the correct collection when I use the include in a page?

I think of adding something like figure_collection inside the _includes folder with the following content:

<figure>
  <a href=
    {% if include.image_path contains "://" %}
      "{{ include.image_path }}"
    {% else %}
      "/assets/collections/{{ page.collection }}/{{ include.image_path | relative_url }}"
    {% endif %}>
  <img src=
    {% if include.image_path contains "://" %}
      "{{ include.image_path }}"
    {% else %}
      "/assets/collections/{{ page.collection }}/{{ include.image_path | relative_url }}"
    {% endif %}
    alt="{% if include.alt %}{{ include.alt }}{% endif %}"></a>
  {% if include.caption %}
    <figcaption>
      {{ include.caption | markdownify | remove: "<p>" | remove: "</p>" }}
    </figcaption>{% endif %}</figure>

Do you think this could work when I use it with something like the following inside a page:

{% include figure_collection image_path="images/image-filename-1-large.jpg" alt="this is a placeholder image" caption="This is a figure caption." %}
4

I doubt you can get the collection name from the include (but maybe you can? worth a try), but you may be able to pass it in to the include.
Nice work!