Boolean field for double-width Masonry item

• Steven

• March 23, 2016 at 4:56 am

Hello!

I have a masonry grid nearly complete for a client, you can see an example of it here: http://branchind.com/proofs/schmidtmankato/product/example-product/

I created a repeater field for the gallery and inside this repeater field I have two sub-fields: “Gallery Item” and “Wide Image”. The gallery item is a simple image field. Wide image is a true/false field. My intention is to give the user the ability to “tick” any of the photos of the gallery they’ve uploaded to designate them as a “wide” photo in the gallery (like this).

In my code I tried using a simple if/else statement, saying something like if “Wide Image” is selected, then display the photo in a div with a wide class, if not then display it in the default way.

Despite this, the wrapping div never changes, so when I tell an image to be wide in the WP Admin area, it doesn’t get reflected in the template.

Here’s my code:

<!-- Masonry Gallery -->
<div class="well--gray">
	<div class="row column">

	<h3>Example Product Gallery</h3>

	<div id="gallery-grid">

		<?php if ( have_rows('prod_gallery') ): ?>
			<div class="grid-sizer"></div>

		<?php while ( have_rows('prod_gallery') ) : the_row(); ?>

			<?php if ( get_field('prod_gallery_wide_image') ): ?>
				<div class="gallery-grid-item-width2">
					<img src="<?php the_sub_field('prod_gallery_item');?>" />
				</div>
			<?php else: ?>
				<div class="gallery-grid-item">
					<img src="<?php the_sub_field('prod_gallery_item');?>" />
				</div>
			<?php endif; ?>

		<?php endwhile; ?>
		<?php endif; ?>

	</div> <!-- gallery grid -->

	</div> <!-- row column -->
</div> <!-- gray well -->

I feel like my code is logical and should work. Am I missing something?

Here’s my CSS, too:

.grid-sizer { width: 33%; }

.gallery-grid-item {
    width: 33%;
    padding: 20px; }

.gallery-grid-item-width2 { width: 66%; }

Thanks!

• John Huebner

• March 23, 2016 at 7:33 am

You are using get_field and you should be using get_sub_field

			<?php if ( get_sub_field('prod_gallery_wide_image') ): ?>
				<div class="gallery-grid-item-width2">
					<img src="<?php the_sub_field('prod_gallery_item');?>" />
				</div>
			<?php else: ?>
				<div class="gallery-grid-item">
					<img src="<?php the_sub_field('prod_gallery_item');?>" />
				</div>
			<?php endif; ?>

• Steven

• March 27, 2016 at 12:29 am

Sorry John, forgot to respond!

Yes, that was the error. Sometimes you just need a second pair of eyes 🙂

Thanks!