Usuń wymiar z wp_get_attachment_image


10

Mam problem z usunięciem szerokości i wysokości z obrazów załączników podczas korzystania z wp_get_attachment_image. Właśnie tego używam do wyświetlenia obrazu

 <?php echo $image = wp_get_attachment_image( $entry['slide_image_id'], true, 'full'); ?>

Jak to wygląda kod źródłowy

 <img width="150" height="108" src="http://website:8888/wp-content/uploads/2015/12/cupcakes-and-cosmetics-logo.png" class="attachment-1 size-1" alt="cupcakes-and-cosmetics-logo" />

Chciałbym, aby wyświetlało się w ten sposób

 <img src="http://website:8888/wp-content/uploads/2015/12/cupcakes-and-cosmetics-logo.png" class="attachment-1 size-1" alt="cupcakes-and-cosmetics-logo" />

Obraz jest pobierany z powtarzalnego pola pliku z wpisem o identyfikatorze slide_image_id. Rozglądam się i zauważam, że mogę użyć wp_get_attachment_image_url, ale kiedy używam go z powyższym kodem, obraz się nie wyświetla. Czy coś robię źle?

 <?php echo $image = wp_get_attachment_image_url( $entry['slide_image_id'], true, 'full'); ?>

Uwaga dodatkowa: $ entry ['slide_image_id'] służy do wywołania pola mojego powtarzalnego pliku.


wp_get_attachment_image_url()zwraca adres URL - nie element obrazu.
bosco

Jakie będzie najlepsze rozwiązanie tego, czego szukam @bosco
user3756781

Wow, jak denerwujące jest to, że każdy atrybut danych wyjściowych img jest filtrowalny, z add_filter('wp_get_attachment_image_attributes' ...wyjątkiem tego, że tylko wysokość i szerokość są zakodowane na stałe.
squarecandy

Odpowiedzi:


9

Twoje argumenty za obie wp_get_attachment_image_url()i wp_get_attachment_image()są w złej kolejności - sprawdź dokumentację związaną szczegóły. Ponadto wp_get_attachment_image_url()zwraca adres URL - nie rzeczywisty element obrazu.

Usunięcie atrybutów widthi heightz <img>elementów jest niewskazane: jeśli na rozmiar strony w jakikolwiek sposób wpływa rozmiar obrazu, układ „zepsuje się”, gdy tylko CSS, który określa wymiary obrazu lub sam obraz się załaduje.

Niestety, wp_get_attachment_image()funkcja jest obecnie (od WordPress 4.4.1) zakodowana na stałe , aby wyprowadzać atrybuty widthi height <img>(patrz bilet # 14110 ), więc musisz sam zbudować znaczniki obrazu. Można to zrobić, pobierając wskazówki ze wp_get_attachment_image()źródła :

<?php
  $attachment = get_post( $entry['slide_image_id'] );

  if( $attachment ) {
    $img_size_class = 'full';
    $img_atts = array(
      'src'   => wp_get_attachment_image_url( $entry['slide_image_id'], $img_size_class, false ),
      'class' => 'attachment-' . $img_size_class . ' size-' . $img_size_class,
      'alt'   => trim(strip_tags( get_post_meta( $entry['slide_image_id'], '_wp_attachment_image_alt', true) ) )
    );

    //If an 'alt' attribute was not specified, try to create one from attachment post data
    if( empty( $img_atts[ 'alt' ] ) )
      $img_atts[ 'alt' ] = trim(strip_tags( $attachment->post_excerpt ));
    if( empty( $img_atts[ 'alt' ] ) )
      $img_atts[ 'alt' ] = trim(strip_tags( $attachment->post_title ));

    $img_atts = apply_filters( 'wp_get_attachment_image_attributes', $img_atts, $attachment, $img_size_class );

    echo( '<img ' );
    foreach( $img_atts as $name => $value ) {
      echo( $name . '="' . $value . '" ';
    }
    echo( '/>' );
  }
?>

Postępowałem zgodnie z linkiem, który mi przesłałeś i mogłem wygenerować obraz bez problemu, a także skorzystać z twojego rozwiązania. Jedyny problem, jaki mam, to problem ze znacznikiem alt. Za pomocą linku, który mi przesłałeś, tag alt nie jest generowany, a twój jest statyczny (dlatego myślałem, że wp_get_attachment_image będzie najlepszą opcją). Jak wygenerowałbym tag alt na przykładzie, który wyświetlasz? @bosco
user3756781

Sprawa okazała się bardziej skomplikowana niż się spodziewałem. Zaktualizowałem moją odpowiedź, aby zawierała <img>bity generowania atrybutów z wp_get_attachment_image()- chociaż pominąłem części srcseti sizesużyte do responsywnych obrazów. Jeśli są one potrzebne, get_sizeless_attachment_image()wskazane byłoby utworzenie funkcji .
bosco

dziękuję, działało idealnie. Wystąpił błąd w kodzie wykonania echa braku znaku ($ name. '= "'. $ Value. '"'; Powinno to być echo ($ name. '= "'. $ Value. '"') ;. Jeszcze raz dziękuję za pomoc @bosco
user3756781

12

Obejście

Zrobiłem podstawowe kopanie / testowanie i znalazłem obejście przez wp_constrain_dimensionsfiltr:

// Add filter to empty the height/width array
add_filter( 'wp_constrain_dimensions', '__return_empty_array' );
// Display image html
echo wp_get_attachment_image( $entry['slide_image_id'], 'full', true );
// Remove filter again
remove_filter( 'wp_constrain_dimensions', '__return_empty_array' );

Wydaje się, że pozwala nam to usunąć wysokość i atrybuty szerokości z wygenerowanego obrazu HTML wp_get_attachment_image(), bez wychodzenia z kanonów reg-ex. Możemy również użyć wp_get_attachment_image_srcfiltra w podobny sposób, aby usunąć szerokość / wysokość, ale zachować adres URL .

Notatki

To rozwiązanie usunie srcseti sizesatrybuty, jak również. Ale jest to również możliwe, aby ustawić srcset i rozmiary atrybutów poprzez czwartego $attrwejściowego argument.

Jak wspomniano @bosco, zmieniłeś argumenty wejściowe ikony i rozmiaru w:

echo wp_get_attachment_image( $entry['slide_image_id'], true, 'full' );

Zamiast tego użyj tego:

echo wp_get_attachment_image( $entry['slide_image_id'], 'full', true );

1

Po prostu użyłem CSS do tego. Nie działa we wszystkich scenariuszach, ale często wystarczy. Zróbmy zdjęcie 300 x 300 pikseli:

max-height: 300px;
max-width: 300px;
width: auto;

Ogranicza to wymiary obrazu bez utraty jego stosunku szerokości do wysokości. W przeciwnym razie możesz również użyć REGEX:

$html = preg_replace(array('/width="[^"]*"/', '/height="[^"]*"/'), '', $html);

To były niektóre alternatywy. Powodzenia.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.