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; ?>
Related
I have a carousel which has to display two items per column in each item. I tried using foreach method and array_chunk() to do so, but it doesn't seem to do the work.
This is the code I am working with:
<div class="section cataloge">
<div class="section-wrapper">
<div class="container">
<div class="cataloge-page">
<?php
if ($cataloge->have_posts()) {
?>
<div class="cataloge-slider owl-carousel owl-theme">
<?php
while ($cataloge->have_posts()) {
$cataloge->the_post();
$input_array = array($cataloge);
foreach (array_chunk($input_array, 2, true) as $column) {
?>
<div class="cataloge-slider-item-wrapper">
<?php
foreach ($column as $input_array) {
?>
<article class="cataloge-item">
<figure class="cataloge-item-img img-placeholder">
<?php the_post_thumbnail(); ?>
<?php
if (!empty(get_field('sticky_text'))) {
?>
<div class="cataloge-sticky"><?php the_field('sticky_text'); ?></div>
<?php
}
?>
</figure>
<div class="cataloge-item-data">
<h4 class="cataloge-item-title"><?php the_title(); ?></h4>
<div class="cataloge-item-category">
<?php
if (have_rows('cataloge_category')) {
while (have_rows('cataloge_category')) {
the_row();
?>
<?php
if (!empty(get_sub_field('cataloge_category_item'))) {
?>
<span><?php the_sub_field('cataloge_category_item'); ?></span>
<?php
}
?>
<?php
}
}
?>
</div>
<div class="cataloge-item-info"><?php the_content(); ?></div>
<div class="cataloge-item-action">
<?php
if (!empty(get_field('cataloge_file'))) {
?>
<a href="<?php the_field('cataloge_file'); ?>">
<svg width='25' height='25'>
<use xlink:href='<?php echo get_template_directory_uri(); ?>/frontend/fontawesome/solid.svg#eye'></use>
</svg>
</a>
<?php
}
?>
<?php
if (!empty(get_field('cataloge_download_file'))) {
?>
<a href="<?php the_field('cataloge_download_file'); ?>" download="">
<svg width='25' height='25'>
<use xlink:href='<?php echo get_template_directory_uri(); ?>/frontend/fontawesome/solid.svg#download'></use>
</svg>
</a>
<?php
}
?>
</div>
</div>
</article>
<?php
}
?>
</div>
<?php
}
}
?>
</div>
<?php
}
?>
</div>
</div>
</div>
What is it that I'm missing? Is there another way, other than foreach or/and array_chunk to get the result?
There's quite a few problems that you're going to run into doing it this way. To address the main problem, you're using array_chunk on the entire query object, not just the posts. This might be why it's not working as expected. You would probably want to do array_chunk($cataloge->posts) to chunk them.
However you've put this loop in a loop of all your posts, which means each iteration of that loop will repeat this. So if you have 10 posts in your $cataloge query, you'll end up with 50 slides, with 45 of them being duplicates. If we instead use a foreach loop with the array_chunk outside of the while loop (remembering to use setup_postdata()) we should be more on the right track:
<div class="section cataloge">
<div class="section-wrapper">
<div class="container">
<div class="cataloge-page">
<?php if ($cataloge->have_posts()) { ?>
<div class="cataloge-slider owl-carousel owl-theme">
<?php $input_array = array($cataloge->posts);
foreach (array_chunk($input_array, 2, true) as $column) { ?>
<div class="cataloge-slider-item-wrapper">
<?php foreach ($column as $input_array) {
setup_postdata($column); ?>
<article class="cataloge-item">
<figure class="cataloge-item-img img-placeholder">
<?php the_post_thumbnail(); ?>
<?php if (!empty(get_field('sticky_text'))) { ?>
<div class="cataloge-sticky"><?php the_field('sticky_text'); ?></div>
<?php } ?>
</figure>
<div class="cataloge-item-data">
<h4 class="cataloge-item-title"><?php the_title(); ?></h4>
<div class="cataloge-item-category">
<?php if (have_rows('cataloge_category')) {
while (have_rows('cataloge_category')) {
the_row();
if (!empty(get_sub_field('cataloge_category_item'))) { ?>
<span><?php the_sub_field('cataloge_category_item'); ?></span>
<?php }
}
} ?>
</div>
<div class="cataloge-item-info"><?php the_content(); ?></div>
<div class="cataloge-item-action">
<?php if (!empty(get_field('cataloge_file'))) { ?>
<a href="<?php the_field('cataloge_file'); ?>">
<svg width='25' height='25'>
<use xlink:href='<?php echo get_template_directory_uri(); ?>/frontend/fontawesome/solid.svg#eye'></use>
</svg>
</a>
<?php }
if (!empty(get_field('cataloge_download_file'))) { ?>
<a href="<?php the_field('cataloge_download_file'); ?>" download="">
<svg width='25' height='25'>
<use xlink:href='<?php echo get_template_directory_uri(); ?>/frontend/fontawesome/solid.svg#download'></use>
</svg>
</a>
<?php } ?>
</div>
</div>
</article>
<?php }
wp_reset_postdata(); ?>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
You can debug by echo or print_r step by step.
I think problem here $input_array = array($cataloge);
Change to $input_array = (array) $cataloge;
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; ?>
This code is displaying only one product from each category, however I want it to display all products from each category in its own owl-carousel.
How can I fix this?
<?php
$categoryIds = array("3","5","6","12","7");
foreach($categoryIds as $categoryId){
$carouselcategoryProducts = $block->getCategoryProductsById($categoryId);
foreach ($carouselcategoryProducts as $carouselproduct) {
/*Get Thumbnail*/
$carouselimageBlock = $block->getLayout()->createBlock('Magento\Catalog\Block\Product\ListProduct');
$carouselproductImage = $carouselimageBlock->getImage($carouselproduct, 'category_page_grid');
?>
<div class="owl-carousel owl-theme">
<h4 class="item">
<a href="<?php echo $carouselproduct->getProductUrl(); ?>">
<div class="product_row2">
<div class="product_column2">
<img class="product_img2" <?php echo $carouselproductImage->toHtml(); ?><i class="far fa-clone compare"></i>
<p class="product_title2"><?php echo $carouselproduct->getName(); ?></p>
<p class="product_price2">€ <?php echo $carouselproduct->getFinalPrice(); ?>,-</p>
</div>
</div>
</a>
</h4>
</div>
<?php
}
}
?>
Fixed the issue.
Correct code:
<?php
$categoryIds = array(3,5,6,12,7);
foreach($categoryIds as $categoryId) :
//echo "<p>category id: </p>$categoryId";
$carouselcategoryProducts = $block->getCategoryProductsById($categoryId);
echo "<div class=\"owl-carousel owl-theme\">";
foreach ($carouselcategoryProducts as $carouselproduct) :
//Get Thumbnail
$carouselimageBlock = $block->getLayout()->createBlock('Magento\Catalog\Block\Product\ListProduct');
$carouselproductImage = $carouselimageBlock->getImage($carouselproduct, 'category_page_grid');
?>
<h4 class="item">
<a href="<?php echo $carouselproduct->getProductUrl(); ?>">
<div class="product_row2">
<div class="product_column2">
<img class="product_img2" <?php echo $carouselproductImage->toHtml(); ?><i class="far fa-clone compare"></i>
<p class="product_title2"><?php echo $carouselproduct->getName(); ?></p>
<p class="product_price2">€ <?php echo $carouselproduct->getFinalPrice(); ?>,-</p>
</div>
</div>
</a>
</h4>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
Correct Code:
$categoryIds = array(3,5,6,12,7);
foreach ($categoryIds as $cat)
{
$_category = $objectManager->create('Magento\Catalog\Model\Category')->load($cat);
echo "<div class=\"owl-carousel owl-theme\">";
$categoryProducts = $_category->getProductCollection()
->addAttributeToSelect('*');
foreach ($categoryProducts as $product) {?>
<h4 class="item">
<a href="<?php echo $product->getProductUrl(); ?>">
<div class="product_row2">
<div class="product_column2">
<img class="product_img2" <?php echo $product->toHtml(); ?><i class="far fa-clone compare"></i>
<p class="product_title2"><?php echo $product->getName(); ?></p>
<p class="product_price2">€ <?php echo $product->getFinalPrice(); ?>,-</p>
</div>
</div>
</a>
</h4>
}
echo "</div>";
}
I am able to display next and previous post in worspress but unable to show second-previous or third-previous || second-next or third-next like
1 - I want to show this too
2 - this is showing
3 - My Current post
4 - This is showing
5 - I want to show this too
any help would be appreciated.
In the and I am showing you my code so you can judge.
CODE:
<?php $next = get_permalink(get_adjacent_post(false,'',false)); if
($next != get_permalink()) { ?><a href="<?php echo $next; ?>">
<li class="col-xs-12 col-md-4">
<div class="article">
<div class="contain-image">
<?php $nextPost = get_next_post(true); $nextthumbnail = get_the_post_thumbnail($nextPost->ID); echo $nextthumbnail; ?>
</div>
<div class="content">
<div class="double-content">
<div class="information">
<span class="category"><?php echo get_cat_name(1);?></span>
<span class="time"><?php the_time('M j, Y') ?></span>
</div>
<div class="title">
<?php next_post_link('%link', "%title", TRUE); ?>
</div>
<p>
<?php
$Nextpost = get_next_post($id);
echo apply_filters(‘the_content’, $Nextpost->post_content);
?>
</p>
</div>
</div>
</div>
</li>
</a>
<?php } ?>
<?php $prev = get_permalink(get_adjacent_post(true,'',true)); if
($prev != get_permalink()) { ?><a href="<?php echo $prev; ?>">
<li class="col-xs-12 col-md-4">
<div class="article">
<div class="contain-image">
<?php $prevPost = get_previous_post(true); $prevThumbnail = get_the_post_thumbnail($prevPost->ID); echo $prevThumbnail; ?>
</div>
<div class="content">
<div class="double-content">
<div class="information">
<span class="category"><?php echo get_cat_name(1);?></span>
<span class="time"><?php the_time('M j, Y') ?></span>
</div>
<div class="title">
<?php previous_post_link('%link', "%title", TRUE); ?>
</div>
<p>
<?php
$Prevpost = get_previous_post($id);
echo apply_filters(‘the_content’, $Prevpost->post_content);
?>
</p>
</div>
</div>
</div>
</li>
</a>
<?php } ?>
WordPress provides several navigational template tags to make it easy for visitors to surf your pages. There are basically two different types of template tags used for chronological post navigation:
posts_nav_link() – for navigating various archive (non-single) pages
previous_post_link() & next_post_link() – for navigating single-post pages
<?php $posts = query_posts($query_string); if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php previous_post_link(); ?> | <?php next_post_link(); ?>
<?php endwhile; endif; ?>
try this:
global $post;
$post_curr = $post;
//get last post
$post_last1 = get_previous_post();
setup_postdata($post_last1);
//get second last post
$post_last2 = get_previous_post();
setup_postdata($post_curr);
//get next post now
$post_next1 = get_next_post();
setup_postdata($post_next1);
//get second next post
$post_next2 = get_next_post();
//reset current post data
setup_postdata($post_curr);
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');