WordPress: poner como fondo thumbnail-imagen destacada

abril 15, 2015 | Wordpress

cuando empece con esto de wordpress, en uno de mis primeros themes me surgió una necesidad que tenia que solucionarlo si ó si, por que era una parte muy importante del diseño que estaba maquetando, que era poner la imagen destacada(thumbnail) del post como imagen de fondo, en otras palabras mas técnicas era poner el thumbnail como background y encima de el poner el titulo del post.

bueno empecemos por lo básico, que es llamar a la imagen destacada (thumbnail)

<?php the_post_thumbnail(); ?>

recordemos que wordpress nos da opciones de tamaño de imagen por defecto, con tamaños distintos para poder optimizar nuestro diseño y no sobre cargar con imágenes muy grandes, si no con los tamaños que necesitemos.

<?php
the_post_thumbnail('thumbnail'); // Thumbnail (150px X 150px)
the_post_thumbnail('medium'); // Medium (300px x Auto)
the_post_thumbnail( 'medium_large' ); // Medium-large (768px x Auto)
the_post_thumbnail('large'); // Large(1000px x Auto)
the_post_thumbnail('full'); // Full (tamaño original)
?>

bueno si ninguna de las siguientes medidas te satisface puedes definir tamaños nuevos o mejor dicho tamaños propios. primero tenemos que agregar el soporte de thumbnail a nuestro theme, el siguiente código se tiene que agregar en functions.php

<?php 
if (!current_theme_supports('post-thumbnails') ){
  add_theme_support( 'post-thumbnails' );
}
?>

una vez que nuestro theme soporte thumbnails podremos agregar el tamaño de imagen que deseemos obtener, este recibe 4 parametros (‘nombre del nuevo thumbnail’, ‘ancho’, ‘alto’, ‘cortar centradamente’) técnicamente sería algo así ($name, $width, $height, $crop) tu código debería quedar como el siguiente. lo que indica $crop es que tu imagen será cortada a proporción teniendo en cuenta el centro. para obtener distintos tipos de cortes te recomiendo pasar por el codex de wordpress

<?php 
if (!current_theme_supports('post-thumbnails') ){
  add_theme_support( 'post-thumbnails' );
  add_image_size( 'nueva-medida', 376, 230, true );
}
?>

se que me extendido un poco en este post, pero es para que tengas el tamaño preciso y no sobre cargues tu theme y sobre todo que se adapte a tu web. ahora que tenemos el tamaño de imagen que queremos solo nos queda añadirlo como fondo.

<?php
    global $post;
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
?>
<div style="background: url(<?php echo $src[0]; ?> ) !important;">contenido de tu sitio</div>

así se verá en el navegador.

<div style="background: url(http://www.dominio.com/img/mi-imagen.jpg);">contenido de tu sitio</div>

recuerda que este código ira dentro del Loop de wordpress.

Relacionados