Napisałem bardzo podstawową wtyczkę, która tworzy niestandardowy typ postu (CPT), który ma wiele niestandardowych pól meta.

Nie mogę powtórzyć adresu URL obrazu. Wypróbowałem wiele innych podobnych rozwiązań postów, ale wszystkie wydają się w jakiś sposób odnosić do wtyczki Advanced Custom Fields (ACF).

Istnieją dwa przechwycone obrazy i są one przechwytywane na dwa sposoby:

Ten sposób ma umożliwić użytkownikowi załadowanie pliku do formularza:

<div class="form-row">
    <label for="your-profile-picture">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>

Drugim sposobem jest użycie przycisku radiowego, aby umożliwić im wybór spośród wybranych obrazów:

<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>

Informacje te są następnie przekazywane za pomocą metody POST w następujący sposób:

<?php
// Handle Form Submissions
if ('POST' == $_SERVER['REQUEST_METHOD'] && !empty($_POST['post-type']) &&  $_POST['post-type'] == "testimonial") :

    // Do some minor form validation to make sure there is content
    if (isset ($_POST['your-profile-picture'])) {
        $your_profile_picture = $_POST['your-profile-picture'];
    } else { 
        echo 'Please provide a profile picture.';
    }
    if (isset ($_POST['your-background-image'])) {
        $your_background_image = $_POST['your-background-image'];
    } else { 
        echo 'Please select a background image.';
    }

    if (isset($_POST['post-type'])) {
        $post_type = $_POST['post-type'];
    } else {
        echo 'Unable to get post type.';
    }

    // Add the content of the form to $post as an array
    $testimonial_args = array(
        'your_profile_picture'      => $your_profile_picture,
        'your_background_image'     => $your_background_image,

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

    //save the new post
    $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('Testimonial details successfully submitted!');
        </script>
    <?php else : ?>
        <script>
            alert('Testimonial details submission was unsuccessful!');
        </script>
    <?php endif;
endif; ?>

Po dostarczeniu komunikatu o sukcesie zastanawiam się, w jaki sposób najlepiej wyprowadzać obrazy do mojego kodu skierowanego do front-endu:

<?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; ?>

Ale to zwraca puste deklaracje obrazu tła podczas sprawdzania.

Próbowałem też na wiele innych sposobów, ale zamiast przedłużać to pytanie, myślę, że możemy zrozumieć, co próbuję osiągnąć … metodologię tego, w jaki sposób mogę powtórzyć obrazy, biorąc pod uwagę dwie metody zostały one nabyte.

~ we wtyczce jest więcej kodu, który przechwytuje tekstowe pola meta i mogę potwierdzić, że zbierają i wyświetlają poprawne informacje. Tylko obrazy nic nie zwracają.

~ Wcześniej miałem rozwiązanie, które odbijało się echem „na” i inne, które zwracało tylko nazwę pliku. Znowu brak obrazu src.

Czy możemy poszukać rozwiązania, które wyświetli adres URL obrazu w stylach obrazu tła?