Resizing media with only the image path

Started by Muut Archive 10 years ago · 7 replies · 1006 views

10 years ago

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:

YAML

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:

TWIG

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

But nothing is working :(

10 years ago

So, for anyone who is interested - this works:

TWIG

 {% 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:

TWIG

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

10 years ago

Hello,

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

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

TWIG



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 %}

---

10 years ago

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 %}

10 years ago

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

10 years ago

In case anyone else reads this, the solution is:

TWIG

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

10 years ago

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

YAML

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:

TWIG

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

10 years ago

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

YAML

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

Topic	Replies	Views	Activity
About the Archive category Archive · by Deleted User, 9 years ago	0	1357	9 years ago
Hey buddies! Archive · by Muut Archive, 9 years ago	2	936	9 years ago
There is a way to do a "if condition" in MD page? Archive · by Muut Archive, 9 years ago	2	4066	9 years ago
Official docker image of grav (+admin +gitsync) Archive · by Muut Archive, 9 years ago	1	2955	9 years ago
Weird Grav + caddy + iOS + https problem Archive · by Muut Archive, 9 years ago	3	1121	9 years ago

{% endfor %}

Suggested topics