Do tej pory nie miałem problemów z miniaturami tła w moim motywie. Jednak teraz, gdy próbuję użyć SVG jako wyróżnionego obrazu, coś się psuje. Problem wydaje się być związany z szerokością SVG zwracaną jako zero przez wp_get_attachment_image_src(). Więc to, co próbuję zrobić, to dowiedzieć się, jak wyodrębnić informacje o szerokości i wysokości z pliku SVG, a następnie ustawić je na odpowiednie wartości w polach bazy danych SVG, co nie okazuje się łatwe.

Uwaga: nie mam ogólnego problemu z przesyłaniem lub renderowaniem plików svg, wyświetlają się one prawidłowo w moim logo.

Błąd i kod: dowód zerowej szerokości

Oto błąd, który WordPress wyświetla na stronie:
Warning: Division by zero in /wp-content/themes/tesseract/functions.php on line 771

To jest kod w pliku functions.php przed błędem (w linii 771).

    /*759*/ function tesseract_output_featimg_blog() {
    /*760*/
    /*761*/ global $post;
    /*762*/
    /*763*/ $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
    /*764*/ $featImg_display = get_theme_mod('tesseract_blog_display_featimg');
    /*765*/ $featImg_pos = get_theme_mod('tesseract_blog_featimg_pos');
    /*766*/
    /*767*/ $w = $thumbnail[1]; /* supposed to return thumbnail width */
    /*768*/ $h = $thumbnail[2];  /* supposed to return thumbnail height */
    /*769*/ $bw = 720;
    /*770*/ $wr = $w/$bw;  
    /*771*/ $hr = $h/$wr; /**** this is the line that throws the error ****/

Możesz zobaczyć, że jest podział z $wr jako mianownik. Wygląda na to, że $wr jest obliczany jako zero, ponieważ jest to jedyny czynnik niestały, $wrównież wynosi zero (drugi czynnik wynosi 720, więc nie można go winić). $wWartość jest ustalana przez $thumbnail[1]. $thumbnail[1]Wartość jest ustawiona w linii 763 za pomocą tego kodu:

$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );

Zgodnie z Kodeksem druga wartość w tablicy zwracanej przez funkcję wp_get_attachment_image_src(tj $thumbnail[1]) jest rzeczywiście szerokością miniatury. Ta wartość wydaje się być zerowa, ponieważ jest taka sama jak $wco rzeczywiście jest mianownikiem w wierszu 771. 🙁

Ważna uwaga: Mój motyw implementuje miniatury jako obrazy tła

Używany przeze mnie motyw nadrzędny „Tesseract” umieszcza wyróżnione obrazy jako obrazy tła kotwic/ <a> elementów, zamiast umieszczać je jako <img> elementy. Nie sądzę, aby to było przyczyną problemu, ale przy oferowaniu rozwiązań należy pamiętać, aby były one zgodne z obrazami tła, a nie <img> obiekty.

Nie udało się zastosować poprawki nr 1:

Znalazłem tę stronę internetową, która oferuje poprawkę na problemy z używaniem SVG jako wyróżnionych obrazów. Sugeruje ona, że ​​problem jest związany z obliczaniem szerokości. Nie mogę jednak zastosować tej poprawki, ponieważ dotyczy ona img element, który ma plik SVG jako srcmam <a> element, którego lokalizacja SVG jest ustawiona na background-image–url.

To jest rozwiązanie

function custom_admin_head() {
  $css="";
  $css="td.media-icon img[src$=".svg"] { width: 100% !important; height: auto !important; }";
  echo '<style type="text/css">'.$css.'</style>';
}
add_action('admin_head', 'custom_admin_head');

Poprawka nr 2 (minimalna szerokość za pomocą CSS) nie zadziałała

Opierając się na pomyśle, który zaczerpnąłem ze strony powyżej, że problemem może być szerokość, spróbowałem ustawić minimalną szerokość na 50%, używając tylko CSS <a>Oto kod:

a.entry-post-thumbnail.above {
    min-width: 50% !important;
} 

Moje narzędzia programistyczne pokazały, że CSS „zajęło”, że min-width zostało ustawione na 50%. Nadal WP rzucił ten sam błąd, obraz nie był wyświetlany. Być może CSS nie ustawia go przed uruchomieniem functions.php wp_get_attachment_image_src, więc to nie ma znaczenia?

Czy ktoś ma jakieś wskazówki, jak obejść to zerowe obliczenie? Naprawdę chciałbym, żeby to działało z obrazami tła i bez konieczności nadpisywania zbyt dużej części motywu nadrzędnego.

Rozwiązanie nr 3 (podłączenie filtra) nie zadziałało.

Dzięki pomocy @Milo, @NathanJohnson i @prosti udało mi się wypróbować filtr, aby zmienić wp_get_attachment_image_src(). Kod nie generuje błędu, ale nie usuwa błędu dzielenia ani nie wyświetla SVG. To jest fragment, który umieściłem w functions.php. Być może priorytety są złe? :

add_filter( 'wp_get_attachment_image_src', 'fix_wp_get_attachment_image_svg', 10, 4 );  /* the hook */

     function fix_wp_get_attachment_image_svg($image, $attachment_id, $size, $icon) {
        if (is_array($image) && preg_match('/\.svg$/i', $image[0]) && $image[1] == 1) {
            if(is_array($size)) {
                $image[1] = $size[0];
                $image[2] = $size[1];
            } elseif(($xml = simplexml_load_file($image[0])) !== false) {
                $attr = $xml->attributes();
                $viewbox = explode(' ', $attr->viewBox);
                $image[1] = isset($attr->width) && preg_match('/\d+/', $attr->width, $value) ? (int) $value[0] : (count($viewbox) == 4 ? (int) $viewbox[2] : null);
                $image[2] = isset($attr->height) && preg_match('/\d+/', $attr->height, $value) ? (int) $value[0] : (count($viewbox) == 4 ? (int) $viewbox[3] : null);
            } else {
                $image[1] = $image[2] = null;
            }
        }
        return $image;
    } 

Podsumowanie:

Sądzę, że muszę dowiedzieć się, jak wyodrębnić informacje o szerokości z samego pliku SVG i dodać je do bazy danych WP, zanim functions.php wykona obliczenia w wierszu 771. Jeśli wiesz jak, Twoja wskazówka będzie bardzo doceniona.

Niektóre potencjalnie pomocne zasoby

• Informacje zawarte w tym pytaniu wydają się być pomocne, a fragment udostępniony przez @Josha pozwolił mi w końcu obejrzeć moje pliki SVG w bibliotece multimediów, jednak wyróżniony obraz nadal jest uszkodzony.
• Wydaje się, że to pytanie ma rozwiązania bazujące na XML, ale nie wiem, jak dostosować je do WP.
• Jeden z komentujących poniżej również zwrócił moją uwagę na ten filtr, który wydaje się być istotny.

Nagłówek pliku SVG

Oto nagłówek SVG:

<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg version="1.1" id="Layer_1" xmlns=" xmlns:xlink=" x="0px" y="0px" width="475.419px" height="406.005px" viewBox="0 0 475.419 406.005" enable-background="new 0 0 475.419 406.005" xml:space="preserve">