[PAID] Custom Fancybox snippet with phpthumbon

Hi everyone, I am looking for a developer that could create a custom snippet based on FancyBox and phpthumbon, than can be dragged/dropped into TinyMCE Rich Text Editor.

Ideally, the snippet should look like this ( just an idea ):
[[fancyboxcustomsnippet &url=”imageurl” &alt=”..” &caption=”..” &size=”” &sizesmallscreen=””]]

The html part should look like this ( could not paste because of the forum formating ):

Important: The snippet has to be

  • Compatible with php 7.3, 7.4 and 8
  • Compatible with Modx 2.8.*
  • Compatible with TinyMCE Rich Text Editor
  • Snippet has to be called cached

Optional features:

  • Set a default size in the backend ( both desktop and mobile ). If the the fields “size” and “sizesmallscreen” are empty, then the default size applies.
  • Set custom size when using the plugin (preferably during drag and drop into TinyMCE )
  • Choose image directly from the media manager (preferably during drag and drop into TinyMCE )
  • Set caption and alt for image (preferably during drag and drop into TinyMCE )

Please make a precise offer, and let me know which features you think you can implement. You can make multiple offer with different features, that’s fine by me. Suggestions are welcome :wink:



What do you need?
See above

When do you need it?
In a week or 2. But I am flexible.

What is your budget, in $ USD (or local currency) that you can offer for this task?
It really depends on the developer experience. Of course, this is a fairly simple php script to write, so your offer has to be realistic.

Are you set on integrating it into TinyMCE RTE, presumably as a tinymce plugin of sorts? I can think of some alternative solutions that may be easier to build and/or use, including ContentBlocks and parsing the content while rendering to enhance images instead, but not sure if you’re open to such an approach.

1 Like

That was also my first thought.
Sounds like a usecase for ContentBlocks.

Or do they really want editors to drag images anywhere in between text?
Thats mostly not the best idea.

1 Like

Not really, if the easiest solution is to paste the snippet into the editor and add the parameters manually that is fine by me.
Of course, if a TinyMCE plugin is feasible, I’m also open to that option. But again, I would be satisfied with a simple snippet.

Regarding ContentBlocks, I’ve never used it before, but I am afraid that the switch from TinyMCE RTE is going to give me too much extra work. And I’ll probably have to install the snippet/plugin on 3 or 4 websites, so I’m not sure if this is going to be cost effective…

Yes that’s actually the case :sweat_smile:

For example, the content could look like this:

<p content.......
<p content again.....

this still looks like a job for ContentBlocks or MIGX to me.
For example like here:
MIGX.Varying layout-boxes - Tutorials | MODX Documentation

Its also possible to do it like that:
MIGX.Fancybox-images with seperate placeholders in Richtext-Content - Tutorials | MODX Documentation

Actually I’m not sure if this is possible, because TinyMCE replace "" by &#96; which breaks the whole code… :expressionless:

