Как смещать картинку записей WP?

Question

[ololoshka1]

Ситуация такая, выбираю картинку для поста через ACF плагин получается это задний фон(баннер на всю ширину) по высоте где-то 300 px. в верстке сделал что б по центру отображалась картинка и смотрится не очень, как то можно передвигать, смещать картинку, есть ли какие то плагины или реализация в коде?
Например вижу что по высоте слишком заехало и не видно область мне нужную и я ее хочу сместить картинку через админку немного ниже

Answer 1

[Орхан Гасанлы]

Здравствуйте!
Достично того, что вы хотите можно следующим способом:
При помощи ACF в зависимости от выбранного параметра применять тот или иной инлайновый CSS.
Например. создайте чекбоксы для манипуляции следующими CSS свойствами
htmlbook.ru/css/background-position
htmlbook.ru/css/background-size
И например, чекбоксы background-size cover, contain и т.д. А далее выбор пользователя динамически добавляйте инлайном в код и все

Comments

[ololoshka1]

Это я и хотел , есть примеры как такое сделать, применять эти чекбоксы, потому что в PHP не очень понимаю, а потом уже разберусь по примерам.

[ololoshka1]

Например выбрал background-position и потом в окошке писать от 0 до 100%, как примерно такое сделать

[Орхан Гасанлы]

Когда-то реализовывал подобное для клиента. Сейчас поищу исходный код

[ololoshka1]

azerphoenix, о вообще круто, я пока сам пробую, но буду рад если что-то интересное еще посмотрю=)

[Орхан Гасанлы]

Допустим у вас есть div

<div style="
	background-image: <?php the_field('image_url');?>, 
	background-position: <?php the_field('background_position'); ?>,
	background-size: <?php the_field('background_size'); ?>">

	<!-- Содержимое блока тут -->
	
</div>

Создайте 3 типа поля:
Название - image_url тип - Изображение Возвращайте URL
Название - background_position тип Checkbox Возвращайте выбранное значение
Список значений тут - htmlbook.ru/css/background-position
Название - background_size тип Checkbox Возвращайте выбранное значение
Список значений тут - htmlbook.ru/css/background-size

Обратите внимание, что саму картинку я задаю также в CSS, а не вставляю тегом img

[ololoshka1]

azerphoenix, понял, где-то так я и сделал, огромное спасибо, очень выручили))