2010
03.09

WordPress Plugin

This plugin goes through all the images on the page: resizes them into thumbnails, adds a caption underneath and surrounds each one with an anchor tag (<a>) which will use the PrettyPhoto effect to “popup” the image in a bigger size. These rules apply only if you have checked the corresponding administration settings. If you surround the image with an anchor tag yourself in the post, then you must add an usemya attribute with a true value to the image or the anchor will be ignored and replaced. Alternately, if you do not want the popup effect at all you must add a nofx attribute to the image with a true value. If you do not want any caption, you can specify the nocap attribute. Let’s look at some examples:

Note: In the summer of 2012, the Highslide JavaScript library was replaced with the PrettyPhoto library due to licensing compatibility.

 

Normal use:

The image in our post

<img
src="/images/asia/bangkok_1517.jpg"
title="Licensed to soak"
/>

Gets turned into:

Licensed to soak

Notice that all you need for captions are the src and title attributes, everything else is calculated for you. The image title gets moved to the anchor title and replaced with “Click to enlarge” which should end up being the mouse-over hint on most browsers. The actual title gets output as the caption under the image.

 

No Effects

What if we don’t want the popup effect: (nofx=”true”)

The image in our post

<img
src="/images/asia/bangkok_1517.jpg"
title="Licensed to soak"
nofx="true"
/>

Gets turned into:

Licensed to soak

 

Use My Anchor

Now suppose we want to use our own anchor tag which we want to open in a separate window: (usemya=”true”)

The anchored image in our post

<a
href="/images/asia/bangkok_1517.jpg"
target="_blank"
><img
src="/images/asia/bangkok_1517.jpg"
title="Licensed to soak"
usemya="true"
/></a>

Gets turned into:

Licensed to soak

 

Use My Size

If we want force certain dimensions: (usemysize=”true”)

The anchored image in our post

<img
src="/images/asia/bangkok_1517.jpg"
title="Licensed to soak"
width="200" height="200"
usemysize="true"
/>

Gets turned into:

Licensed to soak

 

No Caption

Let’s remove the caption: (nocap=”true”)

The image in our post

<img
src="/images/asia/bangkok_1517.jpg"
title="Licensed to soak"
nocap="true"
/>

Gets turned into:

 

Link