So in the end it breaks the code and looks like this:
[[!phpthumbon? &input=&#96;

Would it be possible to create a TinyMCE plugin that prevents anything inside [[…]] to be converted into HTML ?
If that is the case, then I’d be really interested. Let me know.

P.S. I had a quick look at MIGX, I’m not sure if this is what I’m looking for, but I’ll give it another reading later.

you don’t use double quotes for snippet-properties, but backtics

It’s free to try, so I’d definitely suggest that. It seems to me like it would be great for your use case.

It’s also not necessarily a switch - you can still use TinyMCE for the regular content editing. It’s just the image field you would use to template images into picture/srcset, take advantage from cropping optiions, etc. I’d suggest it’s probably more cost effective to get ContentBlocks than to hire someone to build the functionality you’re describing.

The other option I was alluding to is going the imageSlim route. That’s an extra available from the MODX extras that you apply as an output filter to the content, which will then parse teh HTML and see if any images need resizing. Something like that could be extended to not just resize a single image, but turn it into the example markup you posted dynamically.

I’m probably gonna have a look at ContentBlocks and see if it works.

Actually, all the other solutions are not possible with TinyMCE, I have realized that the editor converts everything to HTML.

“Backtics” or “&” are converted into &#96; and &amp; , which obviously breaks every single chunks and snippets…

Even though it’s not because of the plugin itself, I have reported the issue on Github.

Anyway thanks for your help.

Another Option could be to use Fred

I can’t reproduce the TinyMCE issue on different hosts. Please paste the snippet call into the TinyMCE field and open the source code window of TinyMCE with the Tools -> Source Code menu entry. If the backticks are not converted to &#96 in the source code window, the conversion happens during saving the resource.

Hi Jako and thank you for reply.

I have attached the code below if you want to make any test on your side (Please note that I have replaced the backtics by " because of the forum formatting).

<a data-fancybox="gallery" href="https://via.placeholder.com/1920x1080.png" data-caption="Caption for single image">
<img srcset="[[!phpthumbon? &input="https://via.placeholder.com/1920x1080.png" &options="w=400&h=210&zc=1"]] 400w,
						 [[!phpthumbon? &input="https://via.placeholder.com/1920x1080.png" &options="w=600&h=320&zc=1"]] 600w,
             [[!phpthumbon? &input="https://via.placeholder.com/1920x1080.png" &options="w=750&h=400&zc=1"]] 750w,
						 [[!phpthumbon? &input="https://via.placeholder.com/1920x1080.png" &options="w=900&h=480&zc=1"]] 900w"
     src="https://via.placeholder.com/1920x1080.png" alt="Alt for Image">

But it should look like this:

  • If I paste the snippet directly into the field editor, it won’t break the backtics, but it will modify the code by adding lots of <div>

  • On the other hand, if I copy and paste the code into the source code, then the issue that I mentioned previously happens.

I can reproduce that issue with your code. TinyMCE replaces backticks inside of HTML attributes:

<div class="[[!phpthumbon? &input=`https://via.placeholder.com/1920x1080.png` &options=`w=400&h=210&zc=1`]]">test</div>

is converted to

<div class="[[!phpthumbon? &amp;input=&#96;https://via.placeholder.com/1920x1080.png&#96; &amp;options=&#96;w=400&amp;h=210&amp;zc=1&#96;]]">Test</div>

Outside of an attribute only the ampersand is replaced (which will be parsed right in MODX):

<p>[[!phpthumbon? &input=`https://via.placeholder.com/1920x1080.png` &options=`w=400&h=210&zc=1`]]</p>
<p>[[!phpthumbon? &amp;input=`https://via.placeholder.com/1920x1080.png` &amp;options=`w=400&amp;h=210&amp;zc=1`]]</p>

I don’t think, that you can change the behaviour of TinyMCE to bypass that issue. You have to use MODX chunks for this use case.

1 Like

Yes that’s what I was thinking, but thanks for trying anyways Jako :+1:

By the way, I’ve noticed there is also CKEditor listed on the extras page. Is it safe to use or should I stick with tiny ?

Hi Bruno, I have tried the example you mentioned with TinyMCE, and it works, well at least Tiny doesn’t break the snippet :slightly_smiling_face:.
I didn’t try with phpthumbof yet, but I will.

using phpthumbof or pthumb within the getImageList - tpl chunk shouldn’t break anything, since you are just setting the placeholders into the RTE. Parsing the chunks and replacing the placeholders happens at runtime serverside. So it doesn’t touch the content within the RTE.

I have tested the behaviour in TinyMCE RTE 1.4.0. The backticks are converted there too. Could you tell me which issues occur during parsing that content? Is it maybe a degression in MODX 2.x?

It breaks all the images, only the href link works.

:no_mouth: Ouch, I’m sorry I can’t help with that one.

P.S: I was using CKEditor before, but it only converted & to html, therefore not breaking the code. I don’t have any preference, but I went for TinyMCE because it is update more frequently ( by yourself actually if I’m not mistaken :+1: )

This is according to TinyMCE docs:
The base entities < > & ' and " will always be entity encoded into their named equivalents. Though ' and " will only be encoded within attribute values and < > will only be encoded within text nodes. This is correct according too the HTML and XML specs.

I guess that won’t be possible… but Bruno method seems to be doing the trick.

Hi Bruno, I wanted to ask, in the example above, are getImageList and [[+img.0]] called cached ?
Is it ok if I add [[getImageList? &tpl=fancybox&tvname=fancyboxTv&toSeparatePlaceholders=img]] to the template even if I don’t use the TV?