Variable within variable in link or string?

Help
1

Hello!

I am new to Jekyll, but I have successfully managed to make my own website, which runs fine locally. I uploaded it to Github Pages, and noticed none of the links worked. I figured out I need to use {{ ... | relative_url }} , so I’m trying to implement it. It works in the navigation menu etc., but I encounter a problem in my image gallery. I loop through the pages in my project and list them in a gallery with a link to the page and an image. The code below is inside a for-loop, and gathers the image that is shown in the gallery.

<img class="prosjekt-galleri-figur-bilete" src={{ '/assets/images/{{ prosjekt.name | replace: '.md', '' }}/WEBP/COVER.webp' | relative_url }} srcset="" alt="{{ prosjekt.TITTEL }}" loading="lazy">

This src does not work. Why does it not? In the source code inspector the code becomes:
src="/assets/images//WEBP/COVER.webp"
Why is not my {{prosjekt.name}} included?

This is what I had before, and it worked locally but not in Github Pages.
src='/assets/images/{{ prosjekt.name | replace: '.md', '' }}/WEBP/COVER.webp'

Does anyone have any ideas to how I can fix this? Should I remove the replace and go for another approach, so I don’t get two variables within the same string? Any help would be very appreciated!

Have a nice day!

2

check this question and answer - I think it covers your use case:

3

Just assign the content inside the single quotes into a variable and use the variable inside the curly braces

4

Good morning!

Thank you both so much! I ended up going for both of your solutions!
In the case I presented, this is what I did:

<img class="prosjekt-galleri-figur-bilete" src="{{ prosjekt.name | replace: '.md', '' | prepend: '/assets/images/' | append: '/WEBP/COVER.webp' | relative_url }}" srcset="" alt="{{ prosjekt.TITTEL }}" loading="lazy">

^ Solution to variable + string as relative_url.

The clue here was the string + prepend + append. This is neat, as I like to keep it in a single line, and I would like to be able to read it if I ever come back to it.

I tried this another place, where I use an {% include image.html %} that takes two parameters, a src and a figcaption.

The input from the markdown files is:
{% include image.html img="image-link" figcap="Figure caption and alt text." %}

Which then calls image.html:

{% assign img = include.img %}
{%- assign lenkje1 = page.name | replace: '.md', '' | prepend: '/assets/images/' | append: '/WEBP/' -%}
{%- assign lenkje2 = lenkje1 | append: {{img}} | append: '.webp'  -%}

<br>
<figure>
  <img class="enkeltprosjekt-bilete" src="{{ lenkje2 | relative_url }}" alt="{{ include.figcap }}" loading="lazy"/>
  <figcaption class="enkeltprosjekt-bilete-undertekst">
    {{ include.figcap }}
  </figcaption>
</figure>
<br>

^ Solution to variable + string + additional assigned variable as relative_url.

Here I had to assign the file location to a variable, to be able to append the {{ img }} to the string. I am not sure why I could not do this, inspired by the solution to the original problem.

<img src="{{ page.name | replace: '.md', '' | prepend: '/assets/images/' | append: '/WEBP/' | append: {{ img }} | append: '.webp' | relative_url }}"/>
OR
<img src="{{ page.name | replace: '.md', '' | prepend: '/assets/images/' | append: '/WEBP/'{{ img }}'.webp' | relative_url }}"/>

Hope this can help someone else later on.
Thanks a lot, have a nice day!

1 Like
5

Quick update to this! This is probably turning into more of a general problem and a blog of what I do wrong when I am trying to develop my own website, but solution 2 from earlier did not work on GitHub Pages, only locally. It seems that page.name return nothing when the site is hosted (I have note included name: ... in my front-matter, but it seemed like it was a standard variable), so I swapped it out for page.slug. This is what I was trying to achieve with my page.name | replace: '.md', '' anyhow, so I like this. My solution 2 is now:

{% assign img = include.img %}
{%- assign lenkje1b = page.slug -%}
{%- assign lenkje2 = lenkje1b | prepend: '/assets/images/' | append: '/WEBP/' -%}
{%- assign lenkje3 = lenkje2 | append: {{img}} | append: '.webp'  -%}

<figure class="enkeltprosjekt-figur">
  <img class="enkeltprosjekt-bilete" src="{{ lenkje3 | relative_url }}" alt="{{ include.figcap }}" loading="lazy"/>
  <figcaption class="enkeltprosjekt-bilete-undertekst">{{ include.figcap }}</figcaption>
</figure>

This also has ramifications on my solution 1:

<img class="prosjekt-galleri-figur-bilete" src="{{ prosjekt.slug | prepend: '/assets/images/' | append: '/WEBP/COVER.webp' | relative_url }}" srcset="" alt="{{ prosjekt.TITTEL }}" loading="lazy">

It is possible, maybe probable, that this could be improved, but I think I’m done with it for now. Again, hope this can help someone later on!

1 Like
6

Hi there. It would be great if you can show all your code. For example, what does the for loop look like? Or, if it is public, could you share your repo and point to the file/code having the problem on there?

I think what you are trying to do is rename the file from, say, .md to .webp because the graphic’s filename is the same as the page’s filename?

If that is the case, I wrote this code that works locally and on GitHub pages:

filename: /index.md

---
layout: home
---

Page name: {{page.name}}

Page name + webp extension: {{page.name | split: '.' | first | append: '.webp'}}

Page name + relative url: {{page.name | relative_url}}

Page name + relative url + webp extension: {{page.name | relative_url | split: '.' | first | append: '.webp'}}

The output looks like this:

Page name: index.md

Page name + webp extension: index.webp

Page name + relative url: /test-gp/index.md

Page name + relative url + webp extension: /test-gp/index.webp

Is that what you need? The ability to replace a file extension with another one while also getting the current relative url?