images inserted by editor to open in lightbox - best coding?

[Joe]

Hello friends, once again I have a question:

This is what I´m trying to achieve:

When a user inserts an image into a page via the editor (in this case CKEditor) I would like to set things up so that when the page is being viewed one sees a thumbnail of the image, being aligned left or right (excluding the other options). When clicked on, the image opens in a "lightbox", well actually with Magnific Popup .

I´m thinking of doing it as follows, but not so sure if this would be the cleanest approach...

1) hack \wire\modules\Process\ProcessPageEditImageSelect so it inserts a pre-defined size version of the image or alternatively a thumbnail created by the Thumbnails module?

 

Also I could change the code in this module to exclude unwanted alignment options and automatically choose "Link to Larger Version" - (which will later be transformed into the link to trigger the script)

 

I think the disadvantage would be that when updating to a future version of ProcessWire the code will be lost. I tried copying \ProcessPageEditImageSelect module to \site \modules to avoid this, but it doesn´t seem to work from there.

2) To wrap things up I am thinking of inserting the actual "popup"-code by replacing the "Link to Larger Version"-code with this. I would do this in the page´s template file, replacing it in $page->body;
 

I hope I have been able to get across what I´m trying to do. I´m pretty sure it will work like this, but maybe it´s more like a hack than clean coding, so I would appreciate your advice.

Joe

[adrian]

No need to hack anything. Check out Image Interceptor:

http://modules.processwire.com/modules/textformatter-image-interceptor/

That will take care of the resizing and can also add a class to the image that can be used to trigger a call to your lightbox script.

[Joe]

No need to hack anything. Check out Image Interceptor:

http://modules.processwire.com/modules/textformatter-image-interceptor/

That will take care of the resizing and can also add a class to the image that can be used to trigger a call to your lightbox script.

Thank you.

As you say, this does take care of resizing and adds a class needed to trigger the call to the script.

However it still does not solve the problem that I want the user to have only two choices for aligning the image when inserting it. (The Image-Interceptor can be set to either align the image left or right or "Alignment: inherit" - leaving the choice to the user when inserting the image, but there I want to eliminate "No Alignment" or "Align Center"  as they mess up the look of the page.)

Also, as the image will be shown as a pre-determined size "thumbnail" on the page it will be confusing to the users if after selecting an image they are asked to set a width and height and see a "Link to Larger Version?" check box (as that will be taken care of automatically by the lightbox script).

To reduce the alignment options and eliminate the fields for setting dimensions and the check box "Link to Larger Version?" I still can only come up with the solution of "hacking" \wire\modules\Process\ProcessPageEditImageSelect (which will be overwritten when updating ProcessWire).

In the page´s template file I would put php code to extract the URL part for the full sized image´s URL (for the lightbox script link) from the inserted thumbnail´s URL (re-writing $page->body;) - but I suppose that´s the best approach.

[Martijn Geerts]

<joe>However it still does not solve the problem that I want the user to have only two choices for aligning the image when inserting it. (The Image-Interceptor can be set to either align the image left or right or "Alignment: inherit" - leaving the choice to the user when inserting the image, but there I want to eliminate "No Alignment" or "Align Center"  as they mess up the look of the page.</joe>

You can chose No-Alignment, then align_no_align class is added to the image. Beware that Images are inline elements ! You have to do the CSS by your self.

if "Link to Larger Version?" is checked, there will be a link to a larger version. Don't know what is confusing about that. And you can't always "lightbox" all images by default.

ps, for your "hacking", consider styling  ( read display: none ) to alignment options

[Joe]

@ Martijn Geerts:

Thank you. Your module seems really useful. But for this particular situation it doesn´t do everything I want. So I reverted to my original idea and changed \wire\modules\Process\ProcessPageEditImageSelect - Now it automatically inserts a small image size (not a visible choice anymore), the user can only add text for the alt-tag and choose between aligning left or right. In the page´s template file the body content is then re-written so the proper class is added to trigger the "lightbox".

<Martijn Geerts>And you can't always "lightbox" all images by default.</Martijn Geerts>

Why not? That´s exactly what I did here (for the CKEditor editable main content area). Seems to be working well. The Magnific Popup script sees to it that the image is displayed in the right size for the screen and apparently has an option so it doesn´t get displayed in a "lightbox" on smart phone screens (I have to try this yet).

_______________

So this seems to be working well for me. The only thing I have not figured out yet is if it is possible to use a module like \Process\ProcessPageEditImageSelect from site/modules instead of wire/modules. When I tried it it didn´t work. I´m not really familiar with how PW uses the modules in site/ vs. in /wire. (This would be to save the module from being overwritten when updating PW)

[Martijn Geerts]

<joe>

Why not?

</joe>

- Say you have a company logo, and it's linked to the company site.

- The original is the same size as the thumb. ( You can prevent that with Soma's min size Module )

[Joe]

- Say you have a company logo, and it's linked to the company site.

- The original is the same size as the thumb. ( You can prevent that with Soma's min size Module )

// The page´s template file looks like this:

include("./head.inc");                             //  first part of page, the logo is there

$changed_content = $page->body;   //  body is the the main content field created with CKEditor

// this is were I insert the lightbox trigger (class="image-link") into the "link to a larger image" ( ... = placeholder) :

$changed_content = str_replace("<a href=\"/.../site/assets/files/", "<a class=\"image-link\" href=\"/.../site/assets/files/", $changed_content);

echo $changed_content;                // echo the changed body content, were the images to be "lightboxed" are

include("./foot.inc");                       // the rest of the page

P.S.: But for now I´ve decided to do the current site I´m doing without the lightbox feature after all, unless the client insists on it. For maximum compatibility to everything, especially mobile devices this seems the cleanest approach, basically the lightbox is just eye candy...

[ryan]

The only thing I have not figured out yet is if it is possible to use a module like\Process\ProcessPageEditImageSelect from site/modules instead of wire/modules. When I tried it it didn´t work. I´m not really familiar with how PWuses the modules in site/ vs. in /wire. (This would be to save the module from being overwritten when updating PW)

You can copy the entire ProcessPageEditImageSelect module to your own directory in /site/modules/, but make sure you rename it to something of your own, like ProcessPageEditImageSelectCustom (or whatever you want). You'll have to rename not only the files, but the class name in the module file as well. Modify the module as you'd like, then in your admin:

1. Install your new module from the Modules menu. 

2. Go to Pages > Admin > Page > Image Select. Edit that page, and select our new module as the "process" rather than ProcessPageEditImageSelect. 

[Joe]

Thank you for your help, ryan!

I hadn´t realized that I would have to rename the module tor run in /site/modules/, that´s why it didn´t work from there.

Great work the whole CMS, I like it a lot!

[Can]

I know it's quite old but I think it's nice for later readers.

Since PW 2.5.14 it's possible to have multiple copies of the same module. For example just copy the desired core module, in this case ProcessPageEditImageSelect, to /site/modules/ and choose in /example.com/processwire/module/ which to use.

More details in the blog post Processwire core updates 2.5.14