Tutorial


Allow members to upload images into blogs and other posts on your Dolphin website.

Many people and members get confused about how to actually add images to a blog post or any other post in Dolphin. The standard add image feature requires that you link to an image with the full web address or location. This causes a lot of confusion for those that are not too familiar with this, and it makes things a little more time-consuming. Because of this many people don't bother adding pictures to posts.

This Tiny Mce Editor plugin will allow your members to upload and add an image from their local computer, to a post fast and easy.


I have tested this plugin with both Dolphin 6.1x and 7.0x. Both versions work great.



I was first introduced to this Tiny Mce plugin by this post at Boonex Unity Forums by:
lancashiredates:
http://www.boonex.com/unity/lancashiredates

Here:
Image Upload for TinyMCE
http://www.boonex.com/unity/forums/topic/Image-Upload-for-TinyMCE.htm

Tiny MCE Phpimage Plugin:
http://sourceforge.net/tracker/?func=detail&aid=2844769&group_id=103281&atid=738747

Direct download:
http://sourceforge.net/tracker/download.php?group_id=103281&atid=738747&file_id=343283&aid=2844769

There were some similar ones available in the past, but they weren't as simple to set up and use for both you the admin and your members.

This one is very easy to setup and add to Dolphin 6.1x and Dolphin 7.0x. It only takes a few minutes.

First download the file above from sourceforge.net.

Unzip it to your local PC. Then, upload it to:
/plugins/tiny_mce/plugins/

So it would look like:
/plugins/tiny_mce/plugins/phpimage/

Not like:
/plugins/tiny_mce/plugins/phpimage/phpimage/


By default images that get uploaded will be stored in /uploads/images/. Note: You can change this location further down in this post if you wish. Don't change this unless you know what you are doing.

So you need to create the folders/directories in your hosting account:
/uploads/images/
(yoursite.com/uploads/images/)

Set the permission / chmod 777 or 755 depending on your hosts configuration for upload.

You will then need to edit one Dolphin file /templates/base/scripts/BxBaseConfig.php so make a backup of the file before editing it.

Then open /templates/base/scripts/BxBaseConfig.php and you will need to change the plugins: advimage to phpimage and image would become phpimage. There are several references for each of the tiny mce editors in this file so make sure you go through it thoroughly.



    tinyMCE_GZ.init({
        plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,directionality,fullscreen",
        themes : "advanced",
        languages : "en",
        disk_cache : true,
        debug : false
    });

    if (window.attachEvent)
        window.attachEvent( "onload", InitTiny );
    else
        window.addEventListener( "load", InitTiny, false);

    function InitTiny() {
        // Notice: The simple theme does not use all options some of them are limited to the advanced theme
        tinyMCE.init({
            convert_urls : false,
            mode : "specific_textareas",
            theme : "advanced",

            editor_selector : /(' . $sSelectors . ')/,

            plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,directionality,fullscreen",

            theme_advanced_buttons1_add : "fontselect,fontsizeselect",
            theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,image,separator,search,replace,separator",
            theme_advanced_buttons2_add : "separator,insertdate,inserttime,separator,forecolor,backcolor",
            theme_advanced_buttons3_add : "emotions",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",

            plugi2n_insertdate_dateFormat : "%Y-%m-%d",
            plugi2n_insertdate_timeFormat : "%H:%M:%S",           
            theme_advanced_resizing : false,
            theme_advanced_resize_horizontal : false,

            paste_use_dialog : false,
            paste_auto_cleanup_on_paste : true,
            paste_convert_headers_to_strong : false,
            paste_strip_class_attributes : "all",
            paste_remove_spans : false,
            paste_remove_styles : false
        });
    }
</script>




Change to:

    tinyMCE_GZ.init({
        plugins : "table,save,advhr,phpimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,directionality,fullscreen",
        themes : "advanced",
        languages : "en",
        disk_cache : true,
        debug : false
    });

    if (window.attachEvent)
        window.attachEvent( "onload", InitTiny );
    else
        window.addEventListener( "load", InitTiny, false);

    function InitTiny() {
        // Notice: The simple theme does not use all options some of them are limited to the advanced theme
        tinyMCE.init({
            convert_urls : false,
            mode : "specific_textareas",
            theme : "advanced",

            editor_selector : /(' . $sSelectors . ')/,

            plugins : "table,save,advhr,phpimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,directionality,fullscreen",

            theme_advanced_buttons1_add : "fontselect,fontsizeselect",
            theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,phpimage,separator,search,replace,separator",
            theme_advanced_buttons2_add : "separator,insertdate,inserttime,separator,forecolor,backcolor",
            theme_advanced_buttons3_add : "emotions",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",

            plugi2n_insertdate_dateFormat : "%Y-%m-%d",
            plugi2n_insertdate_timeFormat : "%H:%M:%S",           
            theme_advanced_resizing : false,
            theme_advanced_resize_horizontal : false,

            paste_use_dialog : false,
            paste_auto_cleanup_on_paste : true,
            paste_convert_headers_to_strong : false,
            paste_strip_class_attributes : "all",
            paste_remove_spans : false,
            paste_remove_styles : false
        });
    }
</script>


