imagelist - best practice

[dbrooke0830]

Hello,
I am still getting used to BOLT.. nearing the completion of my first project.

I have a page that has multiple entries, but some of those entries have multiple images... ie:

sudo code...
<text text text> <img>

<img> <text text text> <img>

<text text text>

I am trying to figure out the best way to go about putting this content into BOLT, then serving it to the public.

I have read about imagelist:

Imagelist

The imagelist fieldtype is accessible as an array. This is convenient for most cases, because this makes it easy to output them as lists in your HTML. This simple example for an imagelist field named ‘slider’ will output thumnbails for each of the images, with links to the full sized versions.

Code: Select all

{% for image in page.slider %}
  <a href="{{ image.filename|image }}" title="{{ image.title }}">
    <img src="{{ image.filename|thumbnail(100,100) }}">
  </a>
{% endfor %}

The next example outputs a wrapping div and an unordered list, but only if the list actually contains elements. The first and last item in the list also get a custom ‘first’ and ‘last’ class added to them.

Code: Select all

{% if page.slider|length > 0 %}
<div class='imageslider'>
  <ul>
    {% for image in page.slider %}
    <li class="{% if loop.first %}first {% endif %}{% if loop.last %}last {% endif %}">
      <img src="{{ image.filename|thumbnail(320,240) }}" alt="{{ image.title }}">
    </li>
    {% endfor %}
  </ul>
</div>
{% endif %}

However, I guess I don't quite understand how to use it. Can someone tell me how I'd grab one of the images in the image list to use at a certain part of the entry?

Thanks,
Donovan

[dbrooke0830]

In other words.. in the example of the imagelist named 'slider'.. how did it get named 'slider'.. is that a slug or name?

[dbrooke0830]

So, some advancement made... I updated my contenttypes.yml, entries with:

Code: Select all

        imagelist:
            type: imagelist
            attrib: title

Now when I go to edit an entry, I have the multiple image uploader available to me.

I then upload the images, which go into the /files/ directory.

I then realized that I can access those images in a twig template individually via something like:

Code: Select all

{% setcontent vname = "/entry/myentry" %}
  <img src="{{ paths.files }}/{{ vname.imagelist.2.filename }}" />

Is there a way to access images rather via a slug, and perhaps without using the paths.files path?

Donovan

[dbrooke0830]

Well, this is the best I could come up with:
<img src="{{ image(myentry.imagelist.0.filename) }}" alt="{{ myentry.imagelist.0.title }}" />

then iterate the array value.. .1., .2., etc..

I would rather like to call these with an association.. something like:

Code: Select all

{% set imgs = myentry.imagelist %}

<img src="{{ image(imgs.<slug>.filename) }}" alt="{{ imgs.<slug>.title }}" />

Can something like that be done?

[jhice]

Hi,

Actually the imagelist is rendered as an indexed array.
What you want is to render it as an associative array based on a custom field.
It needs to tweak the imagelist field behavior, means diving in the Bolt Code, I presume.

The question is why you want to access images by a slug instead of an id, I suppose it is because when you add images in the liste it breaks your numbers. Perhaps the other solution would be to put "n" static images so that you can explicitely call them in the template, but you're limited to "n" images and can not go beyond.

Have you solved your problem ?