Darío Ferrer - Blog

WP Smart Image plugin (english)

6 de Julio de 2009 — Darío Ferrer

Spanish users here

WP Smart Image is a new Wordpress plugin which combines the best features of WP image management system and placed in your hands easily. With WP Smart Image you can perform complex and dynamic web layouts without need to programming. Just place the tag in your template, and set it easily throught two simple adjustments. [ Download WP Smart Image ]

Simple, powerful and flexible!

With WP Smart Image you can:

• Choose the image to show.
• Choose between the four presets WordPress sizes: Thumbnail, Medium, Large and Full.
• Link the image to the article or leave it without a link.
• Showing images in the posts list, even if those images are not setting to appear in the content.
• Get the image url instead of the whole tag.
• Personalize the alt and title attributes if they haven’t been configured already.
• Add custom CSS classes and ID to properly handling the images through CSS, javascript, PHP and others web resources.
• Add a link to the full version of the image from the thumbnail or the medium size one.
• Add a link to the full version of the image from the thumbnail or the medium size one.
• Personalize the generic images and its paths for all the sizes.

Working with WP Smart Image

Just place the code into the loop that generate your article list:

1	<?php if(function_exists('wp_smart_image')) wp_smart_image() ?>

Into the tag you can customize look and behavior of your images, for example:

1	<?php if(function_exists('wp_smart_image')) wp_smart_image($size='mini', $type = 'single') ?>

Try the WP Smart Image live demo
Checkout the parameters list

What is not WP Smart Image

Through WP Smart Image now is very easy to make better Wordpress layouts.

• It isn’t a filter that works within the content. WP Smart Image only works on template’s areas and its use is concentrated entirely in the file system.
• It isn’t a plugin which changes the behavior of other functions or add data to the BD. At the contrary, it is a resource that lets you take advantage of the existing functions of Wordpress in a faster and easy way.

How to set your images to be displayed

• Upload images through your edit panel.
• Into the Gallery section, drag the image you want to show the first position. It appears -for example- on the cover, even if not in the content.

Why WP Smart Image

Wordpress’s image engine is one of the most advanced and flexible at the moment. Wordpress offers a wealth of functions and tags, which enable us to manipulate images / files, associating them with entries, categories, pages and other items with total freedom.

However, sometimes becomes very difficult to find the correct way to associate data and obtain the desired result. In that sense some have mistakenly tried using custom fields for this purpose, ignoring Wordpress has a large platform with many resources at our disposal.

!Download WP Smart Image!

You can download WP Smart Image direct from Wordpress Plugin Repository

• 
• 
• 
• 
• 
• 
• 
• 

30 comentarios

• 
  Kjetil dijo:
  18 de Julio de 2009 a las 5:07 pm

  Ciao
  This plugin looks very nice. I just wonder if it can do what I hope:
  Generate a thumbnail from an image (placed in a post, below a more tag) and display that thumbnail in the post list. The thumbnail should be clickable – to open the post its pulled from.
  OK – I have this functionality here now: http://www.dolcevita.no/liguria – but since the plugin isn’t maintained I’m desperately looking for a replacement :o)
  It also looks like the plugin will generate the thumbnail not when I upload a new image but “on the fly” after the code above is inserted in the appropriate template. If so: Brilliant.
  Thanks,
  Kjetil

• 
  Darío dijo:
  18 de Julio de 2009 a las 6:47 pm

  Hi Kjetil,

  WP Smart Image does what you comment, but generate thumbnails; this part is made by Wordpress. I already saw dolcevita.no, that is exactly the work of this plugin ;)

  Place the code just above the_content and change the parameters as you wish. Your will show the thumbnails.

  However, I assume you have been uploaded images through editor (instead -for example- custom field). If this is true, the first image en “gallery” menu will be shown as thumbnail. Clickable thumbs are set as default.

• Плагин WP Smart Image dijo:
  29 de Julio de 2009 a las 9:11 am

  [...] в комментариях, помогу чем смогу. Скачать плагин Страница плагина Смотрите также Плагин для создания превьюшек (thumbnails) [...]

