Mostrar las propiedades de alto y ancho con the_post_thumbnail () o función relacionada

2

Problema

Quiero que las propiedades height y width en el elemento img de la imagen destacada para una publicación, página o tipo de publicación personalizada.

Entorno

  1. Tengo un tema personalizado basado en el tema BlankSlate .
  2. El nuevo tema veintiocho tampoco muestra las propiedades.
  3. En Configuración / Medios, no he cambiado los tamaños de imagen predeterminados.
  4. functions.php contiene add_theme_support( 'post-thumbnails' ); .
  5. No tengo tamaños de imagen personalizados.
  6. En Configuración / Medios, la casilla "Recortar la miniatura a las dimensiones exactas" está sin marcar . Por lo tanto, tengo algunas miniaturas que no son exactamente 150 px x 150 px.
  7. Editar: Todavía quiero otras propiedades automáticas de las funciones de Imagen destacada, como alt y class .

Salida de corriente

De esta página de ejemplo en mi sitio web , el HTML completo para el La imagen destacada es actualmente

<img src="http://i2.wp.com/www.hunterthinks.com/wp-content/uploads/2014/11/favicon-160x160.png?fit=150%2C150"class="attachment-thumbnail wp-post-image" alt="HunterThinks.com">

Como idealista, querría la altura y el ancho normalmente, pero la falta de altura produce un problema de diseño con mi tema actual. Como puede ver, la última imagen destacada supera el final del elemento <section> y se ve terrible.

Código actual

El header.php es grande, así que lo omitiré a menos que alguien piense que mi problema está allí.

category.php

<?php get_header(); ?>
<section>
  <header><h1><?php _e( 'Main page: ', 'goldenratio' ); ?><?php single_cat_title(); ?></h1></header>
  <?php if ( '' != category_description() ) echo apply_filters( 'archive_meta', category_description() ); ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <?php get_template_part( 'entry', 'summary' ); ?> # FEATURED IMAGE COMES FROM HERE
  <?php endwhile; endif; ?>
  <?php get_template_part( 'nav', 'below' ); ?>
</section>
<?php get_footer(); ?>

entrada-sumario.php

<?php the_title( '<h1 class="clear">', '</h1>' ); ?>
<?php if ( has_post_thumbnail() ) { 
    echo '<figure class="clear-right"><a href="';
    the_permalink();
    echo '">';
    the_post_thumbnail( 'thumbnail' );
    echo '</a></figure>';
    } ?>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" title="Go to the page">&rArr;&nbsp;Read&nbsp;&rArr;</a>

class="clear-right"

No puedo imaginar por qué esta clase afectaría las cosas, pero en caso de que esté equivocado, lo incluyo aquí.

.clear-right{
 clear:right;
 float:right;
 margin-bottom:1em;
 margin-left:1.827%;}

Intentos fallidos

  1. Intenté usar wp_get_attachment_image_src() pero supongo que no lo codifiqué correctamente porque ni siquiera pude ver la imagen. No tengo una muestra del código que probé.
  2. Intenté usar the_post_thumbnail( $size, $attr ) y ajustar la matriz $attr según la documentación en wp_get_attachment_image() , pero estoy bastante seguro de que eso nunca funcionará.

¿Código, conceptos y referencias?

¿Puede alguien ayudarme con el código, los conceptos y los materiales de referencia que me faltan? Tengo la sensación de que cuando aprenda la respuesta me sentiré un poco tonto, pero quiero solucionar este problema.

Gracias de antemano.

    
pregunta hunterhogan 05.01.2015 - 23:04

5 respuestas

1

Puede recopilar atributos de imagen usando " wp_get_att_attachment_metadata ", vea el siguiente ejemplo como punto de partida

function mytheme_post_thumbnail( $size = 'post-thumbnail', $attr = '', $post_id = null ) {
    if ( has_post_thumbnail( $post_id ) ) {
        $meta      = wp_get_attachment_metadata( get_post_thumbnail_id( $post_id ) );

        $args['width']  = $meta['sizes'][$size]['width'];
        $args['height'] = $meta['sizes'][$size]['height'];

        $args['alt']   = isset( $attr['alt'] ) ? $attr['alt'] : apply_filters( 'post_title', get_post( $post_id )->post_title );
        $args['title'] = isset( $attr['title'] ) ? $attr['title'] : apply_filters( 'post_title', get_post( $post_id )->post_title );
        $args['class'] = isset( $attr['class'] ) ? $attr['class'] : '';

        $thumbnail = wp_get_attachment_image( get_post_thumbnail_id( $post_id ), $size, false, $args);

        echo $thumbnail;
    } else {
        printf( '<img src="%1$s/images/default-thumb.png" alt="%2$s" />', get_template_directory_uri(), the_title_attribute( [  'echo' => false ] ) );
    }
}
    
respondido por el Alex Sancho 17.01.2015 - 11:55
2

Si solo quieres el tamaño (el ancho y el alto) de la imagen en la etiqueta img, así

<img src="source_of_your_image" width="500" height="250"/>

Luego use el siguiente código php:

$MySrc = "source_of_your_image";
$Myimg = "<img src='$MySrc' ";
$TheImg = (array)getimagesize($MySrc);
$Myimg .= $TheImg[3]."/>";

Para obtener más información sobre el uso de getimagesize (), vaya a enlace

    
respondido por el MMK 05.01.2015 - 23:59
1

Normalmente uso algo como:

if ( current_theme_supports('post-thumbnails') && has_post_thumbnail() ) {
    $post_thumb_id = get_post_thumbnail_id($id);
    $image_data = wp_get_attachment_image_src($post_thumb_id, 'thumbnail');
    $attr_title = esc_attr($title);
    $image = <<<HTML
<div class="thumbnail"><img id="attachment_{$post_thumb_id}" src="{$image_data[0]}" width="{$image_data[1]}" height="{$image_data[2]}" alt="{$attr_title}" /></div>
HTML;

} else {
    $image = '';
}

Con tu código, prueba:

<?php the_title( '<h1 class="clear">', '</h1>' ); ?>
<?php 
if ( has_post_thumbnail() ) { 
    echo '<figure class="clear-right"><a href="';
    the_permalink();
    echo '">';
    # The next line grabs the image source meta using the post thumbnail id
    $image_data = wp_get_attachment_image_src(get_post_thumbnail_id(), 'thumbnail');
    $attr_title = esc_attr( get_the_title() );
    # image_data is an array ( src => '...', 'width' => int, 'height' => 'int', ...)
    # so you can grab $image_data[0] as the source, $image_data[1] as the width, and $image_data[2] as the height
    $image_tag = <<<HTML
<img src="{$image_data[0]}" width="{$image_data[1]}" height="{$image_data[2]}" alt="{$attr_title}" />
HTML;

    #now that tag is built, just draw it out.
    echo $image_tag;
    echo '</a></figure>';
} ?>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" title="Go to the page">&rArr;&nbsp;Read&nbsp;&rArr;</a>

Eso debería conseguirte lo que estás buscando.

    
respondido por el Privateer 19.01.2015 - 07:12
1

wp_get_attachment_image esta función puede ayudarlo.

Usando esta función, tu archivo debería estar debajo ...

entrada-sumario.php

<?php the_title( '<h1 class="clear">', '</h1>' ); ?>
<?php if ( has_post_thumbnail() ) { 
    $attachment_id = get_post_thumbnail_id( get_the_ID() );
    $default_attr = array(
        'src'   => $src,
        'class' => "attachment-$size",
        'alt'   => trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )),
    );

    echo '<figure class="clear-right"><a href="';
    the_permalink();
    echo '">';
    //the_post_thumbnail( 'thumbnail' );
    wp_get_attachment_image( $attachment_id, 'thumbnail',1 , $default_attr );
    echo '</a></figure>';
    } ?>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" title="Go to the page">&rArr;&nbsp;Read&nbsp;&rArr;</a>

Para obtener la altura y el ancho, use la función wp_get_attachment_metadata a lo largo del ancho sobre el código.

No he probado el código desde mi lado, solo tengo un ejemplo de Codex. Espero que esto funcione.

ACTUALIZACIÓN 2:

$attachment_id = get_post_thumbnail_id(get_the_ID()); 
$metadata = wp_get_attachment_metadata($attachment_id);
$height =  $metadata['height'];
$width =  $metadata['width'];
$alt = trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )) ; 
$src =  wp_get_attachment_url( $attachment_id );
$class = 'attachment-'.$attachment_id;

echo '<img src="'.$src.'" height="'.$height.'" width="'.$width.'" alt="'.$alt.'" class="'.$class.'" />';

ACTUALIZACIÓN 3:

para obtener la altura y el ancho de la miniatura, cambia las líneas de código como se muestra a continuación.

$height =  $metadata['sizes']['thumbnail']['height'];
$width  =  $metadata['sizes']['thumbnail']['width'];
    
respondido por el shyammakwana.me 19.01.2015 - 13:12
0

EDITAR: Por defecto, WordPress recortará los pulgares a 150x150px cuando se carguen. Al desmarcar la casilla en Configuración > Medios , WordPress no regenerará las miniaturas existentes, solo generará imágenes proporcionales cuando subas nuevas imágenes. En resumen, creo que su problema no es con el código que está utilizando para mostrar la miniatura, sino con la imagen en sí.

Sin embargo, para obtener un resultado de imagen en miniatura en html con el ancho, alto, alt y clases, el siguiente código producirá los resultados que desea:

$post_id = $post->ID; // current post id
$thumb_id = get_post_thumbnail_id($post_id);
$size = 'thumbnail';
if ( '' != get_the_post_thumbnail($post_id) ) { // checks we have a thumbnail
    echo wp_get_attachment_image($thumb_id, $size);
}

Si el resultado de salida de mi código sigue siendo de 150 px por 150 px, intente volver a cargar la imagen.

    
respondido por el Aron 17.01.2015 - 20:10

Lea otras preguntas en las etiquetas