twigoctobercmstwig-filter

twig thumbnail - set relative offset

I'm using OctoberCMS and my thumbnail gallery is generated this way:

<img src="{{ image.thumb(250, 250, {mode:'crop', offset: [0,100]} ) }}">

The offset value will "overshoot" the picture, if the picture format is 1:1.

I'm looking for a way to get the very top of every image size, like the css property

background-position: 0% 0%;

Do you have any ideas?

Here's a picture, where you can see that twig "overshoots" in the top row: Example

Solution

  • For this, you can use background-image property of CSS and with background-image property you can use background-position property. For background-position property, you have more options here.

    Note: For using backgrond-image property you have to use auto mode in thumbnail generator function.

    If you have defined any link on that image you can use background-image property on the link and give inline CSS on it, like below

    <a href="your_url" 
style="background-position: center top; background-image: url({{image.getThumb(250, 250, 'auto')}})">
</a>

    or Instead of <a> tag, You can use any HTML tags like <div> and give CSS Properties(particular height and width) for that <div> and manage your view.

    Try this, and tell me your reviews.