wake-up-neo.net

Zeigen Sie die Eigenschaften für Höhe und Breite mit the_post_thumbnail () oder einer verwandten Funktion an

Problem

Ich möchte die Eigenschaften height und width im Element img des Vorgestellten Bildes für einen Beitrag, eine Seite oder einen benutzerdefinierten Beitragstyp.

Umgebung

  1. Ich habe ein benutzerdefiniertes Thema basierend auf dem BlankSlate-Thema .
  2. Das neue fünfundzwanzig-Thema zeigt die Eigenschaften auch nicht an.
  3. In Einstellungen/Medien habe ich die Standardbildgrößen nicht geändert.
  4. functions.php enthält add_theme_support( 'post-thumbnails' );.
  5. Ich habe keine benutzerdefinierten Bildgrößen.
  6. In Einstellungen/Medien lautet das Kontrollkästchen "Miniaturansicht auf exakte Abmessungen zuschneiden" nicht aktiviert. Daher habe ich einige Thumbnails, die nicht genau 150 px x 150 px groß sind.
  7. Bearbeiten: Ich möchte immer noch die anderen automatischen Eigenschaften der Funktionen "Ausgewähltes Bild", z. B. "alt" und "class".

Aktueller Output

Auf dieser Beispielseite auf meiner Website befindet sich derzeit der vollständige HTML-Code für das vorgestellte Bild

<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">

Als Idealist möchte ich normalerweise die Höhe und Breite, aber der Mangel an Höhe führt bei meinem aktuellen Thema zu einem Layoutproblem. Wie Sie sehen können, überschreitet das letzte Featured Image das Ende des <section> -Elements und es sieht schrecklich aus.

Aktueller Code

Die header.php ist groß, daher werde ich sie überspringen, es sei denn, jemand glaubt, mein Problem liege darin.

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(); ?>

entry-summary.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"

Ich kann mir nicht vorstellen, warum diese Klasse die Dinge beeinflussen würde, aber falls ich mich irre, füge ich sie hier ein.

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

Fehlgeschlagene Versuche

  1. Ich habe versucht, wp_get_attachment_image_src() zu verwenden, aber ich glaube, ich habe es nicht richtig codiert, weil ich nicht einmal das Bild zur Anzeige bringen konnte. Ich habe kein Beispiel für den Code, den ich ausprobiert habe.
  2. Ich habe versucht, the_post_thumbnail( $size, $attr ) zu verwenden und das $attr-Array basierend auf der Dokumentation in wp_get_attachment_image() anzupassen, aber ich bin mir ziemlich sicher, dass dies niemals funktionieren wird.

Code, Konzepte und Referenzen?

Kann mir bitte jemand bei den fehlenden Codes, Konzepten und Referenzmaterialien helfen? Ich habe das Gefühl, dass ich mich ein wenig albern fühle, wenn ich die Antwort erfahre, aber ich möchte dieses Problem beheben.

Danke im Voraus.

2
hunterhogan

Sie können Bildattribute mit " wp_get_attachment_metadata " sammeln, siehe Beispiel unten als Ausgangspunkt

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 ] ) );
    }
}
1
Alex Sancho

Wenn Sie nur die Größe (die Breite und die Höhe) des Bildes im img-Tag wie folgt festlegen möchten

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

Dann benutze den folgenden PHP-Code:

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

Weitere Informationen zur Verwendung von getimagesize () finden Sie unter http://php.net/manual/en/function.getimagesize.php

2
MMK

Normalerweise benutze ich etwas wie:

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 = '';
}

Versuchen Sie mit Ihrem Code Folgendes:

<?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>

Das sollte Ihnen das bringen, wonach Sie suchen.

1
Privateer

wp_get_attachment_image Diese Funktion kann Ihnen helfen.

Mit dieser Funktion sollte Ihre Datei wie folgt aussehen ...

entry-summary.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>

Um Höhe und Breite zu erhalten, verwenden Sie die Funktion wp_get_attachment_metadata entlang der Breite über dem Code.

Ich habe den Code nicht von meiner Seite aus getestet, sondern nur ein Beispiel aus dem Codex. Hoffe das wird funktionieren.

UPDATE 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.'" />';

UPDATE 3:

um die Höhe und Breite des Thumbnails zu bestimmen, ändern Sie die Codezeilen wie folgt.

$height =  $metadata['sizes']['thumbnail']['height'];
$width  =  $metadata['sizes']['thumbnail']['width'];
1
shyammakwana.me

BEARBEITEN: Standardmäßig schneidet WordPress Thumbs beim Hochladen auf 150x150px zu. Wenn Sie das Kontrollkästchen in Einstellungen> Medien WordPress deaktivieren, werden vorhandene Miniaturansichten nicht neu erstellt. Es werden nur proportionale Bilder generiert, wenn Sie neue Bilder hochladen. Kurz gesagt, ich glaube, Ihr Problem ist nicht der Code, mit dem Sie die Miniaturansicht anzeigen, sondern das Bild selbst.

Der folgende Code führt jedoch zu den gewünschten Ergebnissen, um eine Ausgabe eines Miniaturbilds in HTML mit Breite, Höhe, Alt und Klassen zu erhalten:

$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);
}

Wenn das Ausgabeergebnis unter Verwendung meines Codes immer noch 150 x 150 Pixel beträgt, versuchen Sie, das Bild erneut hochzuladen.

0
Aron