Дозволити SVG через WordPress Media Uploader

05 04 2021

Додати у файл functions.php або плагіна функціональності:

function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Без цього файли SVG буде відхилено під час спроби завантажити їх за допомогою засобу завантаження медіа.

Іноді цього коду достатньо, але не для всіх svg файлів. Розберемося чому так.

Реальний MIME тип svg файлу, який в WP визначаться php функцією finfo_file може бути двох варіантів:

  • image/svg+xml- коли в коді svg є xml заголовок .
  • image/svg- коли в коді svg є тільки тег <svg> , без будь-яких заголовків.

Сюди потрібно додати обидва ці варіанти, але додати можна тільки один, тому тільки цього коду недостатньо і потрібен другий крок.

Підміна mime типу SVG

Як описано вище попереднього коду для вирішення проблеми недостатньо. Точніше, в результаті перевірки і розбіжності зазначеного MIME типу і реального (отриманого самим WP) MIME тип буде просто обнулений. Повернути його назад нам допоможе хук wp_check_filetype_and_ext .

add_filter( 'wp_check_filetype_and_ext', 'fix_svg_mime_type', 10, 5 );

# Исправление MIME типа для SVG файлов.
function fix_svg_mime_type( $data, $file, $filename, $mimes, $real_mime = '' ){

	// WP 5.1 +
	if( version_compare( $GLOBALS['wp_version'], '5.1.0', '>=' ) )
		$dosvg = in_array( $real_mime, [ 'image/svg', 'image/svg+xml' ] );
	else
		$dosvg = ( '.svg' === strtolower( substr($filename, -4) ) );

	// mime тип был обнулен, поправим его
	// а также проверим право пользователя
	if( $dosvg ){

		// разрешим
		if( current_user_can('manage_options') ){

			$data['ext']  = 'svg';
			$data['type'] = 'image/svg+xml';
		}
		// запретим
		else {
			$data['ext'] = $type_and_ext['type'] = false;
		}

	}

	return $data;
}

Якщо з коду вище прибрати перевірку на право адміністратора, то код стане небезпечним і потенційно відкриває діру в захисті сайту.

Коду вище досить, щоб WоrdPress дозволив завантажувати SVG в медіабібліотеку. Наступний крок чисто візуальний.

Відображення SVG в медіабібліотеки

Після виконаних кроків SVG файли будуть відображатися як документи, а не зображення:

zvychainyi spysok svg
Дозволити SVG через WordPress Media Uploader 4

За розмітку цих блоків з зображеннями відповідає код, що генерується функцією wp_print_media_templates () з файлу wp-includes / media-template.php :

<div class="thumbnail">
	<# if ( data.uploading ) { #>
		<div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div>
	<# } else if ( 'image' === data.type && data.sizes ) { #>
		<div class="centered">
			<img src="{{ data.size.url }}" draggable="false" alt="" />
		</div>
	<# } else { #>
		<div class="centered">
			<# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
				<img src="{{ data.image.src }}" class="thumbnail" draggable="false" alt="" />
			<# } else if ( data.sizes && data.sizes.medium ) { #>
				<img src="{{ data.sizes.medium.url }}" class="thumbnail" draggable="false" alt="" />
			<# } else { #>
				<img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
			<# } #>
		</div>
		<div class="filename">
			<div>{{ data.filename }}</div>
		</div>
	<# } #>
</div>

Сенс коду в тому, що він відобразить зображення, якщо

  • у нього є властивість src (посилання на зображення) і воно не дорівнює посиланням на іконку документа (будь-який файл по суті документ);
  • або якщо у зображення є розмір medium (svg файл взагалі не кропать).

Файл SVG не має ні першого ні другого, тому нам потрібно зімітувати самостійно один з цих варіантів і в цьому нам допоможе фільтр wp_prepare_attachment_for_js , використовуйте будь-який з варіантів за смаком.

Варіант 1 - З висновком назви файлу

zvychainyi spysok svg z nazvamy
Дозволити SVG через WordPress Media Uploader 5
add_filter( 'wp_prepare_attachment_for_js', 'show_svg_in_media_library' );

# Формирует данные для отображения SVG как изображения в медиабиблиотеке.
function show_svg_in_media_library( $response ) {

	if ( $response['mime'] === 'image/svg+xml' ) {

		// С выводом названия файла
		$response['image'] = [
			'src' => $response['url'],
		];
	}

	return $response;
}

Варіант 2 - Без виведення назви файлу

spysok svg fajliv bez ih nazv 1
Дозволити SVG через WordPress Media Uploader 6
add_filter( 'wp_prepare_attachment_for_js', 'show_svg_in_media_library' );

# Формирует данные для отображения SVG как изображения в медиабиблиотеке.
function show_svg_in_media_library( $response ) {

	if ( $response['mime'] === 'image/svg+xml' ) {

		// Без вывода названия файла
		$response['sizes'] = [
			'medium' => [
				'url' => $response['url'],
			],
			// при редактирования картинки
			'full' => [
				'url' => $response['url'],
			],
		];
	}

	return $response;
}
Поширити

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *