Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

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

Solved by pamtbaau View solution

Started by Vince42 5 years ago · 9 replies · 862 views
5 years ago

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.

5 years ago

@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:

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

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

HTML
<p>
  <img 
    style="float:right;" 
    alt="Cropped, right aligned" 
    src="/images/path/to/cropped/jeep.jpg"
  >
</p>
👍 1
5 years ago

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

5 years ago

@Karmalakas Out of the box...

If the docs mentions classes:

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

why not try style?

You could also use attribute:

TXT
![Cropped, right aligned](jeep.jpg?cropResize=100,100&attribute=style,float:right)
👍 1
5 years ago

@pamtbaau:
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:

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?

5 years ago

@pamtbaau:
Out of the box…
If the docs mentions classes :

why not try style ?
You could also use attribute:

I learned a lot today. 😉

5 years ago Solution

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:

TWIG
{{ 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.

TWIG
{{ image.cropResize(100,100).html('My title', 'Some ALT text', 'myclass') | raw }}
5 years ago

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.

5 years ago

@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.

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 80 9 hours ago
General · by pamtbaau, 14 hours ago
1 51 14 hours ago
General · by Andy Miller, 1 day ago
0 44 1 day ago
General · by Marcel, 12 months ago
6 346 5 days ago
General · by Duc , 5 days ago
3 40 5 days ago