Не удалось собрать URL изображения из пользовательского типа записи; пользовательское метаполе.

Я написал очень простой плагин, который создает пользовательский тип записи (CPT) с несколькими пользовательскими метаполями.

Я не могу вывести URL изображения. Я попробовал много других решений из похожих постов, но все они, кажется, каким-то образом связаны с плагином Advanced Custom Fields (ACF).

Есть два изображения, которые захвачены, и они захвачены двумя способами:

Первый способ позволяет пользователю загрузить файл в форму:

<div class="form-row">
    <label for="your-profile-picture">Ваше изображение профиля</label>
    <input type="file" id="your-profile-picture" accept=".jpg,.jpeg,.png" tabindex="1" name="your-profile-picture" onchange="validateImageFileType()" required/>
</div>

Второй способ – это использование радиокнопки, чтобы выбрать из набора изображений:

<div class="form-row">
    
    <input type="radio" name="your-background-image" tabindex="6" class="sr-only" id="normal">
    <label for="normal">
        <img src="/test/clicky/wp-content/uploads/2020/08/testimonial-bg-1.png" alt="normal">
    </label>
    
    <input type="radio" name="your-background-image" tabindex="7" class="sr-only" id="flipped">
    <label for="flipped">
        <img src="/test/clicky/wp-content/uploads/2020/08/testimonial-bg-2.png" alt="flipped">
    </label>

    <input type="radio" name="your-background-image" tabindex="8" class="sr-only" id="bright">
        <label for="bright">
        <img src="/test/clicky/wp-content/uploads/2020/08/testimonial-bg-3.png" alt="bright">
    </label>

</div>

Эта информация затем передается методом POST вот так:

<?php
// Обработка отправки формы
if ('POST' == $_SERVER['REQUEST_METHOD'] && !empty($_POST['post-type']) &&  $_POST['post-type'] == "testimonial") :

    // Выполняем небольшую валидацию формы, чтобы убедиться, что есть содержимое
    if (isset ($_POST['your-profile-picture'])) {
        $your_profile_picture = $_POST['your-profile-picture'];
    } else { 
        echo 'Пожалуйста, предоставьте изображение профиля.';
    }
    if (isset ($_POST['your-background-image'])) {
        $your_background_image = $_POST['your-background-image'];
    } else { 
        echo 'Пожалуйста, выберите фоновое изображение.';
    }

    if (isset($_POST['post-type'])) {
        $post_type = $_POST['post-type'];
    } else {
        echo 'Не удалось получить тип записи.';
    }

    // Добавляем содержимое формы в $post как массив
    $testimonial_args = array(
        'your_profile_picture'      => $your_profile_picture,
        'your_background_image'     => $your_background_image,

        'post_type'                 => $post_type,
        'post_status'               => 'publish'
    );

    // Сохраняем новый пост
    $post_id = wp_insert_post($testimonial_args, true);

    $your_profile_picture           = $_POST['your-profile-picture'];
    $your_background_image          = $_POST['your-background-image'];

    add_post_meta($post_id, 'your_profile_picture', $your_profile_picture, true);
    add_post_meta($post_id, 'your_background_image', $your_background_image, true);

    if ($post_id != '') : ?>
        <script>
            alert('Детали отзыва успешно отправлены!');
        </script>
    <?php else : ?>
        <script>
            alert('Отправка деталей отзыва не удалась!');
        </script>
    <?php endif;
endif; ?>

С сообщением об успехе, я затем смотрю, как лучше всего выводить изображения в моем коде, который виден на фронтенде:

<?php
while ( $loop->have_posts() ) : $loop->the_post(); ?>

    <?php
    $background_image_id    = get_post_meta(get_the_ID(), 'your_background_image_id', true);
    $background_image       = wp_get_attachment_image( $background_image_id, 'full' );
    $profile_image_id       = get_post_meta(get_the_ID(), 'your_profile_picture_id', true);
    $profile_image          = wp_get_attachment_image( $profile_image_id, 'full' ); ?>

    <div class="testimonial-slide" style="background-image: url(<?php echo $background_image; ?>);">

        <div class="testimonial-profile-picture" style="background-image: url(<?php echo $profile_image ?>);"></div>

    </div>

<?php 
endwhile; ?>

Но это приводит к пустым объявлениям background-image при проверке.

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

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

~ ранее у меня было решение, которое выводило ‘включено’, и другое, которое возвращало только имя файла. Снова, нет src изображения.

Пожалуйста, можем ли мы попытаться найти решение, которое выведет URL изображения в стили background-image?

Если вам нужен URL изображения, вы должны использовать wp_get_attachment_image_url(), а не wp_get_attachment_image():

$background_image_id    = get_post_meta(get_the_ID(), 'your_background_image_id', true);
$background_image       = wp_get_attachment_image_url( $background_image_id, 'full' );
$profile_image_id       = get_post_meta(get_the_ID(), 'your_profile_picture_id', true);
$profile_image          = wp_get_attachment_image_url( $profile_image_id, 'full' ); ?>

wp_get_attachment_image() возвращает полный HTML <img> тег, но фоновым изображениям требуется только URL.