Crop images from a carousel

Support Plugins
,
1

hello mates,

I would like to crop the images of my carousel but I don’t know how to do it, I’m a beginner on grav.

I would also like my carousel not to take the whole width of my page, how should I proceed?
I use Shortcode Owl Carousel Plugin.

below is an image of my current carousel and my code

[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true nav=true]
<div style="background: url({{ page.media['inscription.png'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 1</h2>
  <p>foo</p>
</div>
<div style="background: url({{ page.media['identification.png'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 2</h2>
  <p>foo</p>
</div>
<div style="background: url({{ page.media['photocaution.png'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 3</h2>
  <p>foo</p>
</div>
[/owl-carousel]```


![Capture d’écran 2021-07-20 à 11.24.44|690x119](upload://7DyNv0LALQyOs4BhxhfLApRlZYV.jpeg)
2

Did you check the Media docs?
It would be something like:

{{ page.media['identification.png'].cropResize(200, 200).url }}
3

Yes but it doesn’t work.
Maybe if i narrow the width of the carousel it would work, where do I have to make changes for this ?

4

What do you mean it doesn’t work? What’s the result now and what do you expect? Remember you have a background-size: cover, so visually there shouldn’t be much difference (if at all, depending on original image size)

As for the width, I would guess it’s a theme thing and you need to extend it and adjust template and/or CSS, but without more info, again, it’s just a guess

5

Here is what I have

Capture d’écran 2021-07-20 à 12.27.41
Capture d’écran 2021-07-20 à 12.27.411685×781 93.9 KB

I want a more centered and less wide carousel so that the images appear properly

6

It looks like a pure CSS issue, but without seeing HTML and CSS not much we can advise