Getting to grips with ACF and it's flexible content field.
I have two layouts as shown below but I can't seem to get the second part (image_block) working correctly as it keeps popping up with a (parse error) I'm probably missing something obvious but if anyone has some advice it would be very helpful.
<?php if( have_rows('content-h') ):?>
<?php while ( have_rows('content-h') ) : the_row();?>
<?php if( get_row_layout() == 'text_block' ):
$title = get_sub_field('title');
$description = get_sub_field('description');
$subheading = get_sub_field('subheading');
?>
<div class="col-lg-6">
<div class="section-title">
<span class="text-color"><?php echo $subheading; ?></span>
<h2 class="mt-3 content-title"><?php echo $title; ?></h2>
</div>
</div>
<div class="col-lg-6">
<p><?php echo $description; ?></p>
</div>
<?php endif; ?>
</div>
<div class="row justify-content-center">
<?php if( get_row_layout() == 'image_block' ):
$image = get_sub_field('image');
$title = get_sub_field('title');
$description = get_sub_field('description');
$link = get_sub_field('link');
?>
<div class="col-lg-3 col-md-6 col-12">
<div class="intro-item mb-5 mb-lg-0">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" alt="" class="img-fluid w-100">
<h4 class="mt-4 mb-3"><?php echo $title; ?></h4>
<p><?php echo $description; ?></p>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
Any help is appreciated.
This is a straight PHP parsing error, nothing to do with ACF or flexible fields.
See the comment where I believe you are missing an endif. The best thing to do in these situations is to go through your code line by line noting where you are starting a conditional and whether you have ended it correctly (so the blocks are nested).
Also check that your HTML elements are formed correctly. There appears to be an extra closing div tag - see comments in the code.
<?php if( have_rows('content-h') ):?>
<?php while ( have_rows('content-h') ) : the_row();?>
<?php if( get_row_layout() == 'text_block' ):
$title = get_sub_field('title');
$description = get_sub_field('description');
$subheading = get_sub_field('subheading');
?>
<div class="col-lg-6">
<div class="section-title">
<span class="text-color"><?php echo $subheading; ?></span>
<h2 class="mt-3 content-title"><?php echo $title; ?></h2>
</div>
</div>
<div class="col-lg-6">
<p><?php echo $description; ?></p>
</div>
<?php endif; ?>
</div> <!-- THIS closing div tag seems to be spurious -->
<div class="row justify-content-center">
<?php if( get_row_layout() == 'image_block' ):
$image = get_sub_field('image');
$title = get_sub_field('title');
$description = get_sub_field('description');
$link = get_sub_field('link');
?>
<div class="col-lg-3 col-md-6 col-12">
<div class="intro-item mb-5 mb-lg-0">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" alt="" class="img-fluid w-100">
<h4 class="mt-4 mb-3"><?php echo $title; ?></h4>
<p><?php echo $description; ?></p>
</div>
</div>
<?php endif; //THIS IS WHAT NEEDS TO BE ADDED CHECK IT IS IN THE RIGHT PLACE ?>
<?php endwhile; ?>
<?php endif; ?>
Related
The images are not showing in front-end. ACF settings screenshot
<?php
if( have_rows('how_it_works_functions') ):
$counter = 0;
while( have_rows('how_it_works_functions') ) : the_row();
$counter++;
?>
<div class="step<?php echo $counter; ?>">
<div class="row section-content">
<?php if($counter == 2) { ?>
<div class="col-md-8 image">
<img class="skip-lazy" src="<?php get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php get_sub_field('how_it_works_functions_image')['alt']; ?>">
</div>
<div class="col-md-4 text">
<h3 data-aos="fade-left" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
<p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
</div>
<?php } else { ?>
<div class="col-md-4 text">
<h3 data-aos="fade-right" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
<p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
</div>
<div class="col-md-8 image">
<img class="skip-lazy" src="<?php get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php get_sub_field('how_it_works_functions_image')['alt']; ?>">
</div>
<?php } ?>
</div>
</div>
<?php
endwhile;
endif;
?>
I already check the var_dump and it is getting the correct url but I still have broken image in front-end.
You need to echo that field.
Like this based on your code:
<img class="skip-lazy" src="<?php echo get_sub_field( 'how_it_works_functions_image' )['url']; ?>" alt="<?php echo get_sub_field( 'how_it_works_functions_image' )['alt']; ?>">
Alternative effective way:
<?php
$image = get_sub_field( 'how_it_works_functions_image' );
?>
<img class="skip-lazy" src="<?php echo esc_attr( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>">
Try out the above solution and let me know if it works or not.
I'm currently working on a website for a client and I want to change the search results page. I tried a lot of things but when I search for something on the website I get search results, but without a image or description. My client want the website to show a image and a description.
Here is my search.php code:
/**
* The search template file.
*
* #package Betheme
* #author Muffin group
* #link https://muffingroup.com
*/
get_header();
$translate['search-title'] = mfn_opts_get('translate') ? mfn_opts_get('translate-search-title','Ooops...') : __('Ooops...','betheme');
$translate['search-subtitle'] = mfn_opts_get('translate') ? mfn_opts_get('translate-search-subtitle','No results found for:') : __('No results found for:','betheme');
$translate['published'] = mfn_opts_get('translate') ? mfn_opts_get('translate-published','Published by') : __('Published by','betheme');
$translate['at'] = mfn_opts_get('translate') ? mfn_opts_get('translate-at','at') : __('at','betheme');
$translate['readmore'] = mfn_opts_get('translate') ? mfn_opts_get('translate-readmore','Read more') : __('Read more','betheme');
?>
<div id="Content">
<div class="content_wrapper clearfix">
<div class="sections_group">
<div class="section">
<div class="section_wrapper clearfix">
<?php if( have_posts() && trim( $_GET['s'] ) ): ?>
<div class="column one column_blog">
<div class="blog_wrapper isotope_wrapper">
<div class="posts_group classic">
<?php
while ( have_posts() ):
the_post();
?>
<div id="post-<?php the_ID(); ?>" <?php post_class( array('post-item', 'clearfix', 'no-img') ); ?>>
<div class="post-desc-wrapper">
<div class="post-desc">
<?php if( mfn_opts_get( 'blog-meta' ) ): ?>
<div class="post-meta clearfix">
<div class="author-date">
<span class="author"><span><?php echo esc_html($translate['published']); ?> </span><i class="icon-user"></i> <?php the_author_meta('display_name'); ?></span>
<span class="date"><span><?php echo esc_html($translate['at']); ?> </span><i class="icon-clock"></i> <?php echo esc_html(get_the_date()); ?></span>
</div>
</div>
<?php endif; ?>
<div class="post-title">
<h2><?php the_title(); ?></h2>
</div>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="post-footer">
<div class="post-links">
<i class="icon-doc-text"></i> <?php echo esc_html($translate['readmore']); ?>
</div>
</div>
</div>
</div>
</div>
<?php
endwhile;
?>
</div>
<?php
if(function_exists( 'mfn_pagination' )):
echo mfn_pagination();
else:
?>
<div class="nav-next"><?php next_posts_link(esc_html__('← Older Entries', 'betheme')) ?></div>
<div class="nav-previous"><?php previous_posts_link(esc_html__('Newer Entries →', 'betheme')) ?></div>
<?php
endif;
?>
</div>
</div>
<?php else: ?>
<div class="column one search-not-found">
<div class="snf-pic">
<i class="themecolor <?php echo esc_attr(mfn_opts_get('error404-icon', 'icon-traffic-cone')); ?>"></i>
</div>
<div class="snf-desc">
<h2><?php echo esc_html($translate['search-title']); ?></h2>
<h4><?php echo esc_html($translate['search-subtitle']) .' '. esc_html($_GET['s']); ?></h4>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
<?php if( is_active_sidebar( 'mfn-search' ) ): ?>
<div class="sidebar four columns">
<div class="widget-area clearfix <?php echo esc_attr(mfn_opts_get('sidebar-lines')); ?>">
<?php dynamic_sidebar( 'mfn-search' ); ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php get_footer();
<?php $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); ?>
<div class="post-img">
<img src="<?php echo $featured_img_url; ?>"/>
</div>
use above code in while loop to show image by using post id.
My current blog page shows all my blog posts in a grid of 3 by 'x'. However at the top I want to display the latest blog post as some sort of a featured post and thus style it a bit different (i.e full width). I tried doing it through css with :first-child but that didn't really work well. So now I'm trying the php approach. I however have no clue how to approach this. Can anyone show me where to start? This is my current code.
<section id="blogs" class="cards-list">
<div class="container cards">
<div class="row center-xs">
<?php
if(get_post_type() == 'post') {
$currentBlog = get_the_ID();
} else {
$currentBlog = '';
}
$loopBlog = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => -1,
'post__not_in' => array($currentBlog)
));
while ( $loopBlog->have_posts() ) : $loopBlog->the_post();
$blogIntro = get_field('blog_intro');
$blogImage = get_field('blog_image');
$blogImageUrl = $blogImage['sizes']['large'];
?>
<div class="col col-xs-12 col-md-4">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="card card-event">
<figure style="<?php if($blogImageUrl != '') { echo "background-image:url('".$blogImageUrl."');"; } ?>"></figure>
<div class="content">
<span class="tag"><?php the_time('M d Y'); ?></span>
<div class="link"><h3><span><?php the_title(); ?></span></h3></div>
</div>
</a>
</div>
<?php
endwhile; wp_reset_query();
?>
</div>
</div>
You should be able to use current_post inside the loop and output different markup for the first post:
while ( $loopBlog->have_posts() ) : $loopBlog->the_post();
$blogIntro = get_field('blog_intro');
$blogImage = get_field('blog_image');
$blogImageUrl = $blogImage['sizes']['large'];
?>
<?php if ($loopBlog->current_post == 0): ?>
<!-- Output some other markup for the first post here -->
<div class="container-fluid">
</div>
<?php else: ?>
<div class="col col-xs-12 col-md-4">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="card card-event">
<figure style="<?php if($blogImageUrl != '') { echo "background-image:url('".$blogImageUrl."');"; } ?>"></figure>
<div class="content">
<span class="tag"><?php the_time('M d Y'); ?></span>
<div class="link"><h3><span><?php the_title(); ?></span></h3></div>
</div>
</a>
</div>
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>
I've made a shortcode function that returns some Advanced Custom Fields depending on which repeater field is chosen. It displays correctly and in the right order however any content typed underneath the shortcode is moved outside of its <article> container element.
Here is the code:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
</div>
</div>
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');
Can anyone help solve this mystery? Many thanks.
You have two extra closing <div>'s in your code.
Try this:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
<!--/div>
</div-->
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');
I am trying to echo a divider within a while loop after every item except the last item. Currently I have the divider after each item.
I've found a few solutions involving mysql rows and counters but so far nothing that relates to my situation.
I am using the following code (note, this does not include an attempted solution but rather my starting point.):
<?php if( have_rows('testimonials') ): ?>
<div class="testimonials col-md-4">
<h2>What People are Saying</h2>
<?php while( have_rows('testimonials') ): the_row();
// vars
$image = get_sub_field('image');
$quote = get_sub_field('quote');
$name = get_sub_field('name');
$divider = "<div class=\"dots full\"></div>";
?>
<div class="media">
<a class="pull-left" href="#">
<?php echo '<img src="'.$image['url'].'" alt="'.$image['alt'].'" class="img-circle" style="max-width: 70px;">'; ?>
</a>
<div class="media-body">
<div class="quote">
<?php echo $quote; ?>
</div>
<div class="source">
<span><?php echo $name; ?></span>
</div>
</div>
</div>
<?php echo $divider; ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
I followed #Frogs advice and added the divider before each item and then used a counter to rule out the first item.
<?php if( have_rows('testimonials') ): ?>
<?php $test_count = 0; ?>
<div class="testimonials col-md-4">
<h2>What People are Saying</h2>
<?php while( have_rows('testimonials') ): the_row();
// vars
$image = get_sub_field('image');
$quote = get_sub_field('quote');
$name = get_sub_field('name');
$divider = "<div class=\"dots full\"></div>";
if ($test_count !== 0) {
echo $divider;
}
$test_count++;
?>
<div class="media">
<a class="pull-left" href="#">
<?php echo '<img src="'.$image['url'].'" alt="'.$image['alt'].'" class="img-circle" style="max-width: 70px;">'; ?>
</a>
<div class="media-body">
<div class="quote">
<?php echo $quote; ?>
</div>
<div class="source">
<span><?php echo $name; ?></span>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>