Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

In admin: add wysiwyg to textarea and create yes/no select list

edited February 2013 in Documentation

I'm trying to copy the way, e.g. blogs or events do these, but I can't seem to get either one right. Any pointers?



  • Here's how you can include the wysiwyg editor:

    The editor by default adds itself to a textarea with id="webpage-body", although you can specify a different one like this:

    {! admin/util/wysiwyg?field_id=my-field !}

    And here's an example yes/no select box:

  • Thank you! How about image and file upload fields?

  • For admin-facing forms, here's what I'd do for images:

    And similarly for any type of file:

    (note: make sure you're on the latest master branch for these :)

    I'm still working on the documentation for helpers like {! admin/util/wysiwyg !} and {! filemanager/util/browser !} but for now there is some info in the files themselves on how to use them:

  • Thank you again. I'm really enjoying working with elefant so far.

    I have another question but I will start a new thread for it.

  • Glad you're enjoying it :)

  • OK, that's all working. I tweaked the image preview so that it would show the selected image if the form reloaded because of an error:

        {"Preview"}:<br />
        <img src="{% if image != '' %}{{ image }}{% else %}/apps/admin/css/admin/spacer.png{% endif %}" id="preview" />

    I'm wondering about refinements:

    • It would be great to allow multiple images and documents for each property.
    • It would be great to save the images and documents in a folder specific to the property.

    You've been so helpful and I really appreciate your time and don't want to impose more than I already have done and will do with other questions. However, if you have any suggestions as to how to go about those I'm all ears.

  • Other nice-tos:

    • Size images on upload.
    • Select uploaded image automatically instead of requiring user to click on it.
  • Thinking about the multiple images and files some more... The uploader allows multiple uploads, but I don't think it allows multiple selections. Not sure what the best approach is -- maybe a link to the file manager and somehow auto-create a folder for the current property?

    In my home-made CMS I used related tables, but I'm not sure how well that would work with elefant.

  • Thanks for all the suggestions, this definitely got me thinking! I broke things down by point to keep organized :) Here we go:

    • I've added an issue on Github to auto-select an image/file after upload. Good suggestion!
    • I think we should keep resizing out of the scope of the dialog window, although there are two things you can do for image resizing currently:
      • Use Image::resize($file, $width, $height) to resize programmatically. This is found in apps/filemanager/lib. You can even use it as a filter in a template via {{my_image|Image::resize (%s, 50, 30)}}.
      • If you add an key to apps/filemanager/conf/config.php, you can use their image editor on any image in Elefant.
    • To save images/files to a folder specific to that property, you could have the backend auto-create a folder, say /files/properties/$id/ for each property and move or duplicate the files there when the properties form is submitted.
    • Adding multiple file selection to the dialog seems like opening a can of worms usability-wise, so I'm holding off on that, but below is a workaround to that. For cases where the images would need associated data (caption, etc.), a related table would be best, but for simple cases this could work.

    First I created a quick CRUD app with the command:

    ./elefant crud-app listing id name description images

    Then I tweaked the schema to lengthen the fields:

    create table listings (
        id integer primary key, 
        name char(48) not null, 
        description char(128) not null, 
        images text not null 

    And here's my modified apps/listings/views/add.html with a possible multi-file solution:

    The Javascript and CSS ought to be moved to separate files and included here and in the edit form to avoid duplicate code, but otherwise it seems to work pretty well.

  • This looks great! Investigating now...

  • I was playing with this idea a bit more and thought it could be made into more reusable components, so I just added filemanager/util/multi-file and filemanager/util/multi-image helpers to the master branch:

    The comments in both of the handlers have usage examples, and here's a working demo as well:

    Let me know what you think!

  • Forgive the noob question, but how do I pull those helpers into my build of elefant? I can do it manually but I guess there's probably a slicker way.

  • Right now you'll either need to be using git to clone the master repository (or fork it on Github, then you can pull new changes into your copy and keep a history of your own changes too), or download the files individually if you're not using git.

    We're close to a new beta release that will include all this stuff, but there are a couple things left to finish up before then.

  • OK, I started over with git; trying the handlers now...

  • Still playing; looks good so far. With the auto-select, will it be possible to auto-select all the files uploaded, if more than one are uploaded at a time? That would make the lack of ability to choose multiple less of an issue.

    Are there filemanager utilities to move files/create directories or should I just do that in straight php?

    Thinking about the caption issue... The file manager has an option to add a description to an image. How is that stored?

  • Is it possible to preselect the filebrowser's path? Something like {! filemanager/util/multi-file?path=/files/properties !}or even {! filemanager/util/multi-file?path=/files/properties/data->id !}

  • Nice-to: I like the way you can click on the image to remove it. Could the cursor change to an X or similar, possibly red or purple to match the file-multi X, to make it clear that clicking will remove the image?

  • I would like to move the files to files/properties/property_name. Is there a "convert text to safe to use as file name" function already defined?

  • Here's one if not.

    function clean_image_name($name, $link_separator="-") {
        $name = preg_replace("/[&;'\"[\],<>?\/+!@#$%^*()[:space:]]+/", $link_separator, $name); // can't just do :punct: because we need the .
        $name = preg_replace("/".$link_separator."{2,}/", $link_separator, $name); // "--" -> "-"
        $name = str_replace("$link_separator.", ".", $name); // "-." -> '.'
        return strtolower($name);
  • edited February 2013

    OK, so I got the images moved to their own folders and I would like to show a gallery for each property. Is it possible to do something like this? {! filemanager/gallery?path=properties/{{ name|none }}&order=desc&desc=yes&style=embedded !} I'm having trouble getting it to parse correctly. That turns into this: <?php echo $this->controller->run ('filemanager/gallery', array ('path' => 'properties/<?php echo $data->name;?>', 'order' => 'desc', 'desc' => 'yes', 'style' => 'embedded')); ?

  • Also, is it possible to turn off the popup in the embedded gallery and just have it update the large image?

  • Back to the multi-image field: It would be great if there was some way to let the user sort it. I added a single image "Main image" field above it, but that wouldn't be necessary if they could drag the images around. The trick in either case will be telling the gallery what order the user has chosen, since it goes by directory contents not db info.

  • I investigated the file manager's properties field some more. It's stored in the db in its own table. Would it make sense to query and update it from the listings app? (For use as captions.)

  • I've added the auto-selection for single-file uploads, as well as remembering your previous path when reopening the dialog, so that should help reduce the friction of choosing multiple files a bit.

    I also added a path option to the $.multi_*() options, so you can start them off in a specific folder now too. Paths omit the /files/ prefix, so /files/design would just be design. For example:

    $(function () {
        $('#browse').click (function () {
            $.multi_image ({
                field: '#images',
                preview: '#images-preview',
                path: 'design'

    Sorting the images/files is a good idea. I think we can add that via drag and drop to the multi-file/image preview box.

    For showing an X to say "Click to remove", I tried adding a CSS :after block that would hover the "Click to remove" text, but couldn't get it showing here for some reason. I'll have to play with changing the cursor instead. For now, the title text does show "Click to remove" but that always takes a second or two to appear.

    And to answer your question about the gallery paths, here's the syntax you're looking for:

    {! filemanager/gallery?path=[name|none]&order=desc&desc=yes&style=embedded !}

    Except you'll need to include the full path in the name value, because sub-expressions in includes only match the whole property value. It looks for the [ and ] characters at the very start and end of the value, otherwise it takes it as an ordinary expression.

  • Doesn't the sorting conflict with the "Click to remove"? Or is there a clever way to get both?

    Thanks for the path option; works nicely.

  • Haven't played with adding drag/drop yet so it might have issues, but I think there are workarounds to get it working nicely.

  • Sorting the Images would be awesome. I don't know if it's possible, but what do you think about, organizing the files similar to the Navigation admin menu. There could be an edit and an delete button on the draggables, similar to the Folder Icon on the navigationadmin.. Edit for renaming and editing Description. Then all the Files would be on one Screen... What do you think about this?

  • Question about Image::resize: what do styles cover, stretch, and contain mean? Which would I use if I want to resize a 2000x1500 image to 640x480, but I don't want to pixellate a 400x300 one?

  • If the original images doesn't have the same ratio as the resized image there are three options to deal with it. Cover and contain keep the ratio and work similar to the CSS property: background-size ( stretch doesn't maintain the ratio and distorts the image.

    Cheers betaman

  • Thanks. What's the difference between cover and contain?

Sign In or Register to comment.