Get the image with name starting with

Archive
1

Hello! How is it possible to get an image from “page.media.images” but only the images whose names do start from “bg_” and skip others.

My mission: i need a variable which will be having something like:

headerImage = page.media.images (random image starting from bg_blablabla.jpg)  .resize(1280).url

Please help me ) I am designer, so do not kick me )

2

Try something like this:

{# get all the images from the page media #}
{% set images = page.media.images %}

{# create an empty array to hold your bg images #}
{% set bg_images = [] %}

{# loop over all the images and put only 'bg_' images into the new array #}
{% for filename, image in images %}
  {% if filename starts with 'bg_' %]
   {% set bg_images = bg_images|merge(image) %}
  {% endif %}
{% endfor %}

{# pick a random image from the new array #}
{% set random_bg_image = random(bg_images) %}

{# perform operations and display the image tag #} 
{{ random_bg_image.resize(1280,800).html }}

NOTE: This is untested, but should get you going in the right direction.

3

@rhukster Thank you! But gives an error:

The merge filter only works with arrays or "Traversable", got "object" as second argument in "portfolio.html.twig" at line 6.

In portfolio.html.twig at line 6:

{% for image in page.media.images|sort_by_key('priority')|reverse if image.meta.title != '' %}

When i delete the code at line 6, it still gives an error but on another line. I pasted here the full copy of portfolio.twig

{% extends 'partials/base.html.twig' %}
{% block content %}
    {% macro gridElement(page) %}
        <div class="row">
            <ul class="no-margin no-padding no-list">
                {% for image in page.media.images|sort_by_key('priority')|reverse if image.meta.title != '' %}
                    <li class="elementItem">
                        <div class="col s12 m12 l6 no-padding {% if loop.index is even %} right{% endif %} autoHeight" style="background-color:{{ image.meta.background }};">
                            {% if image.meta.more == "" %}
                                <a style="background-image:url('{{ image.resize( 600).url }}')"  class="autoHeight portfolioElementLink venobox" title="{{image.meta.description}}"  data-gall="gallery" href="{{ image.url }}"></a>
                            {% else %}
                                <a  style="background-image:url('{{ image.resize(600).url }}')" class="autoHeight portfolioElementLink" title="{{image.meta.description}}" href="{{ page.url }}/{{ image.meta.address }}"></a>
                            {% endif %}
                        </div>
                        <div class="col s12 m12 l6 no-padding valign-wrapper autoHeight">
                            {% if image.meta.more == "" %}
                                <div class="elementItemDescription">
                                    <h2><a>{{ image.meta.title }}</a></h2>
                                    <p><strong><a>{{image.meta.category}}</a></strong></p>
                                    <p><a>{{image.meta.description}}</a></p>
                                </div>
                            {% else %}
                                <div class="elementItemDescription">
                                    <h2><a href="{{ page.url }}/{{ image.meta.address }}">{{ image.meta.title }}</a></h2>
                                    <p><strong><a href="{{ page.url }}/{{ image.meta.address }}">{{image.meta.category}}</a></strong></p>
                                    <p><a href="{{ page.url }}/{{ image.meta.address }}">{{image.meta.description}}</a></p>
                                </div>
                            {% endif %}
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endmacro %}
    {{ _self.gridElement(page) }}
{% endblock %}
---
4

P.S. Thank you for your time! I know, designers are “pain in the ass” :slight_smile:

5

From my code try this:

{% set bg_images = bg_images|merge([image]) %}

Notice how the image in the item is now surrounded by square brackets, ensuring its wrapped in an array.

6

You are my superhero! :slight_smile: Everything works like a charm!

7

This works great indeed, but don’t forget to clear the cache if you use ftp to rename the images…
It took me a few hours before i found this ‘error’…