miniatury postów – Nie można wyodrębnić i ustawić wymiarów SVG
![miniatury postów – Nie można wyodrębnić i ustawić wymiarów SVG](https://oen.pl/wp-content/uploads/2023/09/apple-touch-icon@2.png)
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, $w
również wynosi zero (drugi czynnik wynosi 720, więc nie można go winić). $w
Wartość 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 $w
co 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 src
mam <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">