Как отобразить изображение при условии, что был сделан выбор?

Вопрос или проблема

У меня есть пользовательский тип записи ‘Holidays’ и пользовательское поле (созданное с помощью Advanced Custom Fields), называемое ‘activity_rating’. Поле activity_rating представляет собой выпадающий список со значениями от 1 до 5.

Если празднику присвоен рейтинг “очень легко” (1), то я хотел бы отображать определенное изображение (1 звезда), если праздник выбран как легкий (2), то я хотел бы отображать другое изображение (2 звезды) и так далее до 5 (очень трудно).

Пока что у меня есть это с сайта ACF, но я затрудняюсь как добавить/изменить

<?php

/*
*  Условное выражение (Одно значение)
*/

if(get_field('activity_rating') == "1")
{
    //...
}

Буду признателен за любые идеи!

вы можете попробовать это:

if(get_field('activity_rating') == "1") { 
              echo 'path/to/image/onestar.jpg';
} elseif (get_field('activity_rating') == "2") {
              echo 'path/to/image/twostar.jpg';
} elseif (get_field('activity_rating') == "3") {
              echo 'path/to/image/threestar.jpg';
} elseif (get_field('activity_rating') == "4") {
              echo 'path/to/image/fourstar.jpg';
} else (get_field('activity_rating') == "5") {
              echo 'path/to/image/fivestar.jpg';
}

Вы можете попробовать это:

  1. Загрузите все свои изображения в медиа-библиотеку.

  2. Перейдите к шаблону вашего пользовательского типа записи, например, single-holidays.php.

  3. Добавьте этот код туда, где вы хотите показать изображение

<?php

//Получите значе-ние поля activity_rating из текущей записи
$activity_rating = get_field( 'activity_rating' );

//Создайте массив URL изображений, загруженные в вашу медиа-библиотеку
$image_urls = array(
    0 => '/url_to_default_image',
    1 => '/url_to_image_1',
    2 => '/url_to_image_2',
    3 => '/url_to_image_3',
    4 => '/url_to_image_4',
    5 => '/url_to_image_5'
);

//Покажите изображение, соответствующее значению поля activity_rating, если оно не пустое
if ( ! empty ( $activity_rating ) && in_array( $activity_rating, range( 1, 5 ) ) ) {
    echo '<img src="'. $image_urls[ $activity_rating ] .'" />'; 
} else {
    echo '<img src="'. $image_urls[0] .'" />';
}

?>

Не забудьте изменить URL-адреса изображений на правильные в массиве $image_urls.

Это должно сработать!

Ответ или решение

Для решения задачи отображения изображения в зависимости от оценки активности на сайте WordPress, использующей произвольный тип записи "Holidays" и пользовательское поле "activity_rating", вам необходимо следовать следующим шагам. Это будет выполнено с использованием плагина Advanced Custom Fields (ACF) и PHP кода. Разработанный подход основан на условной логике для вывода изображения согласно выбранной оценке.

Шаги по реализации

  1. Загрузка изображений в медиатеку:
    Прежде всего, загрузите все необходимые изображения, которые будут соответствовать оценкам от 1 до 5 звезд, в вашу медиатеку WordPress. Убедитесь, что вы записали URL каждого изображения.

  2. Редактирование шаблона для произвольного типа записи:
    В вашем шаблоне, например, single-holidays.php, добавьте следующий код в местах, где требуется отображение изображения на основе оценки.

  3. Код для отображения изображения:

    <?php
    // Получение значения поля 'activity_rating' для текущей записи
    $activity_rating = get_field('activity_rating');
    
    // Массив URL изображений из медиатеки
    $image_urls = array(
       0 => '/путь_к_изображению_по_умолчанию',
       1 => '/путь_к_изображению/1звезда.jpg',
       2 => '/путь_к_изображению/2звезды.jpg',
       3 => '/путь_к_изображению/3звезды.jpg',
       4 => '/путь_к_изображению/4звезды.jpg',
       5 => '/путь_к_изображению/5звезд.jpg'
    );
    
    // Отображение изображения в зависимости от значения 'activity_rating'
    if (!empty($activity_rating) && in_array($activity_rating, range(1, 5))) {
       echo '<img src="'. $image_urls[$activity_rating] .'" alt="Оценка активности" />';
    } else {
       echo '<img src="'. $image_urls[0] .'" alt="Изображение по умолчанию" />';
    }
    ?>

    Не забудьте заменить /путь_к_изображению/... на фактические URL, соответствующие изображениям вашей медиатеки.

Пояснение

  • Логика работы: Код проверяет, существует ли значение поля activity_rating и попадает ли оно в диапазон от 1 до 5. В зависимости от этой проверки выводится соответствующее изображение.

  • SEO-оптимизация: Предусмотрите добавление атрибута alt для изображений, чтобы повысить доступность и SEO.

  • Альтернативное изображение: Код включает возможность отображения изображения по умолчанию, если в поле нет значений или они выходят за установленные пределы.

Заключение

С использованием данных шагов и приведенного кода, вы сможете корректно отображать изображения на вашем сайте WordPress в зависимости от указанной оценки активности. Это улучшит UX (пользовательский опыт) и предоставит визуальный ориентир для посетителей вашего сайта.

Имейте в виду, что изменять URL-адреса к изображениям необходимо исходя из их прямого пути в вашей медиатеке. Внесение этих изменений будет способствовать корректной работе отображаемых контентных элементов.

Оцените материал
Добавить комментарий

Капча загружается...