WordPress Plugin: Thumbnail Viewer 1.1

1.1 is now old, go get the newest.

I’ve released version 1.1 of my Thumbnail Viewer plugin, which still needs an official homepage. This release was prompted by a problem with showing the quicktag when authoring a new post or page. The quicktag wasn’t showing on WordPress 2.1 installations. So, as a result, WordPress 2.0.x is no longer supported by the Thumbnail Viewer plugin. If you want to use this plugin you’ll need WordPress 2.1 or later. Really, the plugin should still work with WordPress 2.0.x, however the quicktag won’t be available when writing a new post.

The issues in Internet Explorer 7 I spoke about earlier haven’t been resolved, quite. I’d say the plugin works fine in 98% or more of all Internet Explorer 7 installations. I’ve only had problems on one installation of IE7. I’m pretty sure this problem isn’t even directly related to this plugin. I say that because the demo page for the code this plugin is based on won’t work either in that same IE7 install. So, it’s apparently a problem in the javascript this plugin is based on. I guess as of right now, I’m considering the div display problem in IE7 to be out of my control.

Anyway, click the images below for a demo.
Some CornSome Cracker JacksSome Peas

The above example was achieved with the following HTML:

Some Corn
Some Cracker Jacks
Some Peas

1.1 is now old, go get the newest.


  1. Extract wp-thumbnailviewer folder from .zip to wp-contents/plugins/.
  2. Go to Plugins in WordPress dashboard and activate Thumbnail Viewer.
  3. That’s it! Write a new post to use the quicktag button or simply add rel=thumbnail to any link tag.


  1. Simply overwrite everything in wp-contents/plugins/wp-thumbnailviewer/ with everything in the wp-thumbnailviewer folder from the zip file.
  2. That’s it! You should now be using the latest Thumbnail Viewer WordPress plugin.

Well, now what?

Work with Me

I'm available for hire and always taking new clients, big and small. Got a project or an idea you'd like to discuss? Startup plan but no developer to make it happen? Just get in touch, I'd love to see if I can help you out!

Leave some Feedback

Got a question or some updated information releavant to this post? Please, leave a comment! The comments are a great way to get help, I read them all and reply to nearly every comment. Let's talk. 😀

Longren.io is proudly hosted by DigitalOcean


72 thoughts on “WordPress Plugin: Thumbnail Viewer 1.1

  1. Hey, great plugin! However, I was wondering if modifying it was possible, so that it does that loading thingie with the images that are already on my blog?

    Thanks in advance.

  2. Glad you got it working Arturo. I may add an options page in the future that will have an option to replace all images in a post with code needed to create the pop-in. Note really sure yet though.

    There’s some other features I’ve been considering adding also, but who knows. Thanks for your feedback!

  3. John, thanks for the kind words. The grayed out sections in the comments indicate the comment was by the post author (me in this case).

    I’ve actually been thinking of doing away with the gray backgrounds on authors comments. I’d like to get something in there that’ll make it obvious that it’s an author comment. Unwakeable 2.0 will be out soon, that’ll be a nice addition. It’s all taken care of with CSS.

    Let me know if you have any issues with the plugin John!

  4. Hi Tyler

    dropped the plugin into the folder and uploaded it
    and activated the plugin

    dont see the *quicktag button*

    Perhaps its my 50 yr old eyes

    Im using 2.0.6 ,, Im leary of upgrading ,,

    would that be a problem ?

  5. John, sorry, Thumbnail Viewer 1.1 doesn’t work in WordPress 2.0, it’s 2.1 only. However, go download Thumbnail Viewer 1.0, it should be compatible with WordPress 2.0. There’s a download link for 1.1 at the top of that page. Scroll to the end of the post for the Thumbnail Viewer 1.0 plugin.

    Version 1.1 and 1.0 are basically the same, 1.1 was released to properly support WordPress 2.1. Future releases of this plugin will not have support for WordPress 2.0, it’s WordPress 2.1 only from here on out.

  6. hello, i have a problems with plugin.

    my site operate on Joomla, but i wanna find the easier engine, and now testing the WP with fine mods on your site.

    i used a Thumbnail Button to make lightboxed style:

    this is a my tags example

    but i receive this bug

    when i’am tryin to post something with only its work fine but with out lightbox ofcourse.

    what the problem is ?

    thx for a nice mods 🙂

  7. Lovely plug-in! Thank you for you work. Is there an easy way to turn off the image titling portion? I prefer to let the pictures speak for themselves.

  8. Denise: I will add an options page with the next release that will allow you to turn the title area off. You’ll also be able to specify weather or not you want the fade effect when loading the image in the pop-in. The fade effect is turned off in version 1.1 by default.

  9. I’ve got the question that’s the exact opposite of denise’s– about titling.

    WordPress 2.0 and 2.1 natively allow you to generate a description for any image. If you choose to display the image as a page (i.e., click link to page, or thumbnail to page, then the “description” text will appear under the photo on that page generated by WordPress.

    Is there any way for your plugin to display the contents of “description” rather than contents for “title” when displaying the enlarged image?

    (I ask this based on reading your code sample above, not [yet] by looking at your code or the plugin itself.)

  10. Susan: I was unaware of this functionality in WordPress. The closest thing I’ve seen to this is the “Description” that’s requested when clicking the “IMG” quicktag when authoring a new post.

    You’re saying WordPress will create an individual page for displaying a photo with the description below the image?

    It’s not a problem for me to display the value of “description” in the title area, I may just do away with the title=”” text and go with description=””.

  11. Let me see if I can give you a sample. Note: This link is for a test site, and is subject to change. So the link will be bad fairly soon. But here goes:


    Scroll down to the image example that says thumbnail links to page

    Notice that WordPress generates a new page, and inserts the description information there.

    Notice on regular images, you have chouice of displaying the image as Thumbnail/Full Size/Title and it can linkn to File/Page/None. It’s the PAGE option there that I’m showing you a sample of.

  12. Susan: Excellent example, thank you! I didn’t realize you were talking about attachments. After looking at this example I don’t think using the description text is possible with my plugin (or not easy). This is due to the fact that the description text isn’t contained in a title or alt attribute or anything, it’s just stitting on the page as plain text.

    Now, if you were using this plugin, and clicked the image on the attachment page, you’d see the pop-in (from this plugin) with the image and it would have a title of “Yo!” under the image (assuming you added rel=”thumbnail” to the link tag).

    You’re wanting something that’s a little beyond the scope of this plugin. The idea is that you can simply add a rel attribute of “thumbnail” to any link tag surrounding an image to get a nice, simple looking pop-in view.

    Let me know if I’m missing the point totally. It’s definitely possible. 🙂 Thanks Susan!!

  13. This is due to the fact that the description text isn’t contained in a title or alt attribute or anything, it’s just stitting on the page as plain text.

    But… it goes into the database, doesn’t it? And if it’s in there, the contents of that table — or cell– can be called and inserted somewhere, no?

    I’m thinking about whether it’s possible to view the thumbnail on a post or page, and when you click it, rather than loading a new page with the attachment (and text), both the image and text appear.

    Maybe what I want (this is blue-skying here) is beyond what your plugin does.

    I have been looking at several other image tools, variations on a theme of lightbox. Mostly I’m seeing what can be done with images… and I wish to include descriptions/captions. I installed and tried out fgallery, which creates a whole new section of the site. There used to be pages and posts, now there are pages, posts and galleries. Nice stuff in there (it has its own file upload and description area), but as far as navigation goes, you’re bound by certain constraints when it comes to navigation. Can’t put a “gallery” into an already-existing page, that I can tell. (whereas you can with inline images/attachment pages, and Thumbnail Viewer, and Lightbox images.

    Hmmm…Maybe what I want to do can be done by tweaking the layout and styling of a page template called attachment.php (I’ve been boning up attachments in the codex).

  14. Susan: You’re right, the attachment description text does go into the database. I could modify my plugin to be driven off that field in the database, but that would only apply when an attachment is being used. Basically, this plugin is for simple embedded images only (embedded in a post or page).

    I may be able to add something in future versions that will allow pulling text from the attachment description. I think I just need to work on deciding if we’re on attachment page, and if we are, using the attachment description as the title for my plugin. May be feasible, not really sure yet. I will look into this possibility though.

    I too have used fgallery before, I was very impressed. It seemed to be a really robust system. I haven’t touched it for a year or so though, so it’s probably evolved quite a bit since the last time I used it.

    If you come up with any other thoughts or suggestions, feel free to post them here, ideas are always welcome.

  15. Hi,

    I was wondering what I am doing wrong if the pop-up is not like on this page, but just opening in a new page. I do not see any errors, but nothing with the black box with ‘close’ in it.

    Thank you.

  16. Jeannette: Looks like the .js and .css files associated with the plugin aren’t being included for some reason. The js file should be in http://www.fun4aalders.com/wp-content/plugins/wp-thumbnailviewer/js/ and the css file should be in http://www.fun4aalders.com/wp-content/plugins/wp-thumbnailviewer/css/.

    When uploading the plugin to your site, make sure you upload the entire wp-thumbnailviewer folder to wp-content/plugins/. Also, make sure the css and js folders made it to your server, those folders should be in wp-content/plugins/wp-thumbnailviewer/.

    Let me know if this helps you get it working. If not, I may ask for limited access to your server so I can look at a few things a little closer.

    Sorry for the troubles Jeannette, and thanks for bearing with me.

  17. This doesn’t work for me, but perhaps it’s because I used wallpapers? If my images are small enough, I can just put them in my blog’s layout anyway. I wanted this for wallpapers.

  18. Whoa it just started working. Wow, awesome comments recognition thing. Where’d you get the plugin?

  19. Ok here’s the strange thing. I need to put something OTHER than rel=thumbnail, what I put was attachment. Then it works. And if I put it on ONE of the images, it works for the whole page. WEIRD???

  20. L: You’ll need to modify the javascript to make it work with something other than rel=thumbnail. Not sure why it would work on every image automatically, unless all your anchors surrounding the images already have rel=thumbnail.

    Do you have a page I can look at?

  21. Thanks for a great plugin!

    Would it be possible to implement an user option where you can set the size of the thumbnailes yourself? Now, the size of the thumbnailes are 128 px. I know that you can alter the thumbnail size after you have created it but a 200 px thumbnail looks pixelated when its native resolution is 128 px.

  22. Thomas: The size of the thumbnails does not matter to this plugin. Unless I totally misunderstood your question, it sounds like you’re setting incorrect size parameters in the img tag.

    For example, if you have a thumbnail that is 200 pixels wide and 50 pixels high, you should use code similar to this:

    Your Title

    Basically, you should just make sure the width= and height= img attributes are set to the actual width and height of your thumbnail. If width= and height= are set to values smaller than the actual width and height, your thumbnail will look all pixelated.

    Let me know if this helps or not.

  23. Hi Tyler, I would like to have the option to configure the size of the thumbnailes that are generated automatically. I made this temporary post to shown what I mean: http://natursyn.dk/blog/?p=94
    Your plugin created at thumbnail with the size of 128 x 96 px. However, when I enlarged the size of the 128 x 96 px thumbnail in my post it looks pixelated.

  24. Thomas: Thanks for the example! I see what you’re saying now, I had it swapped around before. The same rules still apply though.

    In that first image of yours, there are no width= or height= attributes on the img tag, so the thumbnail displays at the default size (128 x 96 px).

    In the second image you have height=”288″ and width=”384″, both of which are greater than the actual width and height of the thumbnail.

    Basically, you’re seeing the pixelation because the height= and width= cause the thumbnail to be stretched beyond it’s dimensions. Simply adding values to width= and height= won’t magically resize the thumbnail.

    When you’re making your thumbnails, you’ll just need to make them larger. Let me know if you’ve got any other questions. Nice site by the way. You’ve got some really beautiful photos up there.

  25. Is it possible to add a “next/previous image”-button(s) inside the enlarged picture?

  26. the_dyke: Unfortunately, that’s beyond the scope of this plugin. This plugin doesn’t manage collections of photos or anything like that. This plugin just provides an elegant method for displaying larger versions of a thumbnail.

  27. Trying to use this plugin and im new to this, but after I installed and activates in 2.13 I do not see any quicktags or understand how to add a large image than make it thumbnailed? I do not see anything different in my editor? Am I doing this wrong?

  28. Having same problem as Jeannette where the thumbnail just opens a new page with the full sized picture. Also no quicktags in the visual editor. Checked for location of js and css folders and they are where they should be in:


    So it looks like those directories are not being called. Is there something in my apache or or wordpress install causing this? Could it be permalinks or virtual hosts perhaps?

  29. RayzrShrp: I think that problem is related to permalinks, same problem Jeroen is having. The .js and .css files return 404 errors when you try opening them directly. Lots more people seem to be having this problem than I realized.

    Try going to the Options in your WordPress Dashboard, then going to Permalinks. Once there, just click the “Update Permalink Structure” and see if it starts working.

    If that doesn’t work I’ll look into some other options.

    Glenn: Click on the Code tab when writing or editing a post with the visual editor. All the quicktags show up there when you’ve got the visual editor enabled.

  30. Tyler

    ok I updated my permalinks and now the thumbnail viewer button shows up on the code tab of the visual editor but after filling in the data in the dialog boxes the thumbnail shows up but clicking on it justg loads it in a new window.


    I can browse to the .js file fine so is this a webserver permission issue now? It seems like the .js file is not getting executed now.

  31. RayzrShrp: I’ve found the problem, thanks to the link you posted to the js file. The plugin is looking for the js file in the wrong folder. This happened when I moved this project to being hosted at wordpress.org.

    I will get it updated and release version 1.2 later on tonight or tomorrow.

    Thanks for helping me find the problem!!

  32. Tyler,

    Great plug-in. One of the best that I have used. Especially useful for us designers.


  33. Thanks for the kind words Tim. Let me know if there’s anything I can add or change to make the plugin more useful.

  34. Hi,

    Thanks for the outstanding plugin. I love the small footprint and performance.

    I’m using Thumbnail Viewer v1.2 and it works exactly as expected in IE6. However, Firefox 1.x on Linux displays the thumbnail in the popup instead of the full size image. Yeah, I know, that’s an outdated version, but I keep it around for legacy testing.

    Would someone mind taking a quick peek:


    I’m not worried about it if it’s just a 1.x version issue.

    Has anyone else experienced this and if so what’s the solution or workaround?


  35. A quick follow-up to my previous post.

    I can confirm the problem w/Firefox 1.x is related specifically to the plugin and not the JavaScript library itself. The examples found on the DynamicDrive page work as expected.

    Any advice on how to resolve this issue would be greatly appreciated.


  36. very nice plugin, it works perfectly and i cant folt it, been looking for a long long time for this, thanks so much. reccomended to all. Please keep me up dated

  37. Hi Sean! Yes, it will work just fine with WordPress 2.3.3. This blog always runs the latest stable release of WordPress, currently 2.3.3, and it works flawlessly here. Let me know if you have any issues with it.


Leave a Reply to RayzrShrp Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.