Mi primer intento de extraer imágenes en WordPress para mostrarlas en cualquier parte se ha quedado corto con un proyecto que asumí recientemente (te recomiendo que leas ese artículo antes de continuar). Básicamente se mejoraron algunos aspectos importantes:
Primero vamos a publicar el código completo para los más vagos. Luego viene la explicación del mismo y finalmente las intrucciones de cómo configurarlo a gusto:
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 | <?php function mi_imagen($tamano = '' , $enlace='') { global $tamano, $enlace; $ubicacion = 'imagenes/no-imagen.jpg'; $images = get_children(array( 'post_parent' => get_the_ID(), 'post_type' => 'attachment', 'numberposts' => 1, 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC' )); $imagen = ''; if($enlace != no) { $imagen = '<a href="'.get_permalink().'">'; } if(!empty($images)) { // Línea condicional, añadida por Lucas Torres (@Lucasan) foreach( $images as $image ) { switch ($tamano) { case 'medio': $imagen .= wp_get_attachment_image( $image->ID, 'medium' ); break; case 'grande': $imagen .= wp_get_attachment_image( $image->ID, 'large' ); break; case 'full': $imagen .= wp_get_attachment_image( $image->ID, 'full' ); break; case 'mini': $imagen .= wp_get_attachment_image( $image->ID, 'thumbnail' ); } } } else { $imagen .= '<img src="'.get_settings('home').'/'.$ubicacion.'" alt="Imagen del artículo: '.get_the_title().'" />'; } if($enlace != no) { $imagen .= '</a>'; } // Agregando atributos ALT y TITLE (Rev. 3 - 02/06/2009 16:34) $altern =''; $titulo =''; $alt_img = $image->post_excerpt; $titulo_img = $image->post_title; if($alt_img == '') { $altern = 'alt="Imagen del Artículo"'; } else { $altern = 'alt="'.$image->post_excerpt.'"'; } if($titulo_img !='') { $titulo = 'title="'.$image->post_title.'"'; } $imagen = str_replace('alt=""', $altern.' '.$titulo , $imagen); echo $imagen; } ?> |
Como puedes notar, la función mi_imagen() es bastante simple y consta de tres bloques: 1) La definición de variables, 2) las funciones que operarán en caso de que tengas imágenes en tu artículo y 3) las que operarán en caso de que no las tengas. Finalmente le damos salida al resultado.
En la variable $ubicación colocarás la URL de tu imagen genérica. Ésta aparecerá en caso de que no hayas configurado una imagen para tu entrada:
1 | $ubicacion = 'http://tu-sitio.com/imagenes/no-imagen.jpg'; |
Debes colocar la etiqueta en el sitio adecuado, por ejemplo:
1 2 3 | <h2><a href="<?php echo get_permalink() ?>"><?php the_title(); ?></a></h2> <?php mi_imagen() ?> <?php the_content(); ?> |
La anterior estructura le daría un aspecto a los artículos similar a los del índice de este sitio: Título, imagen y texto introductorio (tal como el index de este mismo blog). Por supuesto debes jugar con los estilos para lograr la apariencia deseada. También puedes encerrar los elementos entre etiquetas HTML para ampliar las opciones de personalización. A tu criterio.
Simple. Sólo ingresa a tu Editor de textos > Agregar imágenes > Galería. Todo lo que debes hacer es colocar la imagen que deseas en primer lugar, así:

En otras palabras, la imagen que se encuentre en primer lugar es la que aparecerá junto a tu entrada en la presentación, aunque dentro del artículo conserve el orden que le diste al principio.
Cuando colocas esta etiqueta…
1 | <?php mi_imagen() ?> |
… los valores predeterminados son: 1) Tamaño miniatura y 2) Con enlace al artículo.
Si deseas otro tamaño deberás escribir (ejemplo con tamaño medio):
1 | <?php mi_imagen($tamano = 'medio') ?> |
Los valores para esta variable son ‘medio’, ‘grande’ y ‘full’. El tamaño miniatura (thumbnail) viene de forma predeterminada (si prefieres miniatura no configures el tamaño) Puedes ajustar las configuraciones de medidas de imágenes en tu Panel de control > Opciones > Objetos:

Para desactivar el enlace a la imagen simplemente escribe:
1 | <?php mi_imagen($enlace = 'no') ?> |
Desactivando enlace y personalizando el tamaño:
1 | <?php mi_imagen($tamano = 'grande' , $enlace = 'no') ?> |
Sólo imagina las posibilidades que puedes lograr con esta función. Supongamos que tu maquetación incluye un artículo principal (foto grande), dos artículos secundarios (foto mediana) y una lista de artículos anteriores (miniatura). Si implementas la función explicada lograrás que tus artículos roten y sus respectivas imágenes adoptarán el tamaño que configuraste en cada loop.
Rev. 3 – 02/06/2009 16:34: El compañero Lucas me ha advertido acerca de la carencia de atributos “alt” y “title” en el HTML resultante, por lo cual agregué dicha función. El mismo me sugería el uso de get_image_tag, pero aún le sigo apostando a wp_get_attachment_image ya que mantiene simple el asunto de los tamaños, así que le apliqué un reemplazo simple. Acualmente estoy estudiando sustituir la función por wp_get_attachment_image_src pero eso será después. Tengo sueño. Regresaré al ataúd.
Publicado en Wordpress. 8 Comentarios »
Buena esa Dario (o Meta, como se te llama en tu blog? XD ).
Voy a usarla a ver como me va, algo que le añadaría es la opción de alineación, o por lo menos poder añadir una clase, y que el usuario la pueda definir.
Saludos, y por aquí pasaré.
Hola Lucas, recuerda que la función trae a la imagen como tal, la cual a su vez está ubicada en un espacio fijo (por ejemplo miniaturas en el index). Si el espacio es fijo no veo el problema de controlar con CSS la alineación o cualquier otro atributo de presentación.
Ahora bien, otra cosa son las imágenes dentro de las entradas cuyas características de estilo sí necesitan cambiarse dinámicamente, una característica que ya viene con WordPress de forma nativa.
Por otra parte, en este momento estoy trabajando con el elemento caption, el cual generaría una estructura completa de capas + imagen + texto, todo proveniente del cuadro de configuración de imagen.
Muy bueno el tutorial y funciona perfectamente, justo es lo que andaba buscando.
Yo lo tengo un poco modificado más bien para un photoblog el del enlace, he estado dando vueltas pero no lo he conseguido seria interesante que pudiera abrir la imagen en full en vez del url de la entrada el permalink.
Gracias de nuevo por el tutorial
hola dario, habia leido el tutorial inicial y me vino de maravilla, este es aun mejor por las nuevas cosas que trae, pero queria preguntarte si sabes la ubicación fisica del fichero php que contiene la función wp_get_attachment_image ??
Hola Manicho, te cuento desde entonces me ocupé de desarrollar mejor el código y lo convertí en un plugin: WP Smart Image.
Respecto a la ubicación de la función wp_get_attachment_image, se encuentra en includes/media.php.
Saludos.
Hola a todos:
He seguido todos los pasos indicados pero no logro que se muestren las miniaturas llamándolas desde “Custom Fields”.
En el campo “Nombre” escribo mi_imagen (también he intentado con:
1 | mi_imagen($tamano = 'medio') |
) y donde dice Valor, pego la URL completa de la imagen de la galería. Pero sólo aparece la imagen por defecto. Puedo poner una imagen destacada incluso, pero no desde los Campos Personalizados. Sé que tengo la librería GD instalada y utilizo PHP 5.32.
Mi archivo functions.php (ocupo WordPress 3.0) es:
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 | <?php if (function_exists('register_sidebars')) register_sidebars(2); add_theme_support('post-thumbnails'); function mi_imagen($tamano = '' , $enlace='') { global $tamano, $enlace; $ubicacion = 'wp-content/uploads/2010/07/PROD-DESTACADO.jpg'; $images = get_children(array( 'post_parent' => get_the_ID(), 'post_type' => 'attachment', 'numberposts' => 1, 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC' )); $imagen = ''; if($enlace != no) { $imagen = '<a href="'.get_permalink().'">'; } if(!empty($images)) { // Línea condicional, añadida por Lucas Torres (@Lucasan) foreach( $images as $image ) { switch ($tamano) { case 'medio': $imagen .= wp_get_attachment_image( $image->ID, 'medium' ); break; case 'grande': $imagen .= wp_get_attachment_image( $image->ID, 'large' ); break; case 'full': $imagen .= wp_get_attachment_image( $image->ID, 'full' ); break; case 'mini': $imagen .= wp_get_attachment_image( $image->ID, 'thumbnail' ); } } } else { $imagen .= '<img src="'.get_settings('home').'/'.$ubicacion.'" alt="Imagen del artículo: '.get_the_title().'" />'; } if($enlace != no) { $imagen .= '</a>'; } // Agregando atributos ALT y TITLE (Rev. 3 - 02/06/2009 16:34) $altern =''; $titulo =''; $alt_img = $image->post_excerpt; $titulo_img = $image->post_title; if($alt_img == '') { $altern = 'alt="Imagen del Artículo"'; } else { $altern = 'alt="'.$image->post_excerpt.'"'; } if($titulo_img !='') { $titulo = 'title="'.$image->post_title.'"'; } $imagen = str_replace('alt=""', $altern.' '.$titulo , $imagen); echo $imagen; } ?> |
Mi página index es muy simple porque la estoy empezando
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?php get_header(); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div id="destacado"> <?php mi_imagen($tamano = 'medio') ?> <?php the_post_thumbnail('medium'); ?> <?php echo get_post_meta($post->ID, "titulo", true); ?></div> <?php endwhile; else: ?> <p><?php _e('No se encuentra.'); ?></p> <?php endif; ?> <?php get_footer(); ?> |
Ojalá me ayuden porque ya se me acabaron todas las ideas y como ven, mi conocimiento es bien básico. Ah, también intenté con el plugin de Darío (WP Smart Image) pero obtuve los mismos resultados. ¿Algo debo estar haciendo mal no creen? Desde ya gracias por todos los aportes escritos. Saludos.
Hola Darío:
Ya solucioné mi problema.
- Primero, volví a instalar el WP Smart Image II esta vez desde el mismo WordPress (no instalando la carpeta manualmente).
- Fui a la entrada (al post) y en el recuadro derecho del plugin ingresé una foto desde la galería y apreté el botón de la izquierda del sidebar para “activar” la imagen. Esta vez sí me la reconoció (anteriormente aparecía una X). Luego le di a actualizar.
- En mi página index agregué
1 | <?php wpsi() ?> |
y listo, todo perfecto.
Y como se me subió el ego hasta las nubes y me sentí todo un Darío Ferrer por un minuto, le agregué los parámetros Size y title, para darle tamaño medio y que al sobre poner el mouse aparezca la viñeta con el nombre del título del link, es decir, puse esto:
1 | <?php wpsi('size=med&title=el_title') ?> |
, información que saqué desde http://www.lab.darioferrer.com/doc/index.php?title=WPSI_II_-_Tabla_de_Par%C3%A1metros
Muchas gracias nuevamente por esta aplicación y un saludo a los muchos amateur como yo, que estoy seguro no se aburrirán con mi comentario, como de seguro le debió pasar a Darío y sus cerebritos, ja, ja, ja… lo hago por ayudar. Un abrazo.
XD
Me alegra que lo hayas podido solucionar Andrés.
@Willy en ¿Joomla Vs. Wordpress? (1ª parte): Era lo que necesitaba leer!!! como programador, aprender como editar un template de cero en joomla y...
@Willy en [Meme] Concepto bizarrón de CSS: Cagadas Siempre Suceden!! XD Counter Strike Server. no es bizarro pero bue!!
@Horacio en ¿Joomla Vs. Wordpress? (1ª parte): Hola, hace tiempo empece a trabajar con joomla y armar mi sitio web en un servidor gratuito para...
@birgitta en ¿”WatchTower” o “CashPower”?: Hilaridad sin H,mis disculpas
@birgitta en ¿”WatchTower” o “CashPower”?: AY AY AY.Cuanto lobotomizado hay por aqui!!!!!! Muchas gracias Dario por tu...
@Darío en ¿Joomla Vs. Wordpress? (1ª parte): Gracias por la sugerencia tocayo, voy a analizarla! Luego de buscar un poco más encontré que la página...
@Juan Vera en Dar acceso a grupos de Joomla (o restringírselo) para cualquier componente: Hola, mira yo quiero algo parecido pero para las personas...
@Emanuel en Dos tips sobre Adobe Reader: Detener AcroRd32Info.exe e impedir actualizaciones automáticas: Para que molestarse instalando acrobat si...
Darío Ferrer — Blog personal
Sitio desarrollado con Wordpress, software libre para un mundo libre.
58 consultas a la BD en 0,921 segundos. Blog alojado en DreamHost