How to display posts with plugin (advanced custom fields) field groups? - wordpress

Question

I have a php/wordpress code (present inside abc.php file) as shown below which displays images of particular size.
php/wordpress (inside abc.php file):
<ul id="list-thumbs" class="list-grid">
<?php
while ( have_posts() ) : the_post();
?>
<li class="list-grid__thumb shows-grid__item">
<a class="list-grid__img-link" href="<?php echo esc_url( get_the_permalink() ); ?>" tabindex="0">
<?php if ( has_post_thumbnail() ) { ?>
<?php
$image_id = get_post_thumbnail_id( get_the_ID() );
WORLD\Images\the_img_fit_figure( $image_id, 'list-grid__image', '(min-width: 450px) 50vw, 70vw', false ); ?>
<?php } ?>
</a>
</li>
<?php endwhile; ?>
</ul>
The code above displays around 30-40 images from top to bottom with 4 images in one row.
(a) All of those images are featured image in wordpress associated with a post of post_type hello-world
(b) Every post has two fields, Row View (in_row_view) and Column View (in_column_view) coming from Advanced Custom Fields plug in. I am not sure if we can call those two fields as custom fields.
(c) Row View and Column View both are switch which can be enabled to Yes or No. By default, it is set to No.
(d) For Row View, I am using:
if(get_field('in_row_view' ) == '1'){ }
For Column View, I am using:
if( get_field('in_column_view' ) == '1'){ }
What I want to achieve is I want to display those posts which have Row View switch enabled to Yes.
Problem Statement:
I am wondering what changes I need to make in the php/wordpress code above so that it displays only those posts which have Row View switch enabled to Yes.
Probably I need to integrate this code if(get_field('in_row_view' ) == '1'){ } in the php/wordpress code above.

Answer 1

Quick/Sloppy Solution:
<ul id="list-thumbs" class="list-grid">
<?php
while ( have_posts() ) : the_post();
// This will skip the loop
if(get_field('in_row_view' ) != '1') { continue; }
?>
<li class="list-grid__thumb shows-grid__item">
<a class="list-grid__img-link" href="<?php echo esc_url( get_the_permalink() ); ?>" tabindex="0">
<?php if ( has_post_thumbnail() ) { ?>
<?php
$image_id = get_post_thumbnail_id( get_the_ID() );
WORLD\Images\the_img_fit_figure( $image_id, 'list-grid__image', '(min-width: 450px) 50vw, 70vw', false ); ?>
<?php } ?>
</a>
</li>
<?php endwhile; ?>
</ul>
... the issue with the "Quick Solution" is that it will not render the desired "posts per page". The easier way is to include or exclude at the query level with meta_query ... this can be done by grabbing the query "in flight" with the pre_get_posts hook.
The More Elegant Solution
function pw_filter_query( $query ) {
// Your conditions for NOT applying the meta query ... use wp conditionals! :)
if( !$query->get('post_type') != 'your_post_type ) { return $query; }
$query->set('meta_key', 'ecpt_color');
$query->set('meta_value', 'green');
}
}
add_action('pre_get_posts', 'pw_filter_query', 9999);
Source Reference