Медиафайлы (картинки) в WordPress

При загрузке картинки WP сохраняет данные в базу данных: добавляет данные в таблицу wp_posts и устанавливает метаданные.

Т.е. данные картинок хранятся там же где хранятся записи (посты), но логика хранения, обработки и использования полей таблицы сильно отличается, поэтому я вынес этот тип сущностей в отдельный тип.

Ниже рассмотрим как WordPress хранит вложения в БД (картинки или файлы), т.е рассмотрим структуру картинок (медиа-файлов) и то, как хранятся картинки в ВордПресс.

Оглавление:

Пример с ресайзом (WP 5.3)
Пример с большой фоткой -scaled (WP 5.3)
Пример с изменением ориентации -rotated (WP 5.3)
PHP Функции Получения вложений
PHP Функции Получения картинок
PHP Функции Загрузки файлов (медиа)

При загрузке картинки на сайт в таблицу wp_posts добавляется следующие данные:

global $wpdb;
$po = $wpdb->get_row( "SELECT * from $wpdb->posts where ID = 16754" );
print_r( $po );

/*
stdClass Object (
	[ID] => 16754
	[post_author] => 1
	[post_date] => 2024-01-14 08:15:42
	[post_date_gmt] => 2024-01-14 03:15:42
	[post_content] => Description text
	[post_title] => Image title text
	[post_excerpt] => Caption text
	[post_status] => inherit
	[comment_status] => open
	[ping_status] => closed
	[post_password] =>
	[post_name] => clipboard-image-845920
	[to_ping] =>
	[pinged] =>
	[post_modified] => 2024-01-19 07:33:23
	[post_modified_gmt] => 2024-01-19 02:33:23
	[post_content_filtered] =>
	[post_parent] => 12014
	[guid] => //example.com/wp-content/uploads/2024/01/clipboard-image-845920.png
	[menu_order] => 0
	[post_type] => attachment
	[post_mime_type] => image/png
	[comment_count] => 0
)
*/

Полезных полей в этой таблице не много, это:

post_title — Заголовок.
post_content — Описание (указывается в админке).
post_excerpt — Подпись caption.
post_mime_type — MIME тип.
post_type — Всегда "attachment".
post_date, post_date_gmt — Дата добавления вложения.
guid — URL файла. Но доверять этому полю не всегда можно, надежнее получить URL через функцию wp_get_attachment_url().

Значение ALT атрибута

Хранится в таблице метаполей wp_postmeta, в мета-поле _wp_attachment_image_alt.

В WordPress нет специальной функции для получения alt атрибута картинки (справедливо для WP 6.4).

Чтобы получить alt атрибут используйте такой код:

$alt_text = get_post_meta( $post->ID, '_wp_attachment_image_alt', true );

Пример с ресайзом (WP 5.3)

Пример когда изображение было загружено и отредактировано в редакторе (было сделано кадрирование).

После этого измененная картинка полностью заменяет оригинал. Оригинал (файл) при этом не удаляется, а единственное упоминание о нём сохраняется в метаполе _wp_attachment_backup_sizes.

Пример с большой фоткой `-scaled` (WP 5.3)

Подробнее про scaled размер читайте здесь.

Просто загружена большая фотка с которой создались все возможные размеры.

Пример с изменением ориентации `-rotated` (WP 5.3)

Если при загрузке картинки в её EXIF данных указанна ориентация и она отличается от 1. То это значит что физический фйал картинки имеет нестандартную ориентацию (ориентация картинки нарушена) и ВП это исправляет на основе указанных данных.

Как ВП обрабатывает ориентацию можно посмотреть в функции wp_create_image_subsizes() > WP_Image_Editor::maybe_exif_rotate():

2 - Flip horizontally.
3 - Rotate 180 degrees or flip horizontally and vertically.
4 - Flip vertically.
5 - Rotate 90 degrees counter-clockwise and flip vertically.
6 - Rotate 90 degrees clockwise (270 counter-clockwise).
7 - Rotate 90 degrees counter-clockwise and flip horizontally.
8 - Rotate 90 degrees counter-clockwise.

Рассмотрим на примере.

Допустим мы загрузили картинку Landscape_2.jpg у которой указаны такие exif данные:
Данные берутся функцией exif_read_data():

$exif_data = exif_read_data( ABSPATH .'../wp-content/uploads/2022/06/Landscape_2.jpg' );

print_r( $exif_data );

