Community guidelines
Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.
Solved by Mat View solution
Hello!
in my twig I have:
{% for image in page.media.images %}
{{ image.html(page.parent.title, page.title, 'img-full-responsive s-rounded') }}
{% endfor %}
to get the image height or width, I need to use:
{{ image.width }}
what I don't intend how to add this parameter inside my first code... I'done some experiment but no success.
Some suggestions?
thanks
@msa, According the docs, the ImageMedium has methods height() and width():
height(string/mixed $value='auto') : \Grav\Common\Page\Medium\$this
width(string/mixed $value='auto') : \Grav\Common\Page\Medium\$this
To set the image height/width to its actual size you could do:
{{ image.height().width().html('title', 'alt', 'class') }}
To set the height/width to specific values you can do:
{{ image.height(200).width(300).html('title', 'alt', 'class') }}
@pamtbaau if you weren't around, I don't know what I would do!
but maybe I didn't explain well, I have to get the dimensions, because the images are automatically scaled ... or, can I put the standard ones of the images I upload?
@msa, Apparently I didn't understand your exact issue...
derivatives()?my goal was to add height and width attributes to images. But I initially thought of getting them from the images themselves, using:
{{ image.width }}
then, I realized that if I add, as you suggested to me:
image.height (). width ()
by entering arbitrary values, I get the same result I was looking for.
after this, I decided not to use derivatives anymore, because the compression of grav is not the most effective, and because I couldn't configure it well.
Why couldn't I? Because, as discussed in the other thread, I get a correct result for the images of the same page, however, for the images in the cards, which take images from other pages, connected to the page I am working on, these are not scaled. Therefore, I decided to use a simple resize, and the height and width attributes are consistent at this point.
Now I use this code for images in the cards carousel:
<div class="owl-carousel owl-theme">
{% for post in taxonomy.findTaxonomy({'tag':'optionals','model':page.taxonomy.model}).order('date', 'desc') %}
<div class="card">
{% set image = post.media.images|first %}
{% if image %}
<div class="card-image">
<a href="{{ post.url }}" title="{{ post.title }}">
{{ image.height(160).width(160).resize(160, 160).html(page.parent.title, post.title, 'img-full-responsive') }}
</a>
</div>
{% endif %}
<div class="card-footer">
<div class="tile tile-centered">
<div class="tile-icon">
<a href="{{ post.url }}" class="btn btn-primary" title="{{ post.title }}"><i class="icon icon-arrow-right"></i></a>
</div>
<div class="tile-content">
<div class="tile-title"> {{ post.title }}</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
and all seems ok.
Log in to reply.
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 4 | 193 | 2 months ago | ||
| 3 | 90 | 2 months ago | ||
| 11 | 449 | 3 months ago | ||
| 0 | 44 | 3 months ago | ||
| 5 | 123 | 3 months ago |