Log in | Register | Lost password

Bottom
Upload images (and use them right away) for htmlArea
  • Posted: 26.08.2005, 08:44
     
    Converted
    rank:
    12
    registered:
     March 2009
    Status:
    offline
    last visit:
    Posts:
    0
    I ran into a problem: htmlArea lets you insert images, but you can only insert images that were previously uploaded somewhere. You can use Pagesetter fields for images, but they are numbered, and then you can't place the images anywhere in your HTML document.

    I've developed this simple patch that will allow you to upload any image by clicking the image icon in htmlArea, have a preview, and insert it in your document as you'd do with external images (which you can still use, too). Here is it, courtesy of Afina Sistemas.

    This works by uploading the file to a directory configured in the script (instructions below). Images are given a random name and will stay there forever. In a few months I'll develop a maintenance utility to scan documents and remove orphan images.

    Quote


    UPLOAD IMAGES FOR HTMLAREA
    ==========================

    Purpose: To be able to upload an image when inserting images in htmlArea. Without this hack, only previously uploaded files could be used. Now it's possible to upload a file, preview it, and use it in htmlArea right away.

    Verified for version: Pagesetter 6.0.1, htmlArea 3.0 beta

    Install: Copy the file insert_image.php into modules/pagesetter/guppy/HTMLArea30beta/popups . Configure it by editing some variables at the top of the file (documented within it). Note that the default configuration will probably not work. A directory with proper permissions should be created for images to be uploaded. Finally, apply the following patch, replacing a parameter pointing to insert_image.html by the PHP file:

    Edit file: modules/pagesetter/guppy/HTMLArea30beta/htmlarea.js
    [...]

    // Called when the user clicks on "InsertImage" button. If an image is already
    // there, it will just modify it's properties.
    HTMLArea.prototype._insertImage = function(image) {
    var editor = this; // for nested functions
    var outparam = null;
    if (typeof image == "undefined") {
    image = this.getParentElement();
    if (image && !/^img$/i.test(image.tagName))
    image = null;
    }
    if (image) outparam = {
    f_url : HTMLArea.is_ie ? editor.stripBaseURL(image.src) : image.getAttribute("src"),
    f_alt : image.alt,
    f_border : image.border,
    f_align : image.align,
    f_vert : image.vspace,
    f_horiz : image.hspace
    };

    //BEGIN UPLOAD IMAGES FOR HTMLAREA
    this._popupDialog("insert_image.php", function(param) {
    //END UPLOAD IMAGES FOR HTMLAREA


    if (!param) { // user must have pressed Cancel
    return false;
    }
    var img = image;

    [...]


    And here's the insert_image.php file:

    http://web.madritel.es/personales1/cmpm/pagesetter/insert_image.php

    [Editado el 26/8/2005 por Wiseman]
  • Posted: 29.08.2005, 02:06
     
    Converted
    rank:
    12
    registered:
     March 2009
    Status:
    offline
    last visit:
    Posts:
    0
    Thats wonderful !Thank you for your posting! The best thing it works also with Xinha! I have tried to do something similar without success (see this thread: http://www.elfisk.dk/modules.php?op=modload&name=XForum&file=viewthread&tid=2173 )
    Anyway you showed me one way to to it! Sometimes you need a wise man if you are in troubles ;)
  • Posted: 29.08.2005, 11:51
     
    Converted
    rank:
    12
    registered:
     March 2009
    Status:
    offline
    last visit:
    Posts:
    0
    Nice work

    Got several questions :

    Does this automatically create a thumbnail as well ?

    How is this different from the "extended file manager plugin" / release from unixace found here:
    http://www.elfi…hread&tid=2109
  • Posted: 02.09.2005, 08:45
     
    Converted
    rank:
    12
    registered:
     March 2009
    Status:
    offline
    last visit:
    Posts:
    0
    IRT Kankan: Thanks! I'm glad it's been useful.

    IRT Moremojo: Nope, it doesn't create a clickable thumbnail; it simply inserts the image as you would insert an external image with the image button. It's exactly the same dialog you get when you click on the image button (allowing you to specify URL and alignment, and showing a preview of the pic), only you can either use an URL, or click Browse and use a file from your hard disk, which is automatically uploaded for you. You can see a preview in the window, and when you click Ok, it's inserted into your HTML as a regular image.

    I don't know how it'd compare with the extended file manager plugin, to tell you the truth I didn't know of it ^_^.

Template courtesy of Designs By Darren.