Resizing media with only the image path

Archive
1

Anyone know a way to use the media image resizing function when you only have the image path? So e.g. {{ image.cropZoom(600,400).quality(100).html() }} would output the image IF grav knows it’s an image or in an image/media loop

…But i only have the path not the image - Grav doesn’t know its an image because it’s coming from an array in the yaml - so this:

gallery2:
    user/pages/test/cows.jpg:
        name: cows.jpg
        type: image/jpeg
        size: 66442
        path: user/pages/test/cows.jpg
    user/pages/test/arthritis.jpg:
        name: arthritis.jpg
        type: image/jpeg
        size: 63333
        path: user/pages/test/arthritis.jpg
    user/pages/test/cows1.jpg:
        name: cows1.jpg
        type: image/jpeg
        size: 32349
        path: user/pages/test/cows1.jpg

So I was trying stuff like:

{{ gallery2.item.cropZoom(600,400).quality(100).html() }}

But nothing is working :frowning:

2

So, for anyone who is interested - this works:

 {% for item in page.header.gallery2 %}
        <img class="img-responsive" src="{{ item.path }}">
  {% endfor %}

But just outputs the image straight with no manipulation - what I need is something like:

 {% for item in page.header.gallery2 %}
        <img class="img-responsive" src="{{ image['item.path'].cropZoom(600,400).quality(100).url() }}">
  {% endfor %}
3

Hello,

I don’t know if it works. But maybe you try something like this:

—twig
{% for item in page.header.gallery2 %}

{% endfor %}


If this doesn't work, maybe you could test this way

---twig
{% for item in page.header.gallery2 %}
      <div class="img-responsive">
       {{ page.find(item.path).media[item.name].cropZoom(600,400).quality(100).html() }}">
      </div>
  {% endfor %}

---
4

Update: Thsi should give you the solution!
—twig
{% for item in page.header.gallery2 %}
{{ page.find(item.path).media[item.name].cropZoom(600,400).quality(100).html(’’,’’,‘img-responsive’) }}

{% endfor %}

5

Hey thanks for the help - however, none of those worked :frowning:

6

In case anyone else reads this, the solution is:

  {% for item in page.header.gallery %}
   <img class="img-responsive" src="{{ page.media[item.name].cropZoom(600,400).quality(100).url() }}">
  {% endfor %}
7

Why are you storing the full path to the file in the YAML??? It would work with this:

gallery2:
    -
        name: cows.jpg
        type: image/jpeg
        size: 66442
    -
        name: arthritis.jpg
        type: image/jpeg
        size: 63333
    -
        name: cows1.jpg
        type: image/jpeg
        size: 32349

Then in the Twig:

{% for image in page.header.gallery2 %}
{{ page.media[image.name'].cropZoom(600,400).quality(100).html() }}
{% endif %}
8

Hi Rhuk, Grav is doing that - this is my blueprint yaml bit:

header.gallery:
  type: file
  style: vertical
  label: Page Gallery
  destination: '@self'
  multiple: true
  limit: 50
  filesize: 2
  accept:
    - image/*