Add image height/width

Support Themes & Styling
1

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

2

@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') }}
3

@anon76427325 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?

4

@msa, Apparently I didn’t understand your exact issue…

  • What are you trying to achieve?
  • How should the end result look like?
  • When are the images automatically scalled? Are you using derivatives()?
  • Anything else that is relevant but left out?
5

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">&nbsp;&nbsp;{{ post.title }}</div>
                                </div>
    		        </div>
    		</div>
    	</div>
    	{% endfor %}	            
</div>

and all seems ok.

1 Like