• 
  Ralf dijo:
  6 de Agosto de 2009 a las 7:24 am

  Hi,

  I installed WP Smart Image and put the code bevore the_content:

  Unfortunately, the parameters are not working. So the image is always displayed in its maximum size.

  Maybe you have an idea, what is going on.

  Thanks,

  Ralf

• 
  Darío dijo:
  6 de Agosto de 2009 a las 7:54 am

  Hi Ralf,

  Maybe you’ve placed the WPSI tag more than one time (for example into another loop). In this case you should specify all the values (size, type, etc.). Let me know if this is not your case.

• 
  Ralf dijo:
  6 de Agosto de 2009 a las 8:21 am

  Hi Darío,

  No, I put it only once, on a seperate page layout.

  Strangely, the Image-Size-Control of “Max Image Size Control” doesn’t work either. Every time I use it, for example thumbnail-size, is displayed to the maximum size of the image.

  Another question concerning the “Activate editor box”. I do not understand that functionality, because I don’t see it appear in the adminstration.

  By the way: I use the newest version of wordpress 2.8.3. and 0.3.1. of WPSI.

  Ralf

• 
  Darío dijo:
  6 de Agosto de 2009 a las 8:57 am

  Don’t worry, try this:

  - About WPSI, that error sounds to me as an eventual syntax issue. Double check the args, they must to place separated by commas and right syntax:

  1	$arg='value',$arg2='value2'...

  - About the editor box, it appears into your editor interface, in side position.

  - Max Image Size Control don’t takes action over images uploaded before plugin installation, but over new images.

  Let me know if you still having issues.

• 
  Ralf dijo:
  6 de Agosto de 2009 a las 9:05 am

  Hi Darío,

  I pasted your sample code, which should, for a start, work well:

  Ralf

• 
  Darío dijo:
  6 de Agosto de 2009 a las 10:48 am

  … and really works well.

  Obviously your issue is generated by a mistake. Show me the code of the entire loop.

• 
  Ralf dijo:
  6 de Agosto de 2009 a las 11:44 am

  Darío

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

  <?php /* Template Name: Page, Imagegallery */ /**  * @package WordPress  * @subpackage Default_Theme  */ get_header(); ?>     <div id="content" class="widecolumn" role="main">             <?php if (have_posts()) : while (have_posts()) : the_post(); ?>                 <div class="post" id="post-<?php the_ID(); ?>">                                     <?php                 if  ( ( $post->post_parent == '11') || ($post->post_parent == '13') || ($post->post_parent == '9') || ($post->post_parent == '569') || ($post->post_parent == '457') || ($post->post_parent == '16') ) { echo('<h2>'); the_title(); echo('</h2>');  }             ?>                     <div class="entry">                                                 <?php if(function_exists('wp_smart_image')) wp_smart_image($size='med') ?>                 <?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>                 <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>             </div>                                 </div>                 <?php endwhile; endif; ?>                         <?php edit_post_link('[ Edit entry ]', '<p><small>', '</small></p>'); ?>                                     </div>                                 <?php         wp_reset_query();                 if (is_page('homepage') ) {                 get_sidebar('homepage-right');                         } elseif ( is_page('about-me') || $post->post_parent == '6' ) {                 get_sidebar('about-me-right');                   } elseif ( is_page('contact') || $post->post_parent == '36' ) {                 get_sidebar('contact-right');                             }               ?> <?php get_footer(); ?>

