Image resizing using pthumb within richtext editor?

Support Extras
1

I’m looking for a solution to downsize images, that users insert into richtext fields. Ideally I would like some sort of Image+ integration, as that’s what users are already familiar with, which would also include the cropping functionality.

For a first idea, is there an option to define like a chunk how images are being output on the frontend?

I’m currently using TinyMCE RTE but I’m not stuck to that. I was also looking into Redactor, but as far as I can tell, there’s no such option included in any of these.

Has anyone here experience with that? How do you manage image sizes? I’m also open to any other solutions. Not a big fan of altering images on upload though, as this doesn’t seem to suit all the possible sizes, a user might decide to place there images in.

2

I don’t know any really good solutions, but here are some ideas:

  • Add the images in MIGX and then reference them in the textfield → Tutorial
  • Use ContentBlocks (or maybe Fred) so you don’t have to mix text and images
  • Maybe you could use an extra like Adaptive Image or a custom plugin that runs on OnWebPagePrerender on does something similar.
  • Code a custom plugin in TinyMCE that outputs a MODX tag.

Similar topic:

1 Like
3

Should Adaptive Image be available via the Package Manager? I don’t seem to be able to find it. I realise it can be downloaded but it hasn’t been updated since 2018 which gives me the fear!

Like @vibedesign I’d love to find an easily-deployable solution for this. I’ve previously looked into the custom plugin on OnWebPagePrerender - using this as a starting point.

However I soon realised that you can’t employ MODX tags at this stage, meaning that I couldn’t make a [[pthumb]] call - or any similar other call. This exposes my lack of understanding of how everything hangs together behind the scenes in MODX but I guess that by the time we get to OnWebPagePrerender we’ve already taken care of interpreting / running all MODX tags.

The next steps feel beyond me but I’m guessing if it was easy then someone might have done it by now and made the plugin available as an extra?

Similarly - if a plugin exists for TinyMCE - I’ve not found it.

Thanks @halftrainedharry for your suggestions.

4

Hello mate.
You only need to use Pthumbs to resize images in the frontend that has been inserted directly with an image template variable.

To solve your problem you need a plugin called : AutoFixImageSize.

That plugin will resize any image inserted within the richtext.

I got a modified version to use it with amp-img, let me know if you need it.

hope that helps, cheers mate!

1 Like
5

You can’t return a MODX tag [[...]] at this point, because they are already parsed. But you can run a snippet in your plugin-code and add the result to the output, as it is done in the Adaptive Image extra.

...
$tmp = $modx->runSnippet('pThumb',array(
	'input' => $src,
	'useResizer' => '1',
	'options' => 'w='.$imageWidth
));

Adaptive Image is a weird extra. It somehow creates its own database table, that is completely unnecessary (as far as I can tell). I think all the relevant code is in the plugin.
Maybe just copy the plugin code from Bitbucket, hardcode the values that are read from the system settings (like $modx->getOption('adaptiveimage_image_class'); and adapt the rest of the code to your needs.

1 Like
6

Ah of course! I’ve actually done something similar to this before in another scenario but didn’t put 2+2 together.

I’ll take another look at it. Thanks as always.

7

Hey @ysanmiguel - just saw your reply - sounds like it covers this out the box - thanks I’ll give it a try!

8

Thanks for all the suggestions @halftrainedharry!

This one seemed the most useful and still easy-to-use for a client solution to me, so I gave it a try and it works pretty well, also because by using MIGX you have all the freedom for additional inputs or custom templating as you like.

This also seems like a helpful solution, though I’m a little concerned as this extra is from 2013?

I have not tried this one out yet, but it really looks like a good solution for downsizing images. Now the only feature I would still like to have is image cropping. I had another look at the TinyMCE docs and it turns out there is an Image Tools Plugin which does just that (and more).

It’s easily included by just adding imagetools to the tinymcerte.plugins sytem setting. BUT:

Important: TinyMCE 5.10 will include the final release of the Image Tools plugin (imagetools) as an open source plugin. The Image Tools plugin will be removed from the open source bundle and be available as a premium plugin for TinyMCE 6.0.

So it looks like that will be gone, as soon as the TinyMCE Version is upgraded within the Extra.

Until then the Image Tools Plugin together with the (custom) Adaptive Image Extra might do all the things needed (for me). But knowing it’s not future proof hurts a little.

In an ideal world @jako creates an Image+ TinyMCE Plugin which does all of that out of the box. I would definitely pay for an extra like that! :wink:

2 Likes
9

It is not an ideal world and maybe it is better to buy a license for the imagetools plugin, if that’s possible somehow.

10

I want to second the suggestion to try ContentBlocks from Modmore. It already does everything you require, and it’s actively supported. You can get a free dev license and give it a spin.

I’m pretty new to it, and as far as I can tell the main difference between it and a RTE like tinyMCE, from the clients’ perspective, is that they can’t just paste in their whole article at once into a single text box, since they need to separate the text into blocks before and after each image. But once I have explained to them the joy of having image templates that help them upload and insert images, with captions if wanted, in preset aspect ratios, pixel sizes, compression rates, and with filename sanitizing — so they don’t have to worry about slowing down their website or blowing through storage limits — they totally appreciate it.

The docs are great too:

2 Likes