Resize image uploaded to page

Archive
1

Hi all.

I have some extra fields in my page (a modular slideshow) which let the user upload an image, add a title and add a caption. I access these “slides” in my twig template using:

{% for slide in page.header.slider %}
<div class="item{% if loop.first %} first{% endif %}">
{% for image in slide.image %}
<img src="{{ image.path }}" alt="{{ slide.title }}">
{% endfor %}
<div class="carousel-caption">
{{ slide.title }}
{{ slide.text }}
</div>
{% endfor %}

This all works fine :slight_smile:

Where I have a problem though is with resizing and cropping the image. Normally you would use something like:

{{ page.media['sample-image.jpg'].resize(400, 200).html() }}

But I can’t use this within the ‘for’ loop. If I put something like:

{{ page.media['image.name'].resize(400, 200).html() }}

I get nothing showing. I have tried with and without the single quotes.
I’m not sure what to do!

2

I kown, this isn’t an answer to your post, but since your file upload works - could you help us with the blog post “Upload image from frontend” in section plugins?

3

image.name now is a literal because it is encapsulated in quotes. Try {{ page.media[image.name].resize(400, 200).html() }}.

4

Hi bleutzinn
Thanks for the suggestion but I have tried that and still nothing shows :frowning:

5

Got it working!
It was my own stupid fault! I had changed where the file uploads to in my blueprint and not moved the actual file.
What an idiot!