mmikkel/Retcon-Craft

Question: Extending Recton Services

Opened this issue · 8 comments

martin-coded commented

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

mmikkel commented

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

martin-coded commented

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 commented

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.

  • 👍1
mmikkel commented

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

daniellelecomte commented

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 commented

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

  • 👍1
daniellelecomte commented

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

mmikkel commented

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.

  • 👍1