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!