Abrufen von Anhangsbildern src und Hinzufügen von Klassen

8

Ich habe Beiträge, deren jeweils 4 angehängte Bilder enthalten. Was ich in meiner single.php versuche, ist, dass alle 4 Bilder src in der Lage sind, jedem Bild verschiedene Klassen hinzuzufügen.

<img class="image_1 no_lazy" src="first attached image src"/>
<img class="image_2" src="second attached image src"/>
<img class="image_3" src="third attached image src"/>
<img class="image_4" src="fourth attached image src"/>

Hier ist, was ich versucht habe, aber ich bekomme ein Array anstatt das src zu bekommen ... Ich denke, ich bin der Lösung wirklich nahe, aber ich kann nicht herausfinden, was ich falsch mache ...

<?php
  global $post;
  $args = array( 
    'post_parent' => $post->ID, 
    'post_type' => 'attachment', 
    'post_mime_type' => 'image', 
    'orderby' => 'menu_order', 
    'order' => 'ASC', 
    'numberposts' => 4 );
   $images = get_posts($args); ?>

<img class="image_1 no_lazy" src="<?php  echo wp_get_attachment_image_src( $images[0]->ID, 'full' ); ?>"/>
<img class="image_2" src="<?php  echo wp_get_attachment_image_src( $images[1]->ID, 'full' ); ?>"/>
<img class="image_3" src="<?php  echo wp_get_attachment_image_src( $images[2]->ID, 'full' ); ?>"/>
<img class="image_4" src="<?php  echo wp_get_attachment_image_src( $images[3]->ID, 'full' ); ?>"/>

kann mir jemand dabei helfen?

Vielen Dank

user2882154
quelle

Antworten:

13

Wenn Sie nur eine zusätzliche Klasse hinzufügen möchten, sollten Sie verwenden wp_get_attachment_image. Es gibt nur wenige zusätzliche Parameter, und der letzte wird zum Festlegen von Klassennamen verwendet.

Beispielnutzung:

<?php echo wp_get_attachment_image( get_the_ID(), 'thumbnail', "", ["class" => "my-custom-class"] ); ?>

Der Hauptvorteil dieses Ansatzes ist, dass Sie auch die gesamten srcsetAttribute kostenlos erhalten.

Ionut Staicu
quelle
0

wp_get_attachment_image_srcgibt ein Array mit 3 Elementen zurück; die Bild-URL, die Breite und die Höhe. Sie müssen den ersten Index des Ergebnisses wiederholen.

Tatsächlich können Sie Ihren Code mithilfe einer foreachSchleife etwas schlanker machen :

foreach ( $images as $i => $image ) {
    $src = wp_get_attachment_image_src( $image->ID, 'full' );

    echo '<img class="image_' . ++$i;
    if ( $i === 1 )
        echo ' no_lazy';
    echo '" src="' . $src[0] . '" />';
}
TheDeadMedic
quelle
Wenn Sie nur die URL benötigen, können Sie verwendenwp_get_attachment_image_url()
iantsch