Wordpress - Advanced Custom Fields gallery - wordpress

I'm using ACF plugin and i create a flexible content to show title, content and gallery but i can't get the images.
My code is this:
<div id="services-pages">
<?php
if( have_rows('serviços') ):
while ( have_rows('serviços') ) : the_row();
?>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="content">
<div class="title">
<hr>
<span><?php echo the_sub_field('title');?></span>
</div>
<div class="info">
<p><?php echo the_sub_field('content');?></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="row images">
<?php
$images = the_sub_field('images');
var_dump($images);
?>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="slider-service-element">
<?php foreach( $images as $image ): ?>
<div>
<img src="<?php echo $image['url']; ?>" />
</div>
<?php endforeach; ?>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="slider-service-main">
<?php foreach( $images as $image ): ?>
<div>
<img src="<?php echo $image['url']; ?>" />
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
endwhile;
else :
?>
<div>
<span>no records</span>
</div>
<?php
endif;
?>
</div>
My ACF field:
I already try to get gallery with get_field() and the_sub_field().
How can i solve that?
Thank you.

Try something like this
$images = get_sub_field('images');
if( $images ):
foreach( $images as $image ):
?><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /><?php
endforeach;
endif;
There's a post on acf forum about it
https://support.advancedcustomfields.com/forums/topic/gallery-field-within-a-repeater-field/

<?php if( have_rows('glp_images') ):
// loop through the rows of data
while ( have_rows('glp_images') ) : the_row();
$images = get_sub_field('glp_img');
if( $images ): ?>
<?php foreach( $images as $image ): ?>
<div>
<img src="<?php echo $image; ?>" alt="" />
</div>
<?php endforeach; endif;?>
<?php endwhile; endif; ?>

Related

While implementing this code on my wp-admin the content is okay but in the customers views the slider is not okay and the image is strechd/ distorted

/img/scrubber-pov.png" id="pov-robot" alt="Robot Perspective" />
" style="background: url();">
/img/scrubber-pov.png" class="inside-slide-robot" alt="Robot Perspective" />
<?php if( have_rows('technology_slides') ):?>
<div class="mobile-slider-presentation">
<?php $slide_count = 1;
while( have_rows('technology_slides') ): the_row();
$slide_background = get_sub_field('slide_background');
$slide_content = get_sub_field('slide_content');?>
<div class="slide-background" id="slideNumber-<?php echo $slide_count;?>" style="background: url(<?php echo $slide_background['url'];?>);">
<div class="container-fluid content-container">
<div class="row">
<div class="col-xl-4 offset-xl-8">
<div class="slide-copy">
<?php echo $slide_content;?>
</div>
</div>
</div>
<img src="<?php bloginfo('template_url'); ?>/img/scrubber-pov.png" class="inside-slide-robot" alt="Robot Perspective" />
</div>
</div>
<?php $slide_count = $slide_count + 1;?>
<?php endwhile; reset_rows();?>
</div>
<?php endif; ?>
/img/scrubber-pov.png" id="pov-robot" alt="Robot Perspective" />

Custom Post type description is not showing

I have a WordPress theme, where I want to use CPT UI with texonomy. There I want to show texonomy name, link, thumbnail of this texonomy and description.
All are working except description. Here is my coding:
<div class="catagory-section" id="know-desti">
<div class="container">
<div class="heading">
<strong>Know Your</strong> <span>Destination</span>
</div>
<div class="col-xs-12 category-listing">
<?php foreach (get_terms('destination') as $cat) : ?>
<div class="row margin-bottom-10">
<div class="col-sm-12 padding-0 post-listing">
<img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" class="cate-img" />
<h2 class="cate-heading margin-0"><?php echo $cat->name; ?></h2>
<p><?php _ex($description = term_description( $term_id, $taxonomy )); ?></p>
Know More
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<div class="stone-img"></div>
Why is my description not working?
You can use this function
$taxonomy ='custom_taxonomy_type'; {like: product_cat}
echo term_description( $term_id, $taxonomy )

ACF Odd/Even Alternate Layout with Relationship

