Question: Extending Recton Services

[martin-coded]

Is there an easy way to add a custom transform service method to your RetconService class?

[mmikkel]

@martin-1988 I don't think so. Can you elaborate on specifically what you're looking to achieve?

[martin-coded]

I am trying to figure out, how we can use Retcon with the imageOptimize plugin when someone added images to a redactor field.

The usage of the imageOptimize plugin looks something like this.

twig

{% set thumbnail = entry.articleImage.one().optimizedArticleThumbnail %}
<img src="{{ thumbnail.src() }}" srcset="{{ thumbnail.srcsetWebP() }}" sizes="(max-width: 991px) 95vw, (max-width: 1350px) 45vw, 756px">

and as a result, we have this.

html

<img 
    src="/assets/images/thumbnails/_760x427_crop_center-center_60_line/923311/my-super-image.jpg" 
    srcset="/assets/images/thumbnails/_760x427_crop_center-center_60_line/923311/my-super-image.jpg.webp 760w, /assets/images/thumbnails/_1520x855_crop_center-center_45_line/923311/my-super-image.jpg.webp 1520w, /assets/images/thumbnails/_2280x1282_crop_center-center_30_line/923311/my-super-image.jpg.webp 2280w, /assets/images/thumbnails/_450x253_crop_center-center_60_line/923311/my-super-image.jpg.webp 450w, /assets/images/thumbnails/_900x506_crop_center-center_45_line/923311/my-super-image.jpg.webp 900w, /assets/images/thumbnails/_1350x759_crop_center-center_30_line/923311/my-super-image.jpg.webp 1350w, /assets/images/thumbnails/_350x196_crop_center-center_30_line/923311/my-super-image.jpg.webp 350w, /assets/images/thumbnails/_700x393_crop_center-center_22_line/923311/my-super-image.jpg.webp 700w, /assets/images/thumbnails/_1050x590_crop_center-center_15_line/923311/my-super-image.jpg.webp 1050w"
    sizes="(max-width: 991px) 95vw, (max-width: 1350px) 45vw, 756px">

Or would it be easier to achieve this, with the imagerX plugin?

[mmikkel]

The biggest obstacle to use either ImageOptimize or Imager's pre-transform features with Retcon is the fact that Retcon won't actually use the original assets when generating transforms (it will actually parse any reference tags in the image nodes' src attribute before attempting to transform them). Hence, Retcon operates on strings (i.e. image URLs) and not asset models, and so I think that will make it impossible to reconcile Retcon's transform or srcset methods with features in either IO or Imager that relies on actual asset models.

If you need this level of control over how image transforms are generated, my recommendation would be to use separate fields or block types for the images (i.e. not have them inside the WYSIWYG content), if at all possible. Retcon's transform features are fairly bare-bones on purpose.

[mmikkel]

I've got some changes planned for transforms in Retcon 3.0 which could be helpful for cases like this.

[daniellelecomte]

Hi @mmikkel - do you have an ETA on v3? Bumping up against this on a site with loads of legacy entries using retcon w/ imager and lambda.

[mmikkel]

@daniellelecomte Retcon 3.0.0-beta.1 has actually been tagged, but it’s a Craft 5 compatibility release and there are no changes.

I might or might not still do a bigger Retcon refactor at some point (perhaps as a 4.0), but it’s not something I’m working on ATM.

[daniellelecomte]

Appreciate the quick reply! Any suggestions on a work-around?

[mmikkel]

Appreciate the quick reply! Any suggestions on a work-around?

No, not really. As I mentioned above, ImageOptimize and Imager pre-transforms aren’t compatible with Retcon’s transform filters (which have essentially stayed the same since Craft 2 and pre-dates both of those). I’m not seeing a way to reconcile these features without making some fundamental changes to Retcon.