sábado, 14 de mayo de 2011

Extraer imagen de un post en Wordpress

Pasos

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


Código PHP:
<?php // Función para extraer imagen de artículo. Autor: 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:

Código PHP:
<?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

Código HTML:
<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

Código HTML:
<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:

Código:
.texto img {
  display: block;
  float: left;
  margin-right: 8px;
}
Ideas:

a) 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.

b) 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).

Fin del tutorial.

No hay comentarios:

Publicar un comentario