Travel makes you smarter. 03.09
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
- nofx : true
- usemya : true
- usemysize : true
- nocap : true
- link : <string>
- hint : <string>
- asis : true
- group : <string> (new in version 0.9.6)
- thumb : <string> (new in version 0.9.7)
- page : front | !front | single | !single (new in version 0.9.7)
Normal use:
The image in our post
<img
src="/images/asia/bangkok_1517.jpg"
title="Licensed to soak"
/>
Gets turned into:
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:
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:
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:
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:
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:
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:
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
It seems to work ok. Only problem that I can see right off is if you have “Convert emoticons like
and 
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.
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.
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
any change this can work with my site ?
thanks
Sure, Leo.
Nice plugin. But how about having the enlage effect happen on a ‘mouseover’, rather than a click?
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
NO, Please no mouse-over!!! as a user I beg – please stop doing things on mouse-over, this is just annoying. Thanks!!!
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.
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
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: falseRemove 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.
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
@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.
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
@Desi, edit the file
image-formatr.cssaround line 27 change:to:
…or you can also add the following html anywhere in your theme output:
<style>div.img div { background-color: purple }
</style>
Thanks!!!
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.
@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
@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
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.
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.
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.
@Andres, I will look at integrating the_post_thumbnail function. Thanks for taking the time to post your question.
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.”
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.
@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);
@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-formatrdirectory from your server.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.
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!!!!
This worked amazingly for my image blog posts! Loved it!
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.
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.
@Yeefey, try this:
<a href="/"><img src="/images/81-300x132.jpg" title="Tents" usemya="true"/></a>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"/>Steven, it’s working perfectly! Thank you very much!
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"/>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
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?
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?
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?
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
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
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
ok. well there you have it folks. Highslide JS has gotta go, unfortunately. I will have to find another JavaScript image viewer library.
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.
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!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 issues is that galleries created either with shortcodes like [id=123] or something, or galleries rendered with a plugin with a priority greater than 10, will not work with the plugin 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.
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).
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
Great plug in, using it now on a few blogs, great job.