• 
  Alejo dijo:
  6 de Agosto de 2009 a las 2:50 pm

  Hola Darío
  gran herramienta
  tengo exactamente el mismo problema
  ya revise si esta presente la coma o no

  aca esta el codigo del loop
  es un loop secundario con dos primeros post especiales

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

  <ul>                         <?php $newspostcount = 0; ?>                                                 <?php query_posts('cat=3&showposts=7'); ?>                         <?php $newsposts = get_posts('category=3&numberposts=7&offset=0');                         foreach ($newsposts as $post) : start_wp(); ?>                                                         <?php $newspostcount++; ?>                             <?php if ($newspostcount <= 2) : ?>                                 <li class="newsPostFull" id="post-<?php the_ID(); ?>">                                     <div class="newsPostThumb">                                         <?php if(function_exists('wp_smart_image')) wp_smart_image($size='mini',$type='link') ?>                                     </div>                                     <div class="newsPostContent">                                         <div class="postDate"><?php the_time('j \d\e F') ?></div>                                         <div class="postTitle"><h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3></div>                                         <div class="postContent"><?php the_content('Read the rest of this entry &raquo;'); ?></div>                                     </div>                                     <div class="clearBoth"></div>                                 </li>                                                             <?php else : ?>                                 <li class="newsPostLite" id="post-<?php the_ID(); ?>">                                     <span class="postDate"><?php the_time('j \d\e F') ?> - </span>                                     <span class="postTitle"><?php the_title(); ?></span>                                     <a class="moreLink" href="<?php the_permalink() ?>">Ver m&aacute;s</a>                                         </li>                                                         <?php endif; ?>                                                 <?php endforeach; ?>                     </ul>

  saludos
  Alejo

• 
  Alejo dijo:
  6 de Agosto de 2009 a las 3:13 pm

  dario
  era un problema de la memoria de mi servicio de hosting, que no cargaba el tamaño de las imagenes, y suponia que median 0 por 0px, ergo, salian enteras
  saludos
  gran herramienta

• 
  Darío Ferrer dijo:
  8 de Agosto de 2009 a las 8:01 am

  Alejo, me alegra que lo hayas logrado.

  Ralf, your issue is related to a page. Give me a while to prove it on localhost. Also I must to tell you a detail: pages have not same behavior than categories. Between them, the process to retrieve data is completely different. Anyway I will review the code.

• 
  Niels dijo:
  4 de Septiembre de 2009 a las 3:41 am

  Hi Dario,
  I have a friend who has a blog/site, and I installed this plugin and he is very happy. It is so easy to use. I prefer it to all other preview image plugins. It is smart to use the thumbnails WP has already created!

  I have a question in regards to using this function in ‘page.php’. I would like to have a list at the bottom of the page showing the thumbnail for every post in my db.

  This doesn’t work, obviously:

  1 2 3 4 5 6 7 8

  <?php rewind_posts(); ?>  <ul class="select-menu">    <?php global $post; $myposts = get_posts('numberposts=-1'); foreach($myposts as $post) : ?>       <li>          <?php wp_smart_image($size='mini', $type = 'single'); ?></div>          <?php the_title(); ?>       </li> <?php endforeach; ?>

  How could I get something like this to work?

  Thanks, N

• 
  Darío Ferrer dijo:
  10 de Septiembre de 2009 a las 11:16 am

  Hi Niels,

  Sorry for the time off. Try this:

  1 2 3 4 5 6 7 8

  <?php $myposts = new WP_Query('showposts=-1'); foreach($myposts as $post): ?>     <li>       <?php wp_smart_image($size='mini', $type = 'single'); ?></div>       <?php the_title(); ?>     </li> <?php endforeach; ?>

  Any problem let me know.

• 
  Kjetil dijo:
  19 de Septiembre de 2009 a las 3:35 pm

  Ciao!
  Just want to let you know that I chose your plugin after checking out about 10 alternatives. It is not yet fully implemented (it requires some image to be uploaded via the wp interface – our site was originally ported from a html version) but looks very well!
  Also, your last addition of a “select image” panel is just great!
  Thanks,
  Kjetil
  PS See it here: http://www.dolcevita.no/liguria
  PPS I’ve used this:

  1	<?php if(function_exists('wp_smart_image')) wp_smart_image($size='mini', $type = 'link') ?>

• 
  Darío Ferrer dijo:
  22 de Septiembre de 2009 a las 11:15 am

  Glad to know it Kjetil :D… Any help let me know.