Continue going through the file for the other references changing advimage to phpimage and image to phpimage.

Save the changes to BxBaseConfig.php back to your hosting account.

Refresh your site a couple of times and try making a blog post.

You might also need to clear dolphin 7 cache to see the changes.

If you cannot get the original add image icon to disappear you can simply hide it by adding to BxBaseConfig.php:
theme_advanced_disable : "image",

So it would look like:
            plugins : "table,save,advhr,phpimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,directionality,fullscreen",

            theme_advanced_buttons1_add : "fontselect,fontsizeselect",
            theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,phpimage,separator,search,replace,separator",
            theme_advanced_buttons2_add : "separator,insertdate,inserttime,separator,forecolor,backcolor",
            theme_advanced_buttons3_add : "emotions",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",

            plugi2n_insertdate_dateFormat : "%Y-%m-%d",
            plugi2n_insertdate_timeFormat : "%H:%M:%S",           
            theme_advanced_resizing : false,
                    theme_advanced_resize_horizontal : false,
         
            theme_advanced_disable : "image",
                    paste_use_dialog : false,
            paste_auto_cleanup_on_paste : true,
            paste_convert_headers_to_strong : false,
            paste_strip_class_attributes : "all",
            paste_remove_spans : false,
            paste_remove_styles : false
        });
    }
</script>

This will hide the original icon in the editor and only the new add image with the uploader is available for use.

Here is a screen shot of the original tiny mce editor add image with Dolphin 7. As you can see you have to enter an actual Image URL:

Tiny MCE Original



Now here is a screen shot with the new image uploader: click on Insert/edit image.

Insert Edit Image




Now you can see all I have to do is simply browse for an image on my local PC like most other common uploaders:

Browse for image



Once I have selected an image on my local PC, I simply click the upload button and wait for it to upload.

Upload Image




Now it has been uploaded. You can also see that it was uploaded to /uploads/images/ :

Image Uploaded





Add an Image description and Title, then finally click the Insert Button to add it to my blog post:

Add description - title and insert it



And now it is added to the blog. Where I can continue with the blog like normal, center the picture up, add more pictures, whatever.

Image inserted into a blog




This final screen shot I modified the plugin slightly so people don't have to add an Image description or Title. I replaced this with instructions on how to upload and add an image. Anything you can do to help members figure things out is always a good idea. Not everyone is technical and understands how to do this. If you want to customize this plugin like this screen shot replace /plugins/tiny_mce/plugins/phpimage/image.php with this one that I have modified. If you want to customize it more open /image.php and make your changes.

Download this modified /image.php file for phpimage plugin.

Modified phpimage file




The drawbacks are:
1. If you have a lot of members posting and using this feature you want to make sure your hosting account has enough space to handle it.

2. If your member gets confused they could be uploading the same image 2, 3, or more times. If this happens it will consume even more space. Images will take the form of image.jpg, and if they upload a second time by mistake you get another named image_1.jpg, image_2.jpg, etc.

3. If a member accidentally hits backspaces the image disappears. If they re-upload it again you will end up with 2 images. Sort of wasting a little space if this happens often. Make sure your members know how to use it could help.

4. Non members, bots, crawlers, etc. could still find these images by directly entering the address into a web browser. If you do not want guests viewing them, drop a .htaccess file into the location where they are uploaded to (/uploads/.htaccess or /uploads/images/.htaccess) with a deny from all or similar command if your wish to prevent this.




Other - Customizing:


Possibly add .htaccess in the uploads folder if you don't want non members, bots, or crawlers finding them.


To change the location where the images get uploaded:

/uploads/images (this is the default location)

Open /plugins/tiny_mce/plugins/phpimage/config.php

Find:
$server_image_directory        = $_cur_dir.'/uploads/images'; 

Change to:
$server_image_directory        = $_cur_dir.'/your-folder/images';

Also find:
$url_image_directory            = '/uploads/images';

Change it to:
$url_image_directory            = '/your-folder/images';


It is also set to resize an uploaded image to 400px. If you want to change this open the same file and near the bottom change the 400 to your desired size.

Example:

image_y and conserving the original sizes ratio (default: false)
$handle->image_y                = 400;
// image_ratio_y if true, resize image, calculating image_y from image_x and conserving the original sizes ratio (default: false)
$handle->image_x                = 400;

Example changing to 320 px:

image_y and conserving the original sizes ratio (default: false)
$handle->image_y                = 320;
// image_ratio_y if true, resize image, calculating image_y from image_x and conserving the original sizes ratio (default: false)
$handle->image_x                = 320;


Supports:
png, jpg, gif, bmp


More complicated and complex customizing can be done by editing:
plugins/tiny_mce/plugins/phpimage/classes/class.upload.php
You can customize image format types, add watermarking, and much more.

 
Written By
Tutorial by: Jeremy LeSarge (AKA Ray)

I am the owner and administrator of DialMe.com. I write Tutorials for Boonex Dolphin as well as tips and resources surrounding website programming and development. I enjoy working with WordPress, SEO, and Web Hosting / Servers. I also maintain a WordPress Blog here on this site where you will find a variety of technology and webmaster resources.

Actions
Sponsored Links
Recommend