Cómo extraer miniaturas de imágenes en WordPress

1 de Febrero de 2009 — Darío Ferrer

El método explicado aquí ha sido reemplazado por esta nueva revisión del código, por lo que te invito a visitar ese nuevo artículo. Sin embargo es beneficioso que leas previamente el presente texto para que sepas de qué trata todo el asunto.

miniaturas-wordpressPrimero que nada vamos a aprender un par de conceptos básicos acerca de las imágenes en WordPress:

Principio 1.- Cuando subimos una imagen desde nuestra computadora en el editor, éste automáticamente crea tres versiones: miniatura, media y tamaño real.

Principio 2.- No es necesario que la imagen aparezca en el artículo para poderla utilizar. Basta con subirla desde el panel de edición para que WordPress la asocie con el post en cuestión. en otras palabras, una cosa es subirla y otra hacerla aparecer.

Qué vamos a lograr con esta función:

Luego de implementada estaremos capacitados para colocar cualquier imagen o miniatura en cualquier parte de nuestro sitio. Esto por supuesto se logra creando una función para llamar a la imagen.

Pasos

1.- Abre functions.php en el directorio de tu plantilla. Si el archivo no existe créalo. Copia este código:

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
<?php
// Función para extraer imagen de artículo. Autor: Darío Ferrer (alias: metacortex) 13/12/2008 - 4:45
// http://www.forosdelweb.com
// Licencia GNU/GPL. Puedes remover estos créditos si quieres.

function mi_imagen($tamano = '') {
  if ( $images = get_children( array (
    'post_parent'    => get_the_ID(),
    'post_type'      => 'attachment',
    'numberposts'    => 1,
    'post_mime_type' => 'image'
   )));
  {
    foreach( $images as $image ) {
      if($tamano == 'mini') {
      $imagen = wp_get_attachment_image( $image->ID, 'thumbnail' );
      } if($tamano == 'medio') {
      $imagen = wp_get_attachment_image( $image->ID, 'medium' );
      } if($tamano == 'grande') {
      $imagen = wp_get_attachment_image( $image->ID, 'full' );
      }
      echo $imagen;
    }
  }
}
?>

2.- Ahora todo lo que tienes que hacer es utilizar este código para extraer la imagen del artículo:

1
2
3
<?php mi_imagen($tamano = 'mini') // Para miniaturas ?>
<?php mi_imagen($tamano = 'medio') // Para tamaño medio ?>
<?php mi_imagen($tamano = 'full') // Para tamaño completo ?>

El código por supuesto debe ir incluido en el loop o bucle en el que está metido the_content. Aquí un par de ejemplos:

Ejemplo 1 con “get_posts”

1
2
3
4
5
6
7
8
9
10
11
12
<div class="capa">
<?php $lastposts = get_posts('category=7&numberposts=5');
 foreach($lastposts as $post) : setup_postdata($post); ?>
  <div class="articulo" id="articulo-<?php the_ID(); ?>">
    <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
    <div class="texto">
      <?php mi_imagen($tamano = 'mini'); ?>
      <?php the_content(__('Read more'));?>
    </div>
  </div>
  <?php endforeach; ?>
</div>

Ejemplo 2 con el bucle clásico

1
2
3
4
5
6
7
8
9
<div class="capa">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
  <div class="texto">
    <?php mi_imagen($tamano = 'mini'); ?>
    <?php the_content(__('Read more'));?>
  </div>
  <?php endwhile; else: ?><?php endif; ?>
</div>

Importante

Es necesario mencionar que la función traerá la primera imagen que subiste en cada post.

Configurar tamaños y estilos:

Tamaños de imagen: Puedes configurar los tamaños de miniatura y medio desde tu panel de control en Opciones > Misceláneas.

Estilos: Es posible que para tus estilos de miniatura desees arrimar la imagen a la izquierda y lograr que el texto se coloque al lado y fuya hacia abajo. Un ejemplo para lograrlo es colocando esto en tu hoja de estilos:

1
2
3
4
5
.texto img {
  display: block;
  float: left;
  margin-right: 8px;
}

Ideas:

Puedes jugar con los distintos tamaños de imagen para construir una página con aspecto interesante. Alternando distintos tamaños podrás sacar un máximo provecho gráfico sin menoscabo del flujo del contenido de tu index.

Igualmente es posible hacer un loop especial en tu widget y llamar las imágenes sin necesidad de traerte el contenido, a manera de una pequeña muestra de fotos aleatorias en determinada(s) categoría(s).

  • Bitacoras.com
  • Meneame
  • Twitter
  • del.icio.us
  • Facebook
  • Digg
  • Technorati
  • BarraPunto

Publicado en Wordpress. 12 Comentarios »

12 comentarios

Comentar este artículo

Nombre (Requerido)

Correo (No será publicado) (Requerido)

Sitio web

Secciones

Enlaces externos, HTML y CSS, Impresos, Joomla, La foto, Notas, PHP, Política, Portada, Recursos, Religión, Videoteca y Wordpress.

Anteriores

comentarios recientes

@Andrés en Dictador Micheletti: Haré lo que sea para convencer a Obama: Darío…! y yo queme mataba de la risa viendo cómo los Testigos de...

@Daniel en Dos tips sobre Adobe Reader: Detener AcroRd32Info.exe e impedir actualizaciones automáticas: muchas gracias man!!! genial la info que...

@Sebastian en ¿Joomla Vs. Wordpress? (1ª parte): Hola, excelente artículo, actualmente me encuentro definiendo que CMS usar y ando evaluando entre...

@Alyen en The Post Thumbnail Vs. WP Smart Image II: Gracias Darío, espero tu respuesta. Otra cosa tengo la traduccion desde hace tiempo, te aviso...

@Andrés en Cómo extraer miniaturas de imágenes en Wordpress (2da revisión – Código mejorado): Hola Darío: Ya solucioné mi problema. -...

@Andrés en Cómo extraer miniaturas de imágenes en Wordpress (2da revisión – Código mejorado): Hola a todos: He seguido todos los pasos...

@uri en 240 plugins JQuery: buenas Darío, buena recopilación… estoy buscando un plugin para wordpress que al pinchar a una imagen me la...

@ramon en ¿Joomla Vs. Wordpress? (1ª parte): felicidades por el articulo y por esa capacidad de analisis. Voy a contar mi experiencia y voy a...

Darío Ferrer — Blog personal

Sitio desarrollado con Wordpress, software libre para un mundo libre.

61 consultas a la BD en 0,796 segundos. Blog alojado en DreamHost