Easy way to post pictures in FCKeditor + IMCE + Lightbox2

Drupal is very flexible, which is why I like it. Any problem can be solved in several ways.



Before me was the task - to make downloading and publishing pictures in the text easy and convenient.

I draw your attention to the fact that I am not going to create interactive galleries. I just want the user to be able to upload pictures through a convenient visual editor and just as convenient to publish them.



As an editor, I chose FCKeditor as the image uploader and IMCE file browser.

')

Now about the problem itself.

Imagine that you uploaded a picture to the server, created its thumbnail, and now you want to insert this thumbnail into your post. When clicking on it, the thumbnail should open the image in its original size using the Lightbox2 module.



To do it manually is inconvenient and long.

On the pages of drupal.ru I found a solution. The solution was to edit FCKeditor. So with each update, you would have to re-edit all these files.

So I decided to write my bike, small and not very flexible. But suitable for my site.

Decision

I am the most vehement who doesn’t like to write plugins - I like to do everything through page.tpl.php or to include my functions directly in index.php .



Okay, let's look at the html page code, and see what we have at the moment:

< img alt ="" height ="90" src ="/sites/default/files/img/2-27SP_vorn_small.jpg" width ="90" />



* This source code was highlighted with Source Code Highlighter .

we need to turn this code into something like this:

< a href ="/sites/default/files/img/2-27SP_vorn.jpg" >< img src ="/sites/default/files/img/2-27SP_vorn_small.jpg" alt ="" ></ a >



* This source code was highlighted with Source Code Highlighter .

Let's open our page.tpl.php (this is your theme file).

And write the very first line of our code:

if (strstr($content, 'src=' )){

}



* This source code was highlighted with Source Code Highlighter .

This line will tell us if there are any image elements on the page.

Next, we will write a script that changes the image on the image link that leads to the original.

$content = preg_replace( '#<img width=\"[0-9a-zA-Z ]*\" height=\"[0-9a-zA-Z ]*\" src=\"([a-zA-Z0-9\/_-]+)*(_small+)\.(jpg|gif|png+)\"([ a-zA-Z="-_.]+)*\/\>#' , "<a href=\"$1.$3\"><img src=\"$1$2.$3\" $4></a>" ,$content);



* This source code was highlighted with Source Code Highlighter .

+ Let's make sure that these changes do not take place on the pages of the visual editor. To do this, create the following condition:

if (!strstr($_SERVER[ 'REQUEST_URI' ], 'edit' ))



* This source code was highlighted with Source Code Highlighter .

As a result, we have such a script:

if (!strstr($_SERVER[ 'REQUEST_URI' ], 'edit' ))

{

if (strstr($content, "src=" ))

{

$content = preg_replace( '#<img width=\"[0-9a-zA-Z ]*\" height=\"[0-9a-zA-Z ]*\" src=\"([a-zA-Z0-9\/_-]+)*(_small+)\.(jpg|gif|png+)\"([ a-zA-Z="-_.]+)*\/\>#' , "<a href=\"$1.$3

\"><img src=\"$1$2.$3\" $4></a>" ,$content);

}

}



* This source code was highlighted with Source Code Highlighter .

Now this code can be safely inserted into the very beginning of the page.tpl.php file.

What have we got?

Now it is enough for any user to upload a picture, create a thumbnail with the _small suffix (it is created if you select the item at boot) and add this thumbnail to the node.

+ Add support for lightbox2

Go to the admin area, then to the Lightbox page.

Find the tab Automatic image handling .

Go to the item Custom Class Images .

Choose Lightbox, or, for example, Lightbox Groped and specify the name of the picture class.

By default is lb2. This and I advise you to leave.



We change our script so that the picture has this class.

if (!strstr($_SERVER[ 'REQUEST_URI' ], 'edit' ))

{

if (strstr($content, "src=" ))

{

$content = preg_replace( '#<img width=\"[0-9a-zA-Z ]*\" height=\"[0-9a-zA-Z ]*\" src=\"([a-zA-Z0-9\/_-]+)*(_small+)\.(jpg|gif|png+)\"([ a-zA-Z="-_.]+)*\/\>#' , "<a href=\"$1.$3

\"><img class=\"lb2\" src=\"$1$2.$3\" $4></a>" ,$content);

}

}



* This source code was highlighted with Source Code Highlighter .

All is ready!



Download full script [0.5 kb]



The result of the script (test site)