/*
Array (
	[FileName] => Landscape_2.jpg
	[FileDateTime] => 1656265839
	[FileSize] => 349209
	[FileType] => 2
	[MimeType] => image/jpeg
	[SectionsFound] => ANY_TAG, IFD0
	[COMPUTED] => Array
		(
			[html] => width="1800" height="1200"
			[Height] => 1200
			[Width] => 1800
			[IsColor] => 1
			[ByteOrderMotorola] => 1
		)

	[Orientation] => 2
	[XResolution] => 72/1
	[YResolution] => 72/1
	[ResolutionUnit] => 2
	[YCbCrPositioning] => 1
)

После загрузки данные ВП создаст копию загруженного изображения с суффикcом -rotated. Т.е. по итогу в папке загрузок будет лежать оригинальная картинка и измененная картинка. Измененная картинка, станет основной, а оригинальная будет указана в метаданных в ключе original_image:

Данные из таблицы wp_posts:

+-----------------------+--------------------------------------------------------------+
| Field                 | Value                                                        |
+-----------------------+--------------------------------------------------------------+
| ID                    | 1863                                                         |
| post_author           | 1                                                            |
| post_date             | 2022-06-26 17:50:39                                          |
| post_date_gmt         | 2022-06-26 17:50:39                                          |
| post_content          |                                                              |
| post_title            | Landscape_2                                                  |
| post_excerpt          |                                                              |
| post_status           | inherit                                                      |
| comment_status        | open                                                         |
| ping_status           | closed                                                       |
| post_password         |                                                              |
| post_name             | landscape_2                                                  |
| to_ping               |                                                              |
| pinged                |                                                              |
| post_modified         | 2022-06-26 17:50:39                                          |
| post_modified_gmt     | 2022-06-26 17:50:39                                          |
| post_content_filtered |                                                              |
| post_parent           | 0                                                            |
| guid                  | http://wptest.loc/wp-content/uploads/2022/06/Landscape_2.jpg |
| menu_order            | 0                                                            |
| post_type             | attachment                                                   |
| post_mime_type        | image/jpeg                                                   |
| comment_count         | 0                                                            |
+-----------------------+--------------------------------------------------------------+

Данные из таблицы wp_postmeta:

+---------+-------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------+
| post_id | meta_key                | meta_value                                                                                                                                             |
+---------+-------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------+
| 1863    | _wp_attached_file       | 2022/06/Landscape_2-rotated.jpg                                                                                                                        |
| 1863    | _wp_attachment_metadata | a:7:{s:5:"width";i:1800;s:6:"height";i:1200;s:4:"file";s:31:"2022/06/Landscape_2-rotated.jpg";s:8:"filesize";i:400881;s:5:"sizes";a:6:{s:6:"medium";a: |
|         |                         | 5:{s:4:"file";s:23:"Landscape_2-300x200.jpg";s:5:"width";i:300;s:6:"height";i:200;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:14295;}s:5:"large |
|         |                         | ";a:5:{s:4:"file";s:24:"Landscape_2-1024x683.jpg";s:5:"width";i:1024;s:6:"height";i:683;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:130033;}s:9 |
|         |                         | :"thumbnail";a:5:{s:4:"file";s:23:"Landscape_2-150x150.jpg";s:5:"width";i:150;s:6:"height";i:150;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:60 |
|         |                         | 50;}s:12:"medium_large";a:5:{s:4:"file";s:23:"Landscape_2-768x512.jpg";s:5:"width";i:768;s:6:"height";i:512;s:9:"mime-type";s:10:"image/jpeg";s:8:"fil |
|         |                         | esize";i:75295;}s:9:"1536x1536";a:5:{s:4:"file";s:25:"Landscape_2-1536x1024.jpg";s:5:"width";i:1536;s:6:"height";i:1024;s:9:"mime-type";s:10:"image/jp |
|         |                         | eg";s:8:"filesize";i:283925;}s:14:"post-thumbnail";a:5:{s:4:"file";s:25:"Landscape_2-1568x1045.jpg";s:5:"width";i:1568;s:6:"height";i:1045;s:9:"mime-t |
|         |                         | ype";s:10:"image/jpeg";s:8:"filesize";i:295929;}}s:10:"image_meta";a:12:{s:8:"aperture";s:1:"0";s:6:"credit";s:0:"";s:6:"camera";s:0:"";s:7:"caption"; |
|         |                         | s:0:"";s:17:"created_timestamp";s:1:"0";s:9:"copyright";s:0:"";s:12:"focal_length";s:1:"0";s:3:"iso";s:1:"0";s:13:"shutter_speed";s:1:"0";s:5:"title"; |
|         |                         | s:0:"";s:11:"orientation";i:1;s:8:"keywords";a:0:{}}s:14:"original_image";s:15:"Landscape_2.jpg";}                                                     |
| 1863    | _edit_lock              | 1656265849:1                                                                                                                                           |
+---------+-------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------+

Массив: _wp_attachment_metadata:

[
	'width' => 1800,
	'height' => 1200,
	'file' => '2022/06/Landscape_2-rotated.jpg',
	'filesize' => 400881,
	'sizes' =>
		[
			'medium'         =>
				[
					'file'      => 'Landscape_2-300x200.jpg',
					'width'     => 300,
					'height'    => 200,
					'mime-type' => 'image/jpeg',
					'filesize'  => 14295,
				],
			'large'          =>
				[
					'file'      => 'Landscape_2-1024x683.jpg',
					'width'     => 1024,
					'height'    => 683,
					'mime-type' => 'image/jpeg',
					'filesize'  => 130033,
				],
			'thumbnail'      =>
				[
					'file'      => 'Landscape_2-150x150.jpg',
					'width'     => 150,
					'height'    => 150,
					'mime-type' => 'image/jpeg',
					'filesize'  => 6050,
				],
			'medium_large'   =>
				[
					'file'      => 'Landscape_2-768x512.jpg',
					'width'     => 768,
					'height'    => 512,
					'mime-type' => 'image/jpeg',
					'filesize'  => 75295,
				],
			'1536x1536'      =>
				[
					'file'      => 'Landscape_2-1536x1024.jpg',
					'width'     => 1536,
					'height'    => 1024,
					'mime-type' => 'image/jpeg',
					'filesize'  => 283925,
				],
			'post-thumbnail' =>
				[
					'file'      => 'Landscape_2-1568x1045.jpg',
					'width'     => 1568,
					'height'    => 1045,
					'mime-type' => 'image/jpeg',
					'filesize'  => 295929,
				],
		],
	'image_meta' =>
		[
			'aperture'          => '0',
			'credit'            => '',
			'camera'            => '',
			'caption'           => '',
			'created_timestamp' => '0',
			'copyright'         => '',
			'focal_length'      => '0',
			'iso'               => '0',
			'shutter_speed'     => '0',
			'title'             => '',
			'orientation'       => 1,
			'keywords'          =>
				[
				],
		],
	'original_image' => 'Landscape_2.jpg',
]

WP не всегда правильно изменяет ориентацию картинки, чтобы все работало правильно есть плагин: https://github.com/gagan0123/fix-image-rotation