Hinzufügen von ID zu Bild in erweiterten benutzerdefinierten Feldern image basic display

Question

Ich möchte Bilder gezielt in einer Diashow mit CSS ansprechen.

Ich benutze Wordpress mit erweiterten benutzerdefinierten Felder, um Bild DIVs mit PHP zu generieren.

Mein Code:

<?php $image = get_field('product1_image1'); 

    $size = 'large'; // (thumbnail, medium, large, full or custom size) 
    if($image) { 

    echo wp_get_attachment_image($image, $size); 
} ?> 

Dieser Code erzeugt so etwas wie dieses:

<img width="2000" height="1333" src="http://www.johanvanhengel.com/wp-content/uploads/2016/06/TOR_for_Montis_by_Lambi__Van_Hengel_04-2000x1333.jpg" class="attachment-large size-large cycle-slide cycle-sentinel" alt="text" sizes="(max-width: 2000px) 100vw, 2000px" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;"> 

Ich möchte den erzeugten IMG-Tag eine ID von 'product1_image1' geben, damit sie gezielt werden kann mit CSS.

ex # product1_image1 {Opazität: 1; }

Prost!

Answer 1

ändern ..

echo wp_get_attachment_image($image, $size);

in:

echo wp_get_attachment_image($image, $size, '', array("id" => "product1_image1"));

Wie Sie in der Dokumentation die Funktion unterstützt Attribute als vierten Parameter sehen werden; https://developer.wordpress.org/reference/functions/wp_get_attachment_image/

Answer 2

Die Antwort von danjah ist ganz herunter richtig, aber ich würde ein bisschen weiter gehen, nur um die Lesbarkeit des Codes zu erhöhen ...

diesen Code Versuchen:

<?php 
    $acf_img = get_field('product1_image1'); 

    $size = 'large'; // (thumbnail, medium, large, full or custom size) 
    if($acf_img) { 
    $image = wp_get_attachment_image_src($acf_img, $size); 

    echo '<img src="'.$image[0].'" width="'.$image[1].'" height="'.[2].'" class="your-class" id="product1_image1" />'; 
    } 
?> 

wp_get_attachment_image_src() schafft eine Reihe von dein Bild. [0] => source, [1] => width, [2] => height.

Am Ende macht es keinen Unterschied, aber ich denke, dass dieser Code lesbar ist, weil Sie direkt das HTML-Markup sehen können, das ausgegeben wird. UND: Sie haben die volle Kontrolle über Ihr Markup - manchmal WordPress ändert die Ausgabe einiger Funktionen, die nicht immer gewünscht wird. (Sie implementierten beispielsweise srcsets und ich wollte es nicht auf meinen Seiten, weil ich ein Framework nutze, das meine Bildgrößen basierend auf dem Ansichtsfenster ändert ...)