If we want to make the caption an anchor link that opens in a new window: (link=”http://google.com”)

The image in our post

<img
src="/images/asia/bangkok_1517.jpg"
title="Licensed to soak"
link="http://google.com"
/>

Gets turned into:

 

Hint

Say we “borrow” an image and we want to give props to the host, we can override the image hint, this is good to use with the link attribute: (hint=”image borrowed from warriorself.com”)

The image in our post

<img
src="/images/asia/bangkok_1517.jpg"
title="Licensed to soak"
hint="image borrowed from warriorself.com"
/>

Gets turned into:

Licensed to soak

 

As Is

If we don’t want any effects or even formatting and we want to output the markup just as it is in the post, then we use the asis attribute: (asis=”true”)

The image in our post

<img
src="/images/asia/bangkok_1517.jpg"
title="Licensed to soak"
width="140" height="90"
asis="true"
/>

Gets turned into:

 

Group

When more than one image is in a post/page they all become part of a slideshow so when you hit the arrow key you go to the next image. If you want, you can separate goups of images into different slideshows using the group attribute: (group=”my separate group”)

The image in our post

<img
src="/images/asia/bangkok_1517.jpg"
title="Licensed to soak"
group="my separate group"
/>

Gets turned into:

Licensed to soak

 

Thumb

Now you can specify an image to use for the thumbnail and the regular image in the src will popup as normal by using the thumb attribute: (thumb=”http://flickr.com/123″)

The image in our post

<img
src="/images/asia/bangkok_1517.jpg"
title="Licensed to soak"
thumb="http://warriorself.com/blog/wp-content/gallery/mexico/thumbs/thumbs_mloop-d2_7839.JPG"
/>

Gets turned into:

Licensed to soak

 

Page

Do you have an image in a post that you want to only appear on the homepage, but not in the post itself? Maybe you want an image that appears on all pages except the home page. This plugin exposes the ability for you to declare images that appear only on certain pages using the page attribute: (page=”front”)

  • page : front | !front | single | !single (new in version 0.9.7)

The image in our post

<img
src="/images/asia/bangkok_1517.jpg"
title="Licensed to soak"
page="front"
/>

Gets turned into:

Note: the image does not appear at all since this is not the front page.

You can combine these attributes in new and exciting ways. Try it, and have fun!

More information available at WordPress.org

69 comments so far

Add Your Comment
  1. It seems to work ok. Only problem that I can see right off is if you have “Convert emoticons like :-) and :-P to graphics on display” enabled it will come up with a php error and try to replace the emoticon with your border and give it a link.

  2. oh and another thing that would be nice is if you could specify just a width and it scales to just that width consistently regardless whether the pic is landscape or portrait. When I used the large and small options it seemed like it should work this way out the gate or at least should be a secondary preference.

    I really dig the simplicity of your plugin though.

  3. Ok, thanks Andrew. Good catch. I made a small change to the code so it works now. You can download the new 0.9.2+ version at:

    http://downloads.wordpress.org/plugin/image-formatr.zip

  4. any change this can work with my site ?
    thanks

  5. Sure, Leo.

  6. Nice plugin. But how about having the enlage effect happen on a ‘mouseover’, rather than a click?

  7. Hi Rick, thanks for the request. I’ve worked with the mouseover trigger before and found it to be difficult to control and get it to work well. I think that you can add mouseover support directly with the Highslide plugin: somethign like:

    <script type="text/javascript">
    // close on mouse out
    hs.Expander.prototype.onMouseOut = function (sender) {
    sender.close();
    };
    // close if mouse is not over on expand
    // (using the internal mouseIsOver property)
    hs.Expander.prototype.onAfterExpand = function (sender) {
    if (!sender.mouseIsOver) sender.close();
    };
    </script>

    from http://highslide.com/ref/hs.Expander.prototype.onMouseOut

  8. NO, Please no mouse-over!!! as a user I beg – please stop doing things on mouse-over, this is just annoying. Thanks!!!

  9. It works BUT.. IT IS SLOWING DOWN MY BLOG DRAMATICALLY!

    I would love this to be fixed so I can easily have a archived images based blog rather than go to tumlr.. but if it can’t I might have too.

    • Hey Ric, I think the problem is that a PHP GD image library call is being used on every image to determine the dimensions. I’ll try to replace that with something lighter weight.

  10. Ok, Ric, I just committed a new version of the plugin that uses the native PHP getimagesize() function which should be faster and I also added an admin option to disable this call altogether if you don’t need to auto-determine the layout, for example if all your images are landscape. I hope this speeds things up!

    http://downloads.wordpress.org/plugin/image-formatr.0.9.4.zip

  11. Hi

    Using your plugin, working perfectly fine in safari, chrome, Mozilla, opera but not in IE 7 and 8, any tip so it may start working. Any will be great, and will help me rate it the plugin as 5star as well :)

    thanks in advance.

    • hi rajsa, Thanks for taking the time to write. I found a bug in the default Highslide settings, there is an extra comma in the JavaScript. With your web browser, go to the admin settings for image-formatr and look at the big box called “Highslide settings”. In that box change

      useControls: false,

      to

      useControls: false

      Remove the comma from the end of the line and it should work fine in IE now. Please let me know if you are still having any problems.

  12. Hi,
    I’ld like to use this plugin but there’s one feature missing for my needs : being able to automatically resize only the images larger than x pixels. Do you think it will be possible in future releases?
    Anyway thanks for your great work

  13. @OrdiFacil, that sounds like an easy request. I should be able to get that out in the next release, which should be… well, not sure, sometime this summer.

  14. Thank you very much for this plugin, it’s been very useful for me. I’ve just upgraded for the last version and I found out that the caption color changed, before it was grey and now it’s black, I suppose it’s get the same color from the main text, but I would like to change it. Its possible?
    Cheers

  15. @Desi, edit the file image-formatr.css around line 27 change:

    div.img div {
    background-color: auto;

    to:

    div.img div {
    background-color: purple;

    …or you can also add the following html anywhere in your theme output:

    <style>
    div.img div { background-color: purple }
    </style>

  16. Thanks!!!

  17. I downloaded the zip file and it in the temp file on my computer. I am using Dreamhost to generate my blogs and just getting started with wordpress. I’m not knowledgeable enough to figure out how to put it in the proper directory on their server! Thanks.

  18. @Frank: If you know how to FTP or use Dreamhost’s control panel file upload, then see the instructions at http://wordpress.org/extend/plugins/image-formatr/installation/:

    1. Download and extract the plugin zip file to your computer,

    2. Extract the files, keeping the directory structure in tact,

    3. Upload the extracted directory (image-formatr), including all the files inside it, to your WordPress plugin directory (wp-content/plugins), it should look like: wp-content/plugins/image-formatr,

    4. Activate the plugin through the Plugins menu in WordPress admin

  19. @OrdiFacil, I just updated the plugin to not resize any images smaller than the thumbnail size. Try it out. There is no admin setting, it just automatically works. Does this feature work for you?

    http://downloads.wordpress.org/plugin/image-formatr.0.9.7.4.zip

  20. Great. My blog is still in preparation. Anyway I will test the new version as soon as possible to give you my feedback. Above all, thanks a lot for your work and reactivity. :-)

  21. Hi, thanks for the plugin. Is it possible to display caption below featured image of post? I’m using the the_post_thumbnail function, but i’m getting no caption.

  22. It’s a really cool work. The only missing function for my automatically posting blogs (also called autoblogs) is the choice to automatically add the asis attribute to the images more little than the thumbnail size. Maybe with an option to check/uncheck…
    Anyway thanks a lot for the time you’re passing on improving this already great plugin for us.

  23. @Andres, I will look at integrating the_post_thumbnail function. Thanks for taking the time to post your question.

  24. using wordpress 3.2.1, after installing your plugin, I received a message stating “The plugin generated 2962 characters of unexpected output during activation. If you notice “headers already sent” messages, problems with syndication feeds or other issues, try deactivating or removing this plugin.”

  25. Hi-I want to uninstall Image Formatr…I checked the box, but it did not uninstall….it keeps the Formatr formatting, and does not revert back to how my images were displayed originally, prior to installing Formatr… and the plugin is still displayed in my control panel.

  26. @James: The Image-formatr plugin is not generating any “characters of unexpected output” on my 3.2.1 install. Your output may be caused by other functions on your system if you have debugging turned on, you may see things like:

    Notice: attribute_escape is deprecated since version 2.8! Use esc_attr() instead. in /var/www/vhosts/warriorself.com/httpdocs/blog/wp-includes/functions.php on line 3382

    To turn ON debugging error reporting, edit the file /wp-config.php and edit or add the following lines:

    error_reporting( E_ALL | E_STRICT );
    ini_set(‘display_errors’, 1);
    define(‘WP_DEBUG’ , true);
    define(‘WP_DEBUG_DISPLAY’, true);

    To turn OFF debugging error reporting, edit the file /wp-config.php and edit or add the following lines:

    error_reporting(0);
    ini_set(‘display_errors’, 0);
    define(‘WP_DEBUG’ , false);
    define(‘WP_DEBUG_DISPLAY’, false);

  27. @Dave: that’s right:

    To completely uninstall and remove the Image-formattr plugin:

    1. Check the uninstall box in the Settings for Image-formatr and then click Save Settings,

    2. Deactivate the plugin in the wp-admin. Go to Plugins and under Image Formatr click Deactivate,

    3. Delete the wp-content/plugins/image-formatr directory from your server.

  28. Hi,

    The plugin not working with bbcode: [img][/img]

    It work fine with <img> tags only!

    Please help me. Thanks

    • @kingdai, i added support for BBcode shorttags, give it a try.

  29. Hey, I love the plugin. Thanks! It’s the fastest, and most functional one I was able to find! Good work. Fast to set up. Simple to understand. And it WORKS!!!!

  30. This worked amazingly for my image blog posts! Loved it!

  31. Hi, first of all: your plug-inwas exactly what I was looking for my travelblog. Since I post with the iPad wordpress software whenever I have WIFI, I simply wanted to “post and not think about styles”. That works great. All images are resized as I want them to be.

    There is one simple question, due to I don’t know that much about CSS: How to I achieve the images to be aligned to the top right side of the post with every image in one row? Is there any Way to automatically remove all “alignnone” classes ansingend to the images?

    THX in advance,
    Yann

    • @Yann, i uploaded a new version to wordpress with an option to add and remove css image classes.

  32. I tried many times but the pictures on homepage are still turned to thumbnail, how to set the plugin, please? The picture on homepage is a test image. Wonder to solve the problem asap. Thank you all. I just want the image on homepage to show the original size, no need to enlarge. I want to link the images on homepage to the site’s other page, so the visitors can find what they want quickly; but now the mouse point became a magnifier when it’s moved to the image.

  33. @Yeefey, try this:

    <a href="/"><img src="/images/81-300x132.jpg" title="Tents" usemya="true"/></a>

  34. Steven, it works, however, there is a txt when the mouse move to the image. Is it able to disable the “image formatr” plug-in on the homepage? Thank you.

    • Yeefey, 1.) to remove the txt when the mouse moves over the image check the options page for: Strip title & Title replacement 2.) To disable images on the homepage, use the asis override:

      <img src="images/81-300x132.jpg" asis="true"/>

  35. Steven, it’s working perfectly! Thank you very much!

  36. Brilliant plugin! I’m probably doing something wrong, but i want this to only apply to my shop page to enhance the view of my products… but it keeps applying across the entire site (blogroll image resizing is not what i was after!)

    otherwise, seems to function like a dream! great work!

    thx,

    Simon

    • @Simon, try adding the asis override:

      <img src="adam1-270x300.jpg" asis="true"/>

  37. Hi Steve, I’ve used the asis override and i think with a little judicious tweaking everything should be fine. Many thanks for your quick response, Kind regards

    Simon

  38. Hi Steve, great plugin.. works excellent in FF, but I have a problem in IE. The pictures are in original size there, when I load the page, but I have resized them to a width of 250px. This only works in Firefox and other browsers, nit in IE at all.. Any idea?

  39. PS: ok, I see it works, but only if I add the param
    usemysize=”true”
    to each and every single image.

    Is there a way to force this if there is a given dimension in the image tag?

  40. IE ignores the given Image size, it’s always displaying full size. I have to force all images to the given size with the addition of usemysize=”true”
    Is there a chance to add this line to the highslide settings, so that all browsers will show the given size and only on click the full size version?

  41. It’ a privilege to come across someone that actually makes an effort to not only build a great plug in (which helped me a great deal today), but also who makes an effort to display the usefulness of the product clearly.

    You clearly, through a lot of work, have produced and marketed your work very well.

    Congrats and many thanks!!

    Christiaan

  42. Hi, I’m using the Version 0.9.7.5 on WP 3.3.1.
    It semas work but when I uppload an image and I select to put in CENTER of the page (from the add media button), doesen’t work and it put in the left of the page. Could y fix it?

    Is it possible to resize image also in tretch for example if I upload an image of 300px and mine defoult size is 400px to stratch it then I have all the hompage with te same image size?

    txx

  43. Hi,
    This concerns:
    http://wordpress.org/extend/plugins/image-formatr/
    It had to be closed.

    All code (committed to the directory) must be released under the GPL license or one compatible with it. Your plugin contains code that is licensed under a Creative Commons license. This is not permitted and it is an issue on which there is no flexibility.

    Including the required text that the CC license requires does not matter. It is not GPL so cannot be there.

    Can you change the plugin code to remove all the CC licensed code please. Can you also ensure when you re-commit that no javascript is minified. Once this is done please let us know and the changes reviewed prior to the plugins being made available.
    -
    Mark Riley
    Support Maven
    http://wordpress.org

  44. ok. well there you have it folks. Highslide JS has gotta go, unfortunately. I will have to find another JavaScript image viewer library.

  45. Thank you, your plugin has been reinstated.

    Steven wrote:
    > Hi guys, I just checked out a clean copy of my plugin
    > and committed a new version with the offending library
    > removed and replaced with one called "PrettyPhoto" with
    > a GPL license. That should hopefully get me back online.

  46. I am trying to make an image in the sidebar zoom up. Image-Formatr didn’t seem to find it so I put the code in manually. It nearly worked but I got and error message saying the image could not be found. Is it possible to use it on a sidebar image?

    • If you use the WP Text Widget, you can just add the following line to
      the file image-formatr.php:

      add_filter('widget_text', array($image_formatr_instance, 'filter'), 10);

      I think it’s a good request and i am researching adding it to the next
      release of the plugin.

      • Thank you Steven,

        Works a treat. Your instructions also showed me how to turn off the effect in our content images without having to add the nofx="true" code to each image individually. Two solutions for the price of one!

  47. Great plugin, but I cant get it to work when I post a gallery. Am I missing something? When I pull the source code the tags are unchanged within the gallery markup.
    Any advice would be great, Thanks

    • Hi Jon, the issue is that galleries created either with shortcodes like [id=123], or galleries rendered via a plugin with a priority greater than 10, will not work with ImageFormatr as-is. It is a good request that I have been thinking about for years. I need to first play around with altering the priority, which you can do in the file image-formatr.php.

  48. Hi Steven, I have a nice little “add-on” for the plug in. Since I write a lot of articles on the iPad, I usually have the normal image referenced resulting it only being scaled down but not resized, Since this leads to slow site loads, I added the following between the first and last lines of class.formatr.php:

    [...]
    $img_style  = "style=\"$width $height\"";
    
    //YM: derive 'thumb' if empty BEGIN
    global $wpdb;
    $param['thumb'] = $param['thumb'] ? $param['thumb'] : wp_get_attachment_thumb_url(
        $wpdb->get_var("SELECT ID FROM {$wpdb->posts} WHERE guid='{$param['src']}'") );
    //YM: derive 'thumb' if empty END
    
    // setup print source and id print variables ///////////////
    [...]
    

    I think it would be nice to have this by default or any means of “use generated thumbs” as a parameter option. If the thumb is specified, the thumb-image will be used (as it is today in the plug-in).

    • Hi Steven,

      I upgraded to 1.0 and everything (that you deliver) still works.

      Unfortunately, I cannot get my code snippet get to working. That was very handy. Since wordpress automatically generated thumbs when uploading via WordPress for iPad for example, image formatr could be enhanced by using the generated thumbs if non was provided via tag/attribute of .

      It would be great if such function could be integrated in the standard reformatting. The reason for using the “real” thumbs instead of the downscaled images is better performance on mobile devices and to reduce traffic on these, too.

      Cheers,
      Yann

    • Yann Michel, I just uploaded a new version into trunk with the functionality you describe. Can you test it out for me? Look for the “Use attached image as thumbnail” admin setting. You can grab the latest development code in trunk from: http://downloads.wordpress.org/plugin/image-formatr.zip

      • Hi Steven,

        The trunk version works perfectly! One more thing: Would it be possible to have the surounding DIV tags per image removed optionally? If you have a look at my site, this would otherwise end in lots of images each on a new line.

        Thanks for your support!

        Cheers,
        Yann

      • Yann, thanks for beta-testing for me so quickly, that’s great.

        You don’t need to remove the <div>, you can use CSS to achieve pretty much any layout you want. If you want to get the images to appear next to each other in-line, try this:

        add the following html anywhere in your theme output:

        <style>
        div.img { display: inline }
        </style>

        you could use your theme editor:

        http://www.yann-michel.de/blog/wp-admin/theme-editor.php

        Let me know how it goes, Steven.

      • Hi Steven, I have to say “thank you once more” for so quickly reacting in regards to my requests.

        I added:

        div.img { display: inline }

        to the style.css file and now everything works fine for me!

        Once more: thank you!

        Cheers,
        Yann

  49. Hello Steven and thanks for great plugin,

    Is it possible to preserve original alignment with thumbnails. My images are centered, but with plugin thumbnails are positioned with alignment left!

    Thanks!

  50. It seems to work ok, thanks! Just need info how to arrange and center more a few thumbnails in one row.

    • Hi Dragan, nice website. You can make your thumbnails appear next to each other (on the same line) with CSS. Put the following anywhere in your theme, or even in the post itself:

      <style>div.img {display: inline}</style>

      You will also need to remove any extra lines between the images in your blog post editor.

  51. Great plug in, using it now on a few blogs, great job.

    • Thanks Jon, let me know if you think of any needed modifications to the plugin.

  52. Hello! I would like to use your plugin on my blog, but I don’t want it to resize my embedded pictures into small thumbnails. I would like the size of the pictures to remain unchanged in the post (e. g. 581×863 or similar), but when smb clicks on them, then the Popup-Gallery should start. If this is possible, how can I apply this feature to all posts, without changing the attributes of every single image in the post (I use Flickr)?

    Thanks°

    • Hi Dana, try un-checking the “Standardize thumbnails” setting in the admin: Settings -> Image Formatr -> Standardize thumbnails.