Home > Plugins > Entry Image

Entry Image

July 25, 2008Mike36 comments
entry_image_insert_image.pngThe Entry Image plugin allows you to assign an image asset to serve as a representation for an entry. It was originally created to make the effect that I have going on with my themes blog a lot easier to maintain from the Movable Type CMS. To see a possibility of what you can do with it, in this case, with the JQuery plugin Galleria, take a look at my themes blog. It's a good way to help you get started with setting up a photo blog based on Movable Type. It provides a dialog for selecting an image to represent your entry, as well as a number of template tags that are based off the ones for assets.

Tags:

  • <MTEntryImageIfNoImage> - A conditional tag that allows you to handle cases where an entry may not have an entry associated with it.
  • <$MTEntryImageOwner$> - Returns the name or nickname of the person who owns the asset on display.
  • <$MTEntryImageFileExt$> - Returns the file extension of the asset.
  • <$MTEntryImageID$> - Returns the database ID number of the asset.
  • <$MTEntryImageLabel$> - Returns the label.
  • <$MTEntryImageCreateDate$> - Returns the date that the asset was added to Movable Type's repository.
  • <$MTEntryImageDescription$> - Returns the asset description.
  • <$MTEntryImageThumbnail$> - Returns HTML that represents a thumbnail of the image based on the asset (does not use a separate thumbnail image).
  • <$MTEntryImageFileName$> - Returns the asset's file name.
  • <$MTEntryImageURL$> - Returns the full URL to the asset.

An example of some of the syntax from my theme blog:

<ul>
<mt:Entries lastn="25" tag="theme" sort="1">
    <mt:EntryImageIfNoImage>
        <!--Continue-->
    <mt:Else>
    <li<mt:if name="__first__"> class="active"</mt:if>>
          <img src="<mt:EntryImageURL>"
           alt="<mt:EntryImageLabel>"
           title="<mt:EntryImageLabel>" />
       </li>
    </mt:Else>
</mt:Entries>
</ul>
**NOTE**: As of version 1.0, the only images that this will load in the dialog box are ones that have been tagged as "entry image."

UPDATES:
  • 8/15/2008 12PM: I discovered a bug in the callbacks which prevent it from maintaining the hidden form element that holds the entry image ID when one inserts an asset onto the page. Bug is fixed locally, and I will be uploading a fixed copy shortly.
  • 8/15/2008 7:48PM: The problem should be fixed now. Download version 1.0.1 and give it a try.

Download 1.0.1


If you like this work, please consider rattling the ol' tip jar!



This is where the icon that launches the dialog box sits:

Thumbnail image for Entry Image icon location screenshot
Categories: PluginsTags:
  1. August 12, 2008 at 16:32 | #1

    Hey Mike,

    I'm having some trouble getting this plugin to work. The dialogue box that comes up displays no images. I'm running 4.12 with the enterprise pack and professional pack.

    Thanks,
    Will

  2. August 12, 2008 at 16:56 | #1

    Nevermind, I'm an idiot, just saw the note about tagging.

  3. August 12, 2008 at 21:14 | #1

    If you encounter any bugs, please let me know.

  4. August 14, 2008 at 08:00 | #1

    Hello,

    I've installed this plugin on MTOS-4.2 and tagged an image with 'entry image' as a test. However, I can't see how to add an image to an entry from the Edit Entry form. How do I get the new dialog to appear?

    Thanks
    Jim

  5. August 14, 2008 at 08:09 | #1

    Could you be a bit more specific about what's going wrong? From the sound of it, you're expecting the image to just appear in your entry, which is not what this plugin is designed for. It's designed to allow you to associate an image with an entry, such as if you wanted to designate a picture to be a thumbnail image that represent a photoblog entry. In order for it to appear in your entry, you need to use the template tags used above. If you just want the image to appear in your entry without modification, I'd recommend you use the image asset button that's a normal part of the editor because that's what'll do that for you.

    Let me know if this helps.

  6. August 14, 2008 at 08:19 | #1

    Okay, what I'm wondering is how do I associate a particular image to be the thumbnail for a particular entry. Your screenshot above has a dialog appearing on the Edit Entry form, with a list of available images, but I don't see how to bring that dialog up from the editting interface.

    I can see a callback to addToEntryEditor() in the perl, but can't see anything new/different on the Edit Entry form.

  7. August 14, 2008 at 08:41 | #1

    Hello again,

    I've found the problem at my end - a typo in the static file path. Everything seems to be working now.

  8. August 14, 2008 at 09:06 | #1

    Could you post the typo in case it's something I need to address?

  9. August 14, 2008 at 09:40 | #1

    Sorry, I'd mis-typed the static file path in mt-config.cgi

    Your code is working fine on my install of MTOS.

  10. August 14, 2008 at 10:41 | #1

    By the way, if anyone else uses the YUI editor plugin, I'm working on adding your toolbar button to that editor.

    Adding the following code to config.js for the YUI editor adds a new 'entry thumbnail' button to the insert item group on the editor toolbar.


    function afterYUIInit() {

    var YUIEditor = app.editor.myEditor;

    YUIEditor.toolbar.addButtonToGroup({ type: 'push', label: 'Attach a thumbnail to this entry', value: 'entryimage' }, 'insertitem');

    YUIEditor.toolbar.on('entryimageClick', function() {

    var div = DOM.getElement( "editor-content-enclosure" );

    app.openDialog( "__mode=show_entry_photo_dialog&blog_id=" + div.getAttribute( "mt:blog-id" ) + "&dialog_view=1" );

    }, this, true);

    };

  11. August 14, 2008 at 12:39 | #1

    Use something other than JQuery? Heresy!

    Thanks for the suggestion, in case anyone needs it it'll be helpful.

  12. September 15, 2008 at 23:25 | #1

    I logged into mt.cgi after copying the directories to the appropriate places and it says it installed the plugin successfully, but I don't see any place to call up the dialog to associate an entry with an image in the entry screen.

    Also, I don't see the plugin in the plugin list.

    I have Movable Type 4.21

  13. September 16, 2008 at 08:27 | #1

    A screenshot that should help you out has been posted above. You might want to download version 1.0.1 again to fix an issue with the icon's label.

  14. September 17, 2008 at 18:07 | #1

    Thanks man!

    Sorry, I just didn't look hard enough for the icon I guess. It was there all along.

  15. November 10, 2008 at 09:47 | #1

    Hi, I have installed this great widget in two of my installations already. But, I can't seem to get it working on a third install. I have MT 4.21 en. I am unable to see the icon on the toolbar. There is a placeholder for it and when I click on that it takes me to the dialog box where I can associate the image to the entry. But, I can't preview or click continue. Acutally early on I could click continue but got a foo error.

    Here are the links to the screenshots and my system settings. Any help would be greatly appreciated as my deadline is coming up fast.

    Thanks

    http://www.juanito.com/images/unable_to_see_entry_image_icon.png

    http://www.juanito.com/images/image_dialog.png

    System Information
    Movable Type version: 4.21-en
    Current working directory: /home/pan/MT
    MT home directory: /home/pan/MT/
    Operating system: linux
    Perl version: 5.8.8
    Perl include path:
    plugins/StyleCatcher/lib
    plugins/Textile/lib
    plugins/spamlookup/lib
    plugins/WXRImporter/lib
    plugins/WidgetManager/lib
    plugins/MultiBlog/lib
    plugins/TypePadAntiSpam/lib
    /home/dspan08/MT/extlib
    /home/dspan08/MT/extlib
    /home/dspan08/MT/lib
    /usr/lib/perl5/5.8.8/i586-linux-thread-multi
    /usr/lib/perl5/5.8.8
    /usr/lib/perl5/site_perl/5.8.8/i586-linux-thread-multi
    /usr/lib/perl5/site_perl/5.8.8
    /usr/lib/perl5/site_perl
    /usr/lib/perl5/vendor_perl/5.8.8/i586-linux-thread-multi
    /usr/lib/perl5/vendor_perl/5.8.8
    /usr/lib/perl5/vendor_perl
    .
    Web server: Apache/2.2.0 (Linux/SUSE)
    (Probably) Running under cgiwrap or suexec
    Checking for Required Modules
    CGI::Cookie
    Your server has CGI::Cookie installed (version 1.20).

    File::Spec (version>= 0.8)
    Your server has File::Spec installed (version 3.12).

    Image::Size
    Your server has Image::Size installed (version 2.93).

    CGI
    Your server has CGI installed (version 2.80).

    Checking for Data Storage Modules
    Some of the following modules are required by the various data storage options in Movable Type. In order run the system, your server needs to have DBI and at least one of the other modules installed.

    DBI (version>= 1.21)
    Your server has DBI installed (version 1.50).

    DBD::mysql
    Your server has DBD::mysql installed (version 3.0002).

    DBD::SQLite
    Your server has DBD::SQLite installed (version 1.11).

    DBD::Pg (version>= 1.32)
    Either your server does not have DBD::Pg installed, the version that is installed is too old, or DBD::Pg requires another module that is not installed. The DBD::Pg database driver is required to use PostgreSQL Database. Please consult the installation instructions for help in installing DBD::Pg.

    DBD::SQLite2
    Your server does not have DBD::SQLite2 installed, or DBD::SQLite2 requires another module that is not installed. The DBD::SQLite2 database driver is required to use SQLite Database (v2). Please consult the installation instructions for help in installing DBD::SQLite2.

    Checking for Optional Modules
    The following modules are optional. If your server does not have these modules installed, you only need to install them if you require the functionality that the module provides.

    Scalar::Util
    Your server has Scalar::Util installed (version 1.18).

    Crypt::DSA
    Your server does not have Crypt::DSA installed, or Crypt::DSA requires another module that is not installed. This module accelerates comment registration sign-ins. Please consult the installation instructions for help in installing Crypt::DSA.

    XML::SAX
    Your server has XML::SAX installed (version 0.13).

    Archive::Zip
    Your server does not have Archive::Zip installed, or Archive::Zip requires another module that is not installed. This module is required in order to archive files in backup/restore operation. Please consult the installation instructions for help in installing Archive::Zip.

    Storable
    Your server has Storable installed (version 2.15).

    SOAP::Lite (version>= 0.5)
    Your server has SOAP::Lite installed (version 0.52).

    List::Util
    Your server has List::Util installed (version 1.18).

    HTML::Entities
    Your server has HTML::Entities installed (version 1.32).

    Text::Balanced
    Your server has Text::Balanced installed (version 1.95).

    Digest::MD5
    Your server has Digest::MD5 installed (version 2.36).

    GD
    Your server has GD installed (version 2.30).

    Archive::Tar
    Your server does not have Archive::Tar installed, or Archive::Tar requires another module that is not installed. This module is required in order to archive files in backup/restore operation. Please consult the installation instructions for help in installing Archive::Tar.

    Safe
    Your server has Safe installed (version 2.12).

    IO::Uncompress::Gunzip
    Your server does not have IO::Uncompress::Gunzip installed, or IO::Uncompress::Gunzip requires another module that is not installed. This module is required in order to decompress files in backup/restore operation. Please consult the installation instructions for help in installing IO::Uncompress::Gunzip.

    Digest::SHA1
    Your server has Digest::SHA1 installed (version 2.10).

    IO::Compress::Gzip
    Your server does not have IO::Compress::Gzip installed, or IO::Compress::Gzip requires another module that is not installed. This module is required in order to compress files in backup/restore operation. Please consult the installation instructions for help in installing IO::Compress::Gzip.

    Image::Magick
    Your server does not have Image::Magick installed, or Image::Magick requires another module that is not installed. This module is needed if you would like to be able to create thumbnails of uploaded images. Please consult the installation instructions for help in installing Image::Magick.

    XML::Atom
    Your server has XML::Atom installed (version 0.25).

    LWP::UserAgent
    Your server has LWP::UserAgent installed (version 2.001).

    MIME::Base64
    Your server has MIME::Base64 installed (version 3.07).

    Mail::Sendmail
    Your server does not have Mail::Sendmail installed, or Mail::Sendmail requires another module that is not installed. This module is required for sending mail via SMTP Server. Please consult the installation instructions for help in installing Mail::Sendmail.

    File::Temp
    Your server has File::Temp installed (version 0.12).

    Movable Type System Check Successful
    You're ready to go! Your server has all of the required modules installed; you do not need to perform any additional module installations. Continue with the installation instructions.

  16. November 10, 2008 at 09:49 | #1

    Here are the actual directories:

    Current working directory: /home/dspan08/MT
    MT home directory: /home/dspan08/MT/

  17. November 10, 2008 at 10:47 | #1

    It would appear that you don't have the files installed in mt-static/plugins. There is a mt-static/plugins directory that is included in the zip file that has some javascript and images in it. That EntryImage directory needs to be put under mt-static/plugins on your new installation (an understandable oversight if it happened).

    Could you open up the Firefox JavaScript console, clear it out, reload the dialog and report any errors that you get when you click on the continue button?

  18. November 10, 2008 at 17:23 | #1

    Hi yes, that is what it appears but I have gone over the steps of copying the right files into the plugins and mt-static/plugins folders several times. I even went over each file carefully and applied all the permissions (777) to all folders and files. I do have this set up correctly in another hosted site and only my localhost so I am familiar with the install.

    I am going to try the Firefox javascript console later tonight. I only have access to IE during the day (don't ask). I guess you open the console from tools> options? Thanks

  19. November 10, 2008 at 18:07 | #1

    Tools->Error Console. Make sure you clear it out first before opening the dialog, as you'll probably have hundreds of error messages in there from other websites.

  20. November 10, 2008 at 20:54 | #1

    Here are the error messages I receive when creating an entry, selecting the place holder for entry image dialog icon, selecting image from list, click continue, view page with foo error, click go back, select different image, click continue again, click cancel.

    Suggestions?

    Thanks

    http://juanito.com/images/errorconsole_messages.png

  21. November 10, 2008 at 21:07 | #1

    $(document).ready is a jQuery function call. What this means is that jquery.js has not been imported into that dialog. Check your static folder for EntryImage and see if jquery.js is in there, and then do a view source on the dialog to see if the path to it in the top of the page is correct.

  22. November 11, 2008 at 14:40 | #1

    I got it. Here was the problem, the webmaster put the mt-static folder in a different location than under the MT root (for some odd paranoia reason). I copied all the files in that folder and it worked. Thanks for making the tool available, it rocks!

  23. November 17, 2008 at 14:19 | #1

    I had to change the search/replace string in EntryImage.pl (line 282) since the Edit Entry screen in 4.21 doesn't have that text to replace - though the Create Entry does have it.

    this code is better since works in BOTH Create Entry and Edit Entry:

    my ($author_id) = $$template =~ //g;

    Secondly, anyone get this to work with the FCK Editor GUI editor plugin? I see someone commented that they got the YUI Editor to work in MT. I'm not sure how to add these 2 buttons to FCK Editor. Any help is greatly appreciated!

  24. November 17, 2008 at 14:23 | #1

    looks like it snipped my code due to < and >.

    let me try placing it within the code tag:

    my ($author_id) = $$template =~ /<input type=\"hidden\" name=\"blog_id\" value=\"[\d]+\" id=\"blog-id\" \/>/g;

    and to be double safe, I will also replace the less than sign and the greater than sign.

    Replace ( with < and replace ) with >

    my ($author_id) = $$template =~ /(input type=\"hidden\" name=\"blog_id\" value=\"[\d]+\" id=\"blog-id\" \/)/g;

  25. November 19, 2008 at 12:42 | #1

    Update: Got the ability to associate an image with an entry to work within FCK Editor.

    I had to replace the FCKEditor InsertFile function, so you lose the ability to upload a file from within FCK Editor toolbar. But can just use the Insert Image button anyway to insert an image or a file.

    Edit the file here: /mt-static/plugins/FCKeditor/js/fck_editor.js

    Change to:
    insertFile: function() {
    var div = DOM.getElement( "editor-content-enclosure" );
    app.openDialog( "__mode=show_entry_photo_dialog&blog_id=" + div.getAttribute( "mt:blog-id" ) + "&dialog_view=1" );
    },

    I would use this plugin regularly, but I have 7000+ entries, so I can see the image selection tool becoming unwieldy using jquery.js as the GUI. Would take too long to scroll to find an image. It doesn't support searching like MT's default Asset tool. It might be a little better if jsquerty sorted images by date added instead of alphabetically. However, I might use the same image from a year ago in a new entry, so I'd still have to scroll through a year's worth of images.

    Nevertheless, a cool plugin. It has some potential.

  26. November 19, 2008 at 13:40 | #1

    Is there a way to change the directory that Entry Image accesses for the images?

    I have a MT blog that is feeding into another MT blog. I want to store all my images in the Superior MT blog, but write entries in both.

    Thoughts?

  27. November 19, 2008 at 15:53 | #1

    You do know that by default, it will only load assets that have been tagged as "entry image," right? Your criticism is sound, but I'm not sure if it took that into consideration.

  28. November 19, 2008 at 15:57 | #1

    Off the top of my head, I would say that your primary problem is going to be getting your inferior blog to link its assets to the superior blog's asset list. This plugin is actually just a link between the asset table and the entry table, so that you can associate an asset record with an entry record via a field on the entry table. If you can link up the assets between the two blogs, you should be good to go. Does that answer your question?

  29. November 19, 2008 at 17:53 | #1

    yes, in everything except how to do it.

    Where might I find out how to get my inferior blog to look at my superior blog's assets?

    BTW-EXCELLENT plugin

  30. November 19, 2008 at 18:54 | #1

    Hehe, that's the $64K question.

    I don't know how you're doing it with entries, but for assets, it would probably take another plugin, and that might actually be difficult. See, here's the thing. The asset table stores the asset path and url information relative to the blog that it's hosted from. MT takes some of that information, rebuilds it, and voi la, you have the real path and URL. It does that through some string substitution work.

    Honestly, I think it could be done, but it would be a pain in the butt to get right because you would have to account for some of the assumptions made about how assets should behave which go against how you want them to behave in this case.

  31. January 30, 2009 at 07:38 | #1

    This plug in is not working for me when it is used in IE. The Continue button is not appearing in the Entry Image folder this created, which means the user is locked. The plug in does work in Firefox. Any help in how to fix this would be much appreciated.

  32. January 30, 2009 at 08:22 | #1

    What version of IE are you using? I have 8.0 RC1 on this computer and the continue button works for me.

  33. February 23, 2009 at 15:40 | #1

    Does this work with Dynamic publishing? When I turn that on I get the following Smarty Error for your code:

    Smarty error: [in mt:39 line 76]: syntax error: unrecognized tag 'mtentryimageifnoimage' (Smarty_Compiler.class.php, line 580)

  34. February 23, 2009 at 15:47 | #1
    Does this work with Dynamic publishing?

    Nope. However, if you are using MT Pro, you can replicate the functionality with Custom Fields. I just created this for when I was still using MTOS.

  35. February 23, 2009 at 16:50 | #1

    Thanks for clarifying.

    You mean - I can replicate the Entry Image ability? Your plugin was working great - but ultimately I'm really trying to get control of which thumbnail displays next to an entry.

  36. February 23, 2009 at 18:03 | #1

    I don't know if you can access Custom Fields from dynamic publishing (I assume you can, but I could be wrong), but Custom Fields can most certainly replicate that functionality. In fact, I wrote this plugin to replicate a small part of Custom Fields' capabilities for MTOS users.