Вставка картинок при наполнении сайта на WordPress

Очень часто приходится наполнять сайт используя классический редактор WordPress, и очень часто этот редактор криво работает с картинками, поэтому в этой шпаргалке я приведу несколько примеров работы с текстом и картинками в этом редакторе. Что бы было все красиво, ровно, аккуратно и самое главное адаптивно.

Обтекание картинок текстом

Нужно разместить картинку и сделать что бы текст обтекал ее. Создаем <div class="block-wp">, внутри него размещаем две картинки с классом "image-wp-notalign" и "image-wp-align" и все это нужно делать без перехода на следующую строку, тогда весь текст в div будет обтекать нашу картинку с той стороны, которую мы укажем в параметре "align".

Пример

<div class="block-wp">
<img class="image-wp-notalign" src="https://vita-tereshenko.ru/wp-content/uploads/2022/08/photo.jpg" alt="">
<img class="image-wp-align" src="https://vita-tereshenko.ru/wp-content/uploads/2022/08/photo.jpg" alt="" align="right">
ТЕКСТ ТЕКСТ ТЕКСТ
</div>

В стилях при этом добавляем.

CSS

.block-wp {
	margin: 0 0 10px 0;}
img.image-wp-align {
	padding: 10px;
	width: 40%;
	height: auto;}
img.image-wp-notalign {
	padding: 0 0 10px 0;
	width: 100%;
	height: auto;
	display: none;}

@media (max-width: 768px) {
img.image-wp-align {
	display: none;}
img.image-wp-notalign {
	display: block;}}

ШПАРГАЛКА НЕ ОКОНЧЕНА