Is it possible to cropResize the image in a text module?

1

A modular may contain “Text” (besides Features and Hero) modules. it is possible to upload exactly one image and to specify its position (left or right).

Is there a way to change the image size in a convenient way? I would like to apply the cropResize action, but cannot see, where I could put it in order to resize the pictures.

2

You’d have to extend a /modular/text.html.twig template or make your own

3

@Vince42, Assuming you don’t mean to change the behaviour of Quark’s text.html.twig (which requires tweaking the template), you could add the following to Markdown:

![Cropped, right aligned](jeep.jpg?cropResize=100,100&style=float:right)

Which will result in the following HTML (beautified by me):

<p>
  <img 
    style="float:right;" 
    alt="Cropped, right aligned" 
    src="/images/path/to/cropped/jeep.jpg"
  >
</p>
1 Like
4

Does this require shortcode core or works out of the box?

5

@Karmalakas Out of the box…

If the docs mentions classes:

![Some ALT text](sample-image.jpg?classes=myclass "My title")

why not try style?

You could also use attribute:

![Cropped, right aligned](jeep.jpg?cropResize=100,100&attribute=style,float:right)
1 Like
6

My problem is, that the first image is displayed, no matter what I do.
If I could pass parameters to the picture, I would be more than happy.
I also tried to put the first image into the body text—but this results only in displaying the picture twice.

Maybe I should rephrase my question: How can I suppress the text module from displaying the first picture automatically?

7

I learned a lot today. :wink:

8

Maybe I should rephrase my question: How can I suppress the text module from displaying the first picture automatically?

See post #2

And while you’re changing the template anyway, you can ditch the Markdown solution and change the display of the image like:

{{ image.cropResize(100,100).attribute('style', 'float:right').html | raw }}

or set a class instead of style and define the style for the class in css.

{{ image.cropResize(100,100).html('My title', 'Some ALT text', 'myclass') | raw }}
9

I am missing out something. Your first post sounded to me, like I do not have to change text.html.twig and the last post sounds like I have to change it.
So I assume, that there is no way to suppress the first image or to style it with some markdown in order to hide it, right?
Maybe I will try to hide it by some custom CSS.

10

@Vince42, If the template being used is designed to do something you don’t want, you will have to override and change the template in an inherited theme.

I wouldn’t consider using css to hide the default output of a template a good approach… Go for the inherited theme instead.