# Variable within variable in link or string?

**URL:** <https://talk.jekyllrb.com/t/variable-within-variable-in-link-or-string/7874>\
**Category:** Help\
**Created:** [December 13, 2022, 11:52am UTC](https://talk.jekyllrb.com/t/variable-within-variable-in-link-or-string/7874 "2022-12-13T11:52:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![johane](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@johane](https://talk.jekyllrb.com/u/johane)\
**Post date:** [December 13, 2022, 11:52am UTC](https://talk.jekyllrb.com/t/variable-within-variable-in-link-or-string/7874/1 "2022-12-13T11:52:51Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [December 13, 2022, 5:13pm UTC](https://talk.jekyllrb.com/t/variable-within-variable-in-link-or-string/7874/2 "2022-12-13T17:13:29Z")

</div>

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

> <https://stackoverflow.com/questions/52250168/url-string-interpolation-with-liquid-tags-jekyll>

---

<div class="post-metadata">

**Author:** ![fabiomux](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/fabiomux/32/2656_2.png) [@fabiomux](https://talk.jekyllrb.com/u/fabiomux)\
**Post date:** [December 13, 2022, 5:14pm UTC](https://talk.jekyllrb.com/t/variable-within-variable-in-link-or-string/7874/3 "2022-12-13T17:14:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![johane](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@johane](https://talk.jekyllrb.com/u/johane)\
**Post date:** [December 14, 2022, 8:19am UTC](https://talk.jekyllrb.com/t/variable-within-variable-in-link-or-string/7874/4 "2022-12-14T08:19:27Z")

</div>

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:

```auto
<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:

```auto
{% 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.

```auto
<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!

---

<div class="post-metadata">

**Author:** ![johane](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@johane](https://talk.jekyllrb.com/u/johane)\
**Post date:** [December 14, 2022, 9:11am UTC](https://talk.jekyllrb.com/t/variable-within-variable-in-link-or-string/7874/5 "2022-12-14T09:11:43Z")

</div>

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:

```auto
{% 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:

```auto
<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!

---

<div class="post-metadata">

**Author:** ![BillRaymond](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/billraymond/32/5963_2.png) [@BillRaymond](https://talk.jekyllrb.com/u/BillRaymond)\
**Post date:** [December 14, 2022, 9:39pm UTC](https://talk.jekyllrb.com/t/variable-within-variable-in-link-or-string/7874/6 "2022-12-14T21:39:51Z")

</div>

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`

```auto
---
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:

```auto
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?