• 
  mis uszatek dijo:
  21 de Octubre de 2009 a las 6:57 am

  It’s work great. But i have 1 file for 10 of my 50 posts i need upload it 10 times. I can not select file from media library. So i have 10 time the same photo in media my library.

• 
  Darío Ferrer dijo:
  21 de Octubre de 2009 a las 12:13 pm

  Hi mis uszatek,

  This request was mentioned few days ago by a couple of users. It’s really useful. I’ll do my best for include it on next version.

• 
  tanja dijo:
  27 de Octubre de 2009 a las 6:40 am

  What is the correct flow to upload?

  Upload image»insert into post»save as draft?
  not always will the thumbnail show up in the selection box, I’m not sure why this happens and what the best way is, do you have a suggestion? thanks!

• 
  Darío Ferrer dijo:
  27 de Octubre de 2009 a las 7:05 am

  Hello tanja,

  Wordpress needs you save the post before adding images, because the post must have an ID to be recognized and processed properly. Then you can upload images which will be associated with that post.

  Upload image»insert into post»save as draft?

  Better post»save as draft, then Upload image and save again or refresh (to show thumbnails in your box). Next versions will include ajax functions to avoid refreshing.

• 
  Jessi dijo:
  27 de Octubre de 2009 a las 11:51 pm

  Amazing plugin! I was trying to set up my categories so that images would show instead of words and this plugin has helped tremendously. Thanks!

• 
  Darío Ferrer dijo:
  28 de Octubre de 2009 a las 6:56 pm

  Jessi, thanks for you comment. Glad to know you’ve been solved that issue :)

• 
  smkyle1 dijo:
  6 de Noviembre de 2009 a las 2:50 pm

  I cannot make it work. I have tried lots of plugins. I am trying to post images in my RSS Feed. I have a self-hosted Wordpress CMS. I post content and with each post there is an image. But I can’t get the image to appear in the RSS feed.

  I used your instructions. I put this in my theme:

  I still get no images in my RSS feed.

  Please help. This is driving me crazy. I have tried several other plugins. No success with any of them.

• 
  Philip Roberts dijo:
  8 de Noviembre de 2009 a las 9:58 am

  Hi Dario,

  Great plugin, works wonderfully, except I have one problem. Is there any way to change the image for a post without deleting the post and recreating it?

  Thanks,
  Phil

• 
  Darío Ferrer dijo:
  17 de Noviembre de 2009 a las 4:09 am

  Hello smkyle1 and Philip,

  Sorry for the time off. smkyle1, actually i’m developing a new version of WP Smart Image, more reliable, which brings all bugfixes (including the issue you have mentioned) and many new features. The release will be around last days of november. Please stay tuned. :D

  Philip, I don’t understand your problem. Is not needed to delete a post for change the image. Simply choose the image you wish from the box. If you can give more details maybe I can help. ;)

• 
  JHouse dijo:
  26 de Noviembre de 2009 a las 3:32 am

  Hi Dario,

  Does this plugin work with NextGen gallery too? I want to use it for a real estate site that has multiple photos per post. It would be ideal if it grabbed the first photo of each post like Post Thumbs Revisted used to do.

  Thanks for your time.

• WP Smart Image plugin (english) — Darío Ferrer dijo:
  2 de Diciembre de 2009 a las 7:33 pm

  [...] URL : http://www.darioferrer.com/wp-smart-image/english [...]

• 
  Craig dijo:
  2 de Diciembre de 2009 a las 9:37 pm

  I attached an image via the ’smart image’ widget in the edit window. How do I delete that image so I can use another instead? I don’t see a way to delete it or even simply replace it- in the edit widget or the settings panel. Without possibly deleting all images for all the articles via the settings panel.

  Great plugin. Thanks.

• 
  Darío Ferrer dijo:
  3 de Diciembre de 2009 a las 7:24 am

  JHouse, until now several people have been requested this feature (compayibility with NGG). As soon as I release WPSI II, I will work seriously on this part. Thanks for remember it.

  Craig, thanks for you comment about the plugin. About your issue, this side of image management (deleting images) can be controlled via Wordpress natively.

Comentar este artículo