Filtering issues which remove images and filters on filtered page

CMS & WordPress
1

Filtering issues which remove images and filters on filtered page

I’ve setup an archive page using Advanced Custom Fields to populate it with a series of Custom Post Type data including images, title and link. The parent page uses another set of ACF-powered fields to populate a header image and the title/subtitle. ACF is also used to populate a series of filters/checkboxes.

On visiting the page, the checkboxes are displayed correctly and the initial archive post data is pulled through. However, when using a query using the filter names in the URL, the header image and checkboxes are removed and the subsequent results are missing their image too. All other data is pulled through correctly (e.g. post title and link). When I inspect the header image and post(s) images, I can see that some random numbers appear for the header and each post image “src” attribute. These numbers stay the same no matter what query I use.

Some example queries are below:

https://apexcinemas.andrewcourtney.co.uk/films/?film_genre=Animation,Action
https://apexcinemas.andrewcourtney.co.uk/films/?film_genre=Thriller (no results but just to prove that the header image and filters are still removed)

Below is the starting page and how the header, filters and post images should appear
https://apexcinemas.andrewcourtney.co.uk/films/

The code used within the functions.php to control the query behaviour is below, taken from the following ACF tutorial (which I’ve modified the “// Get original meta query” line for to comply with the PHP version I’m working with (7.3.12) to change “$meta_query” to an array ($meta_query).

https://www.advancedcustomfields.com/resources/creating-wp-archive-custom-field-filter/

add_action('pre_get_posts', 'my_pre_get_posts');

function my_pre_get_posts($query){
	// validate
	if(is_admin()){
		return;
	}

	// Get original meta query
	$meta_query[] = $query->get('meta_query');

	// allow the url to alter the query
	// e.g. ?film_genre=comedy
	if(isset($_GET['film_genre'])){

		$film_genre = explode(',', $_GET['film_genre']);

		// Add our meta query to the original meta queries
		$meta_query[] = array(
			'key' 		=> 'film_genre',
			'value' 	=> $_GET['film_genre'],
			'compare' 	=> 'IN',
		);
	}

	// update the meta query arguments
	$query->set('meta_query', $meta_query);

	// always return
	return;
}

Below is the entire page code for the archive page I have:

<?php
get_header();
?>
<?php
$films = new WP_Query(array(
    'post_type' => 'film',
)); ?>
<main class="genericpage genericpage--films">
    <section class="genericpage__header">
        <?php
        if (get_field('film_archive_page_header_image', 'option')) { ?>
            <img src="<?php echo get_field('film_archive_page_header_image', 'option') ?>" alt="<?php echo get_field('film_archive_page_header_title', 'option'); ?>" />
        <?php } else { ?>
            <picture>
                <source srcset="<?php echo get_theme_file_uri('/images/generic_header_bg_desktop.png') ?>" media="(min-width: 768px)">
                <source srcset="<?php echo get_theme_file_uri('/images/generic_header_bg_mobile.png') ?>" media="(max-width: 767px)">
                <img src="<?php echo get_theme_file_uri('/images/generic_header_bg_mobile.png') ?>" alt="<?php echo get_field('film_archive_page_header_title', 'option') ?>" title="<?php echo get_field('film_archive_page_header_title', 'option') ?>" />
            </picture>
        <?php } ?>
        <div class="genericpage__header__text">
            <h1 class="section__heading"><?php if (get_field('film_archive_page_header_title', 'option')) { ?>
                    <?php echo get_field('film_archive_page_header_title', 'option') ?>
                <?php } else {
                                                echo "All Films";
                                            } ?></h1>
            <p><?php if (get_field('film_archive_page_header_subtitle', 'option')) { ?>
                    <?php echo get_field('film_archive_page_header_subtitle', 'option') ?>
                <?php } else {
                    echo "All Films Showing At Apex Cinemas";
                } ?></p>
        </div>
    </section>
    <section>
        <div id="search-filmgenre">
            <?php

            // Load field settings and values.
            $field = get_field_object('film_genre');
            $filmGenres = $field['choices'];

            // Display labels.
            if ($filmGenres) : ?>
                <ul>
                    <?php foreach ($filmGenres as $value => $label) : ?>
                        <li><input type="checkbox" value="<?php echo $value; ?>" <?php if (in_array($value, $filmGenres)) : ?> unchecked <?php endif; ?> /><?php echo $label; ?> </li>
                    <?php endforeach; ?>
                </ul>
            <?php endif; ?>
        </div>
    </section>
    <section class="filmblock filmblock--subcontainer">
        <?php

        while ($films->have_posts()) {
            $films->the_post();
        ?>
            <div class="filmblock filmblock--sub">
                <a href="<?php the_permalink(); ?>">
                    <img src="<?php the_field('film_poster'); ?>" alt="<?php the_title() ?>" title="<?php the_title() ?>" />
                    <div class="filmblock--sub__textcontainer">
                        <div class="filmblock--sub__textcontainer__title">
                            <span><?php the_ID(); ?></span>
                            <h4 class="filmblock--sub__heading"><?php the_title(); ?></h4> <?php if (get_field('film_certificate') == "U") : ?>
                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_u.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />
                            <?php elseif (get_field('film_certificate') == "PG") : ?>
                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_pg.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />
                            <?php elseif (get_field('film_certificate') == "12") : ?>
                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_12.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />
                            <?php elseif (get_field('film_certificate') == "15") : ?>
                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_15.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />
                            <?php elseif (get_field('film_certificate') == "18") : ?>
                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_18.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />
                            <?php elseif (get_field('film_certificate') == "TBC") : ?>
                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_tbc.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />
                            <?php endif; ?>
                        </div>
                        <?php the_excerpt(); ?>
                        <span class="cta cta--primary">View More</span>
                    </div>
                </a>
            </div>
        <?php } ?>
    </section>
    <section class="filmblock filmblock--pagination">
        <?php

        echo paginate_links();

        ?>
    </section>
</main>
<?php
get_footer();
?>

Any help would be much appreciated as I’ve been through the code and pages several times and cannot work out what’s happening.
Thanks in advance!

3

I am going to guess that these “Random numbers” are actually the image IDs. You can try running the the_field('film_poster') part through a function like wp_get_attachment_url( the_field('film_poster') ) and see if it gives you the image URL which you can then use for the src.

I suspect that is at least the problem with images showing up.

4

Thanks! Ok so I tried that which again works perfectly fine on the standard /films page but as soon as I try to run a query via the URL, it breaks and just returns the same value no matter what I run… very puzzling! Any other tips I could try please?

https://apexcinemas.andrewcourtney.co.uk/films/?film_genre=Animation

All I can pin it down to is maybe a conflict with something that’s within the functions.php code I posted earlier which looks for the query in the URL?

Below is the updated archive page code for the /films page:

<?php

get_header();

?>

<?php

$films = new WP_Query(array(

    'post_type' => 'film',

)); ?>

<main class="genericpage genericpage--films">

    <section class="genericpage__header">

        <?php

        if (get_field('film_archive_page_header_image', 'option')) { ?>

            <img src="<?php echo get_field('film_archive_page_header_image', 'option') ?>" alt="<?php echo get_field('film_archive_page_header_title', 'option'); ?>" />

        <?php } else { ?>

            <picture>

                <source srcset="<?php echo get_theme_file_uri('/images/generic_header_bg_desktop.png') ?>" media="(min-width: 768px)">

                <source srcset="<?php echo get_theme_file_uri('/images/generic_header_bg_mobile.png') ?>" media="(max-width: 767px)">

                <img src="<?php echo get_theme_file_uri('/images/generic_header_bg_mobile.png') ?>" alt="<?php echo get_field('film_archive_page_header_title', 'option') ?>" title="<?php echo get_field('film_archive_page_header_title', 'option') ?>" />

            </picture>

        <?php } ?>

        <div class="genericpage__header__text">

            <h1 class="section__heading"><?php if (get_field('film_archive_page_header_title', 'option')) { ?>

                    <?php echo get_field('film_archive_page_header_title', 'option') ?>

                <?php } else {

                                                echo "All Films";

                                            } ?></h1>

            <p><?php if (get_field('film_archive_page_header_subtitle', 'option')) { ?>

                    <?php echo get_field('film_archive_page_header_subtitle', 'option') ?>

                <?php } else {

                    echo "All Films Showing At Apex Cinemas";

                } ?></p>

        </div>

    </section>

    <section>

        <div id="search-filmgenre">

            <?php

            // Load field settings and values.

            $field = get_field_object('film_genre');

            $filmGenres = $field['choices'];

            // Display labels.

            if ($filmGenres) : ?>

                <ul>

                    <?php foreach ($filmGenres as $value => $label) : ?>

                        <li><input type="checkbox" value="<?php echo $value; ?>" <?php if (in_array($value, $filmGenres)) : ?> unchecked <?php endif; ?> /><?php echo $label; ?> </li>

                    <?php endforeach; ?>

                </ul>

            <?php endif; ?>

        </div>

    </section>

    <section class="filmblock filmblock--subcontainer">

        <?php

        while ($films->have_posts()) {

            $films->the_post();

        ?>

            <div class="filmblock filmblock--sub">

                <a href="<?php the_permalink(); ?>">

                    <img src="<?php the_field('film_poster'); ?>" alt="<?php the_title() ?>" title="<?php the_title() ?>" />

                    <div class="filmblock--sub__textcontainer">

                        <div class="filmblock--sub__textcontainer__title">

                            <h4 class="filmblock--sub__heading"><?php the_title(); ?></h4> <?php if (get_field('film_certificate') == "U") : ?>

                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_u.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />

                            <?php elseif (get_field('film_certificate') == "PG") : ?>

                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_pg.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />

                            <?php elseif (get_field('film_certificate') == "12") : ?>

                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_12.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />

                            <?php elseif (get_field('film_certificate') == "15") : ?>

                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_15.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />

                            <?php elseif (get_field('film_certificate') == "18") : ?>

                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_18.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />

                            <?php elseif (get_field('film_certificate') == "TBC") : ?>

                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_tbc.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />

                            <?php endif; ?>

                        </div>

                        <div>

                            <span><strong>Post ID:</strong> <?php the_ID(); ?></span><br />

                            <span><strong>Poster Image ID:</strong> <?php the_field('film_poster'); ?></span><br />

                            <span><strong>Poster Image ID (WP Get Attachment):</strong> <?php wp_get_attachment_url(the_field('film_poster')); ?></span>

                        </div>

                        <!--<?php the_excerpt(); ?>-->

                        <span class="cta cta--primary">View More</span>

                    </div>

                </a>

            </div>

        <?php } ?>

    </section>

    <section class="filmblock filmblock--pagination">

        <?php

        echo paginate_links();

        ?>

    </section>

</main>

<?php

get_footer();

?>
5

Ok so I’ve been through all of the code and all I can think of is some conflict within the functions.php code I’m using. Any ideas what the issue could be please?

6

I’ve now had a bit of a play around with the PHP which helps to display the images.

Instead of either of the following:

<?php the_field('film_poster'); ?>
<?php wp_get_attachment_url(the_field('film_poster')); ?>

I have tried to use:
<?php echo wp_get_attachment_url(get_field('film_poster')); ?>

However, as a result of these changes, now the URL query version of the page pulls through the images, while the standard page does not.

I thought it was worth including the ACF settings I have applied to my custom fields:
Header image
Using “Image” ACF Type
Uses “Image URL” Return Format
Uses “get_field” to display content

Film Poster
Using “Image” ACF Type
Uses “Image URL” Return Format
Uses “the_field” to display content

Film Certificate (unaffected)
Uses “Button Group” Type
Uses “Value” Return Value
Series of if statements based on the “get_field” to determine the image that’s loaded

Below is how the Films archive page code shapes up now:

<?php
get_header();
?>
<?php
$films = new WP_Query(array(
    'post_type' => 'film',
)); ?>
<main class="genericpage genericpage--films">
    <section class="genericpage__header">
        <?php
        if (get_field('film_archive_page_header_image', 'option')) { ?>
            <img src="<?php echo wp_get_attachment_url(get_field('film_archive_page_header_image', 'option')) ?>" alt="<?php echo get_field('film_archive_page_header_title', 'option'); ?>" />
        <?php } else { ?>
            <picture>
                <source srcset="<?php echo get_theme_file_uri('/images/generic_header_bg_desktop.png') ?>" media="(min-width: 768px)">
                <source srcset="<?php echo get_theme_file_uri('/images/generic_header_bg_mobile.png') ?>" media="(max-width: 767px)">
                <img src="<?php echo get_theme_file_uri('/images/generic_header_bg_mobile.png') ?>" alt="<?php echo get_field('film_archive_page_header_title', 'option') ?>" title="<?php echo get_field('film_archive_page_header_title', 'option') ?>" />
            </picture>
        <?php } ?>
        <div class="genericpage__header__text">
            <h1 class="section__heading"><?php if (get_field('film_archive_page_header_title', 'option')) { ?>
                    <?php echo get_field('film_archive_page_header_title', 'option') ?>
                <?php } else {
                                                echo "All Films";
                                            } ?></h1>
            <p><?php if (get_field('film_archive_page_header_subtitle', 'option')) { ?>
                    <?php echo get_field('film_archive_page_header_subtitle', 'option') ?>
                <?php } else {
                    echo "All Films Showing At Apex Cinemas";
                } ?></p>
        </div>
    </section>
    <section>
        <div id="search-filmgenre">
            <?php

            // Load field settings and values.
            $field = get_field_object('film_genre');
            $filmGenres = $field['choices'];

            // Display labels.
            if ($filmGenres) : ?>
                <ul>
                    <?php foreach ($filmGenres as $value => $label) : ?>
                        <li><input type="checkbox" value="<?php echo $value; ?>" <?php if (in_array($value, $filmGenres)) : ?> unchecked <?php endif; ?> /><?php echo $label; ?> </li>
                    <?php endforeach; ?>
                </ul>
            <?php endif; ?>
        </div>
    </section>
    <section class="filmblock filmblock--subcontainer">
        <?php

        while ($films->have_posts()) {
            $films->the_post();
        ?>
            <div class="filmblock filmblock--sub">
                <a href="<?php the_permalink(); ?>">
                    <img src="<?php echo wp_get_attachment_url(get_field('film_poster')); ?>" alt="<?php the_title() ?>" title="<?php the_title() ?>" />
                    <div class="filmblock--sub__textcontainer">
                        <div class="filmblock--sub__textcontainer__title">
                            <h4 class="filmblock--sub__heading"><?php the_title(); ?></h4> <?php if (get_field('film_certificate') == "U") : ?>
                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_u.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />
                            <?php elseif (get_field('film_certificate') == "PG") : ?>
                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_pg.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />
                            <?php elseif (get_field('film_certificate') == "12") : ?>
                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_12.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />
                            <?php elseif (get_field('film_certificate') == "15") : ?>
                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_15.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />
                            <?php elseif (get_field('film_certificate') == "18") : ?>
                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_18.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />
                            <?php elseif (get_field('film_certificate') == "TBC") : ?>
                                <img src="<?php echo get_theme_file_uri('/images/film-certificate_tbc.png') ?>" alt="Film age rating <?php get_field('film_certificate') ?>" title="Film age rating <?php get_field('film_certificate') ?>" class="genericpage__header__agerating" />
                            <?php endif; ?>
                        </div>
                        <div>
                            <span><strong>Post ID:</strong> <?php the_ID(); ?></span><br />
                            <span><strong>Poster Image ID:</strong> <?php echo wp_get_attachment_url(get_field('film_poster')); ?></span><br />
                            <span><strong>Poster Image ID (WP Get Attachment):</strong> <?php echo wp_get_attachment_url(get_field('film_poster')); ?></span>
                        </div>
                        <!--<?php the_excerpt(); ?>-->
                        <span class="cta cta--primary">View More</span>
                    </div>
                </a>
            </div>
        <?php } ?>
    </section>
    <section class="filmblock filmblock--pagination">
        <?php

        echo paginate_links();

        ?>
    </section>
</main>
<?php
get_footer();
?>

I am really running at a loss as to what to try to get this working now - any thoughts please?

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.