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 )
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.
@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 %}
---
P.S. Thank you for your time! I know, designers are "pain in the ass" :)
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.
You are my superhero! :) Everything works like a charm!
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'..
Log in to reply.
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 0 | 1357 | 9 years ago | ||
| 2 | 936 | 9 years ago | ||
| 2 | 4066 | 9 years ago | ||
| 1 | 2954 | 9 years ago | ||
| 3 | 1120 | 9 years ago |