Agregar imagen destacada en publicaciones individuales

Publicado: 2013-10-10

La imagen destacada de sus archivos (Miniatura de publicación) se extraerá de la imagen destacada independientemente de cómo la agregue en la pantalla Editar publicación.

La imagen que se muestra antes o después del título de entrada de su publicación única se extrae de la primera imagen que inserta en la publicación, a menos que la elimine.

Puede eliminar o modificar el código que muestra una imagen antes o después de los títulos de entrada de su publicación única utilizando uno de los fragmentos de código en esta página.

Si agrega una imagen como imagen destacada, se mostrará en sus archivos como una miniatura de la publicación y no como una imagen destacada después del título de su publicación individual.

Si no agrega una imagen destacada, la primera imagen de su publicación se mostrará antes o después de los títulos de entrada de su publicación única, así como en sus páginas de archivo.

En esta publicación, le proporcionaré algunas líneas de código PHP que simplemente puede pegar al final de su archivo child themes functions.php.

El código le permitirá mostrar la imagen de su publicación, antes o después de su título en publicaciones individuales.

publicar imagen antes del título único

Dan hizo esta pregunta recientemente:

He estado devanándome la cabeza buscando, usando un código diferente que se encuentra en este foro y he resultado en hacer una nueva publicación.

Con el uso de Minimal Pro, simplemente me gustaría mostrar la imagen destacada de una publicación en una página de "publicación única". Preferiblemente encima del contenido del texto. Encontré código en este foro y lo puse en functions.php. Se muestra la imagen destacada, pero al mismo tiempo borra el contenido del texto. Así que obviamente estoy haciendo algo mal.

Nota: utilice el último fragmento de código PHP en esta publicación si está ejecutando el antiguo marcado XHTML y no HTML 5, ya que los ganchos han cambiado.

Mostrar imagen destacada después del título

Este código muestra la imagen después del título de su publicación única.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Mostrar imagen destacada antes del título

Este código muestra su imagen antes del título de su publicación única.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Mostrar imagen destacada en páginas estáticas

Si también desea que esto funcione para páginas individuales estáticas, simplemente agregue la página al código de esta manera:

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'page' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Mostrar imagen destacada en páginas estáticas y publicaciones individuales

Si también desea que esto funcione para páginas y publicaciones estáticas, simplemente agregue la página al código de esta manera:

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular() ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

La posición que muestra su imagen destacada se puede determinar utilizando el tercer parámetro para la prioridad de posicionamiento.

En el código anterior es simplemente cuestión de cambiar el tercer parámetro de 5 a 15.

Cambiar tamaño de imagen

Este es un ejemplo del uso de un tamaño grande de acuerdo con la configuración de medios.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

También puede usar cualquiera de los otros tamaños predeterminados configurados en Configuración > Medios.

miniatura
medio
largo
completo

También puede usar cualquier tamaño personalizado que haya agregado en su archivo de funciones.

Ejemplo:

portafolio

 add_image_size( 'portfolio', 540, 340, TRUE );

Uso de ganchos de bucle XHTML antiguos

Si aún ejecuta XHTML y aún no se ha convertido a HTML 5, deberá usar los Loop Hooks antiguos:

 add_action( 'genesis_before_post_title', 'single_post_featured_image' ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Agregar espacio entre el título y la imagen

Aquí hay un código CSS de muestra que puede agregar al final de su archivo style.css de temas secundarios antes del código para Consultas de medios que agrega un margen entre su imagen destacada y el título de su entrada en publicaciones individuales.

 .single .post-image { margin-bottom: 30px; }

Use esta muestra para las páginas:

 .page .post-image { margin-bottom: 30px; }

Alinear imagen destacada (imagen posterior) a la derecha

También puede alinear las imágenes de su publicación a la derecha.

Simplemente agregue este código CSS antes de sus consultas de medios cerca del final del archivo style.css de sus temas secundarios:

 .single .post-image { float:right; margin:0 0 1em 1em; width: 285px; height: 285px; }

El código anterior alineará la imagen que agregue como imagen destacada en todas las publicaciones individuales a la derecha de su contenido para que su texto se ajuste así:

publicar imagen

También puede agregar la clase alignright al código PHP en lugar de usar CSS.

 'class' => 'alignright'

Simplemente reemplace la imagen posterior en el código PHP con alignright y su texto se ajustará a su imagen en el lado derecho de su contenido.

Alinear imagen destacada (imagen posterior) a la izquierda

También puede alinear las imágenes destacadas de sus publicaciones individuales a la izquierda.

 .single .post-image { float:left; margin: 1em 1em 0 0; width: 200px; height: 200px; }

Y aquí está el resultado:

flotador izquierdo

También puede agregar la clase alignleft al código PHP en lugar de usar CSS.

 'class' => 'alignleft'

Simplemente reemplace la imagen posterior en el código PHP con alignleft y su texto se ajustará a su imagen en el lado izquierdo de su contenido.

Nota : este código CSS se aplica a los temas secundarios HTML 5 de Genesis 2.0 y es posible que no funcione en otros temas que usan una clase diferente para las imágenes de publicación/imágenes destacadas.

Eliminar un enlace href de la imagen destacada

Un miembro me preguntó cómo eliminar el enlace del código, así que aquí está:

Simplemente reemplace esta parte del código:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );

Con este:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); echo $img;