ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Showing thumbnails of images in entries

April 24, 2012 6:06pm

Subscribe [2]
  • #1 / Apr 24, 2012 6:06pm

    Damir H.

    3 posts

    Hello,

    Our site has recently migrated from MovableType to ExpressionEngine, and I am trying to get a grasp of all the features available. One thing I am particularly interested in, but seems to be lacking, is the option to display thumbnail versions of images in news posts automatically.

    To clarify - MovableType would ask you if you want a thumbnail of an image right after you select it from the file browser. You’d check a checkbox, enter thumbnail size, and it’d be posted as such into the entry, along with an enclosing <a> tag linking to the original image. This feature seems to be lacking in EE, or I am simply missing it. I am aware of image manipulations in the file uploader preferences as mentioned here: http://ellislab.com/expressionengine/user-guide/cp/content/files/file_upload_preferences.html

    However, while I can set it up to generate different sized thumbnails for all images, technically overcoming the lack of an input field on the spot like MT had, I still don’t want a thumbnail for EVERY image I upload, and setting up a different folder for “images that need thumbnails” is a bit cumbersome. I am also not sure if the short name can be used in some way to display the thumbnail version of an image? Thanks in advance.

    Best regards,
    Damir H.

  • #2 / Apr 25, 2012 6:59am

    John St-Amand

    865 posts

    You’re right, there’s not something in EE that’s quite like what you had in Moveable Type.  But there are ways to achieve the same thing.

    First, EE does natively create w thumbnail for every image uploaded for its own purpose of displaying that thumbnail inline in the edit entry screen so you get a preview of the image associated with the file field.  These thumbnails are technically accessible, but they are quite small since they’re not intended for front end use, and you can’t set their size.

    The image manipulations are a decent enough way to go, though you’re right, in order to avoid creating a thumbnail for every image you would then need to create folders specifically intended for each thumbnail purpose.  The short name you set on an image manipulation in, since EE 2.4, the way you access these files, fortunately.  So if you have a file field called photo and you upload to an EE upload destination that includes a file manipulation called thumb, then in your template you could insert the thumbnail, at a basic level, using {photo:thumb} (meaning {custom_file_field_name:image_manipulation_short_name}.  There are also other ways to use the image, automatically wrapping it with a link to the original, for example, or grabbing other meta elements of the file field using the file field pair rather than single variable.  There details of how to make use of the custom file field type are here: http://ellislab.com/expressionengine/user-guide/modules/channel/custom_fields.html#file-field

    Outside of natively, one of the most full-featured options is an add-on called CE Image.  This add-on performs the image manipulations on the front end rather that on upload, and then caches the result.  This would allow you to control sizing and other options within the context of the specific usage with a high degree of control.  This is a commercial add-on that has a remarkable set of features and thorough documentation.

    Another add-on for image management is Pixel and Tonic’s Assets.  I’ve not yet had the pleasure of working with it, but as I understand it from people who have, like every other P&T add-on, it’s well thought out and extremely complete, and so might be worth a look to you as well.

    Hope that helps. Cheers.

  • #3 / Apr 25, 2012 2:04pm

    Damir H.

    3 posts

    Thanks a lot for your help, this should be more than enough to get me started!

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases