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 ):
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
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.
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…
Actually I’m not sure if this is possible, because TinyMCE replace "" by ` which breaks the whole code…
So in the end it breaks the code and looks like this: [[!phpthumbon? &input=`
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.
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 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 ` in the source code window, the conversion happens during saving the resource.
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"
sizes="100vw"
src="https://via.placeholder.com/1920x1080.png" alt="Alt for Image">
</a>
Hi Bruno, I have tried the example you mentioned with TinyMCE, and it works, well at least Tiny doesn’t break the snippet .
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.
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 )
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?
.
Ouch, I’m sorry I can’t help with that one.
)