I'm trying to create a two column element using ACF repeater fields. The only thing is I'm trying to alternate this so that the content in the two columns switches left/right depending on the row being even or odd.
The output will look something like:
This is how I looped:
<section id="projects" class="container specific-margin-1">
<!-- Repeater -->
<div class="row">
<?php $i=0 ; if(get_field( 'featured_projects')): ?>
<?php while(has_sub_field( 'featured_projects')): $i++; ?>
<div class="row">
<?php
/*
* Loop through post objects (assuming this is a multi-select field) ( setup postdata )
* Using this method, you can use all the normal WP functions as the $post object is temporarily initialized within the loop
* Read more: http://codex.wordpress.org/Template_Tags/get_posts#Reset_after_Postlists_with_offset
*/
$post_objects = get_field('featured_projects');
if($post_objects ): ?>
<ul>
<?php foreach( $post_objects as $post): // variable must be called $post (IMPORTANT) ?>
<?php setup_postdata($post); ?>
<div class="repeater_row <?php if (($i % 2)==0 ): ?>col-lg-3 col-md-4 col-sm-6<?php else: ?>col-lg-9 col-md-8 col-sm-6<?php endif; ?>">
<?php if (($i % 2)==0 ): ?>
<li>
<h3><?php the_title(); ?></h3>
<h3><?php the_field('project_location'); ?></h3>
<br>
<span><?php the_field('project_area'); ?></span><br>
<span><?php the_field('project_scale'); ?></span><br>
<br>
<span style="color:#EE1601;">Explore this project <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
</li>
<?php else:
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<?php endif; ?>
</div>
<div class="repeater_row <?php if (($i % 2)==0 ): ?>col-lg-9 col-md-8 col-sm-6<?php else: ?>col-lg-3 col-md-4 col-sm-6<?php endif; ?>">
<?php if (($i % 2)==0 ): ?>
<?php // check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<?php else: ?>
<li>
<?php // check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<h3><?php the_title(); ?></h3>
<h3><?php the_field('project_location'); ?></h3>
<br>
<span><?php the_field('project_area'); ?></span><br>
<span><?php the_field('project_scale'); ?></span><br>
<br>
<span style="color:#EE1601;">Explore this project <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
</li>
<?php endif; ?>
</div>
<?php endforeach; ?>
</ul>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif;?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<!-- Repeater -->
</section>
My Current Output looks like this:
This is the minimal logic for having alternate image and text row wise.
<div class="container">
<div class="row">
<?php
for ($i = 1; $i <= 10; $i++)
{
//even counter will have right image
if ($i % 2 == 0)
{
?>
<div class="col-md-12">
<div class="col-md-4">
Title Number: <?php echo $i; ?>
</div>
<div class="col-md-8">
<img src="" class="img-responsive"/>
</div>
</div>
<?php
}
//odd counter will have left image
else
{
?>
<div class="col-md-12">
<div class="col-md-8">
<img src="" class="img-responsive"/>
</div>
<div class="col-md-4">
Title Number: <?php echo $i; ?>
</div>
</div>
<?php
}
}
?>
</div>
</div>
Hope this will give you an idea.

Wordpress Loop repeating twice

Hello I have a while loop in WordPress and I am adding an active class on the first instance of the loop and this works fine but the same instance then again repeats afterwards without the active class.
here is my code any help would be greatly appreciated.
<div class="carousel-inner" role="listbox">
<?php
query_posts( array( 'post_type' => 'deal','dealtype' => 'deals' ) );
while (have_posts()) : the_post();
?>
<?php if( $wp_query->current_post == 0 && !is_paged() ) { ?>
<div class="item active">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php } ?>
<div class="item">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php endwhile; // end of the loop. ?>
</div>
Believe you need to add an else statement after your <?php if ($wp_query->current_post == 0 && !is_paged() ) { ?> statement ends. Should look something like this:
<div class="carousel-inner" role="listbox">
<?php
query_posts( array( 'post_type' => 'deal','dealtype' => 'deals' ) );
while (have_posts()) : the_post();
?>
<?php if ( $wp_query->current_post == 0 && !is_paged() ) { ?>
<div class="item active">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php } else { ?>
<div class="item">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php } ?>
<?php endwhile; // end of the loop. ?>
</div>

removing space b/w two columns Bootstrap

Hi I am trying to make less space b/w the two images but I am unable to do so. when I add any css rule such as margin it breaks the columns. so what is the best way I can get images a bit closer to each other.
my site link: http://www.abiglittlebiz.com/trevelle/display-centres/
here is my code:
<div class="displaycenter">
<h2 class="displayh1"><?php echo "$main_heading";?></h2>
<div class="container">
<div class="row">
<div class="col-md-8">
<h2 class="displayh2"><?php echo "$display_heading";?></h2>
<div>
<?php if(!empty($ascot_image) ): ?>
<img src="<?php echo $ascot_image['url']; ?>" alt="<?php echo $ascot_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$ascot_text"; ?></h3>
<p class="details"><?php echo "$displaycenter1";?></p>
</div>
</div>
</div>
<div class="col-md-4">
<h2 class="displayh2"><?php echo "$display_heading2";?></h2>
<div>
<?php if(!empty($liberty_image) ): ?>
<img src="<?php echo $liberty_image['url']; ?>" alt="<?php echo $liberty_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$liberty_text"; ?></h3>
<p class="details"><?php echo "$displaycenter2";?></p>
</div>
</div>
</div>
<div class="col-md-8">
<div>
<?php if(!empty($alfa_image) ): ?>
<img src="<?php echo $alfa_image['url']; ?>" alt="<?php echo $alfa_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$alfa_text"; ?></h3>
<p class="details"><?php echo "$displaycenter3";?></p>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<?php if(!empty($odyssey_image) ): ?>
<img src="<?php echo $odyssey_image['url']; ?>" alt="<?php echo $odyssey_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$odyessy_text"; ?></h3>
<p class="details"><?php echo "$displaycenter4";?></p>
</div>
</div>
</div>
<div id="cs">
<h2 class="displayh1" id="cl"><?php echo "$second_heading";?></h2>
<div class="col-md-8">
<div>
<?php if(!empty($monte_image) ): ?>
<img src="<?php echo $monte_image['url']; ?>" alt="<?php echo $monte_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$monte_text"; ?></h3>
<p class="details"><?php echo "$displaycenter5";?></p>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<?php if(!empty($lot_image) ): ?>
<img src="<?php echo $lot_image['url']; ?>" alt="<?php echo $lot_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$monte_text"; ?></h3>
<p class="details"><?php echo "$displaycenter6";?></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
You are using a col-md-8 class for the left column and a col-md-4 class for the right one. Why not make them both col-md-6 and apply the following CSS?
.row .col-md-6:first-of-type {
text-align: right;
}
This right aligns the content in the left column and eliminates most of the gap between columns. You'll probably have to play around with more CSS to polish things further, but this should give you a decent start.

Resources