# Passing an image as an element in an array

**URL:** https://zola.discourse.group/t/passing-an-image-as-an-element-in-an-array/827
**Category:** Support
**Created:** [March 12, 2021, 7:21pm UTC](https://zola.discourse.group/t/passing-an-image-as-an-element-in-an-array/827 "2021-03-12T19:21:30Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![ken](https://avatars.discourse-cdn.com/v4/letter/k/cc9497/32.png) [@ken](https://zola.discourse.group/u/ken)
#### Post date: [March 12, 2021, 7:21pm UTC](https://zola.discourse.group/t/passing-an-image-as-an-element-in-an-array/827/1 "2021-03-12T19:21:30Z")

</div>

I’m new to Zola and I’ve done a lot of reading and it seems like there is no way to create a custom variable for something like an image or author. This is my work around, but I need someones help. I’ve almost got it, but not quit there yet.

In the YAML section I have description, and within that description I can put author, picture.jpg, description, or whatever I want. It’s just a string. So I do this…  
+++  
title = “My cool page”  
description =“picture.jpg~Author Name~My super cool description goes here”  
+++

Now on my html page where I want this to display I do this:{{ “picture.jpg~John Doe~This is my description” | split(pat="~") }}

This outputs an array with 3 elements  
[picture.jpg, John Doe, This is my description]

So far so good! But this is where I’m stuck! How do I reference each element? Like this…  
[0] picture.jpg  
[1] John Doe  
[2] This is my description

The array must have a name and I assume I reference the elements within the array like this: array\_name[1]. But I dont know how to do that. Like everything in life, it’s probably super simple, once you know how. I just dont know how.

Eventually I would like to do this:  
(that didn’t work, I cant post code)

Thanks in advance!!

---

<div class="post-metadata">

### Author: ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)
#### Post date: [March 12, 2021, 9:01pm UTC](https://zola.discourse.group/t/passing-an-image-as-an-element-in-an-array/827/2 "2021-03-12T21:01:14Z")

</div>

1. Why not put that info in `[extra]`? That’s what it’s for.
2. You need to assign it to a variable

{% set data = “picture.jpg~John Doe~This is my description” | split(pat="~") %}

---

<div class="post-metadata">

### Author: ![ken](https://avatars.discourse-cdn.com/v4/letter/k/cc9497/32.png) [@ken](https://zola.discourse.group/u/ken)
#### Post date: [March 13, 2021, 6:44pm UTC](https://zola.discourse.group/t/passing-an-image-as-an-element-in-an-array/827/3 "2021-03-13T18:44:05Z")

</div>

Thanks so much keats! This works like a champ! Exactly what I was looking for.

> [@keats](#):
>
> {% set data = “picture.jpg~John Doe~This is my description” | split(pat=“~”) %}

However, this does not work:  
{% set data = page.description | split(pat=“~”) %}  
{{ data[0] }} should return picture.jpg

I get the error:  
Variable `data[0]` not found in context while rendering ‘page.html’: the evaluated version was `data.0`. Maybe the index is out of bounds?

I’m still missing something?

You mentioned using [extra], I dont see how that would work? For example within each page (content/news/somefile.md) I have a single and unique image as well as an author (that is not unique). I assume I might be able to use [extra] to define a set or an array of authors since they are fixed. But defining a unique image file, I just dont see how that would work? This is why I choose to put everything as a string in page.description, and just split the string on some unique and pre-defined unique character.  
Thanks

---

<div class="post-metadata">

### Author: ![TangoWhiskeyman](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/tangowhiskeyman/32/413_2.png) [@TangoWhiskeyman](https://zola.discourse.group/u/TangoWhiskeyman)
#### Post date: [March 25, 2021, 2:36pm UTC](https://zola.discourse.group/t/passing-an-image-as-an-element-in-an-array/827/4 "2021-03-25T14:36:12Z")

</div>

Under [extra] you can add your own fields to the page, and they’ll function just like any other.

So, instead of

```
 +++
 title = “My cool page”
 description =“picture.jpg~Author Name~My super cool description goes here”
 +++

```

you can go for

```
 +++
 title = “My cool page”
 description =“My super cool description goes here”
 author = "Stephen King"

 [extra]
 image = "foo.jpg"
 +++

```

and skip the hacky tilde split.
