I want to add or show a divider/dotted underline after 5th box/row only once below is my php code, now it shows after every box/row
<div class="categories-holder">
<?php if ($categories) { ?>
<?php foreach ($categories as $category) { ?>
<div class="box-c">
<div class="bottom">
<div class="top">
<ul class="category">
<li><img src="<?php echo $base; ?>image/<?php echo $category['image']; ?>" width="30" height="30" alt=" " class="icon" /><?php echo $category['name']; ?></li>
</ul>
<div class="clr"></div>
</div>
</div>
</div>
<?php if (count($categories) > '5') { ?>
<div class="divider"></div>
<?php } ?>
<?php } ?>
<?php } ?>
</div>
You can add some counter and increment it in each loop and than use modulo like:
$counter = 0;
if ($counter % 5 == 0) {
...Display divider...
}
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;
I have around 40 to 50 logos in my website and they all are in slider it takes to much time to see whole slider.
Here It is
Here my code...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="logo slider" style="padding-bottom:10px;">
<?php foreach ($logo $row): ?>
<div class="col-md-3 col-sm-6 col-xs-12 text-center sm-margin-nine-bottom xs-margin-fifteen-bottom">
<div class="">
<a href="#">
<img alt="" src="<?php echo $base_url; ?>uploads/<?php echo $row->image; ?>" style="height: 250px;width: 2000px;">
</a>
</div>
</div>
<?php endforeach; ?>
</section>
Now I want to show 2 rows of my logo section like This
Any suggestion how can i do it...
Thanks in advance...
You can achieve this by using modulo in foreach loop and join odd / even like this -
<section class="logo slider" style="padding-bottom:10px;">
<?php $i = 0; ?>
<?php foreach ($logo as $row): ?>
<?php if($i%2 == 0){ ?>
<div class="col-md-3 col-sm-6 col-xs-12 text-center sm-margin-nine-bottom xs-margin-fifteen-bottom">
<div class="">
<a href="#">
<img alt="" src="<?php echo $base_url; ?>uploads/<?php echo $row->image; ?>" style="height: 250px;width: 2000px;">
</a>
</div>
<?php } else { ?>
<div class="">
<a href="#">
<img alt="" src="<?php echo $base_url; ?>uploads/<?php echo $row->image; ?>" style="height: 250px;width: 2000px;">
</a>
</div>
</div>
<?php } $i++;
?>
<?php endforeach; ?>
I don't know much about php so please forgive for any syntax error.
I would suggest you split the array in half using the array_slice function.
eg:
$array_length = count($logo);
$slider_one = array_slice($logo, 0, $array_length / 2);
$slider_two = array_slice($logo, $array_length / 2);
You would then have two for each loops on the front end to display slider one and two.
I want to display slide with two records at a time. Now I am only getting only one record at a time in slider because I fetch data in while loop. My code is:
<ul class="slides">
<?php
...
while($eventData = mysql_fetch_array($eventSql))
{
?>
<li class="questions-slide-item">
<div class="query clearfix">
<div class="image fl">
<img src='<?php echo $eventData['image']; ?>' style="width:63px; height:61px;">
</div>
</div>
</li>
<?php } ?>
</ul>
You can add a counter and open/close the list item only every second iteration:
<ul class="slides">
<li class="questions-slide-item">
<?php
...
$count = 0;
while($eventData = mysql_fetch_array($eventSql))
{
if($count > 0 && $count % 2 == 0) {
?>
</li>
<li class="questions-slide-item">
<?php
}
?>
<div class="query clearfix">
<div class="image fl">
<img src='<?php echo $eventData['image']; ?>' style="width:63px; height:61px;">
</div>
</div>
<?php
$count++;
}
?>
</li>
</ul>
You can first take all the rows in one array and then use that array as per your needs.
See to following code to understand what I am trying to say.
<?php
...
$eventData= array();
while($row = mysql_fetch_assoc($eventSql))
{
$eventData [] = $row;
}
for($i=0;count($eventData);$i=$i+2)
{
?>
<li class="questions-slide-item">
<div class="query clearfix">
<div class="image fl">
<img src='<?php echo $eventData[$i]['image']; ?>' style="width:63px; height:61px;">
</div>
</div>
</li>
<li class="questions-slide-item">
<div class="query clearfix">
<div class="image fl">
<img src='<?php echo $eventData[$i+1]['image']; ?>' style="width:63px; height:61px;">
</div>
</div>
</li>
<?php } ?>
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; ?>
I have a foreach loop which retrieves the subcategories of the current category.
<?php $_categories = $this->getCurrentChildCategories(); ?>
<?php foreach ($_categories as $_category): ?>
<div class="item">
<?php echo $this->htmlEscape($_category->getName()) ?>
</div>
<?php endforeach; ?>
I want to divide the results in rows of three columns. The desired format is then:
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
...
---------------EDIT----------------
My code is now as follows. How and where do i close the row div?
<?php $_categories = $this->getCurrentChildCategories(); ?>
<?php foreach ($_categories as $_category): ?>
<?php if ($i % 3 == 0) { ?>
<div class="row">
<?php } ?>
<div class="item">
<h2><?php echo $this->htmlEscape($_category->getName()) ?> »</h2>
</div>
<?php $i++; endforeach; ?>
---------------EDIT 2----------------
Getting closer. This is the result:
<div class="category-list">
<div class="row"></div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
</div>
How do I get rid of the empty row?
The code is now as follows:
<div class="category-list">
<?php
$i=0;
echo '<div class="row">';
$_categories = $this->getCurrentChildCategories();
foreach($_categories as $_category):
{
if($i %3 ==0)
{ ?>
</div>
<div class="row">
<div class="item">
<h2><?php echo $this->htmlEscape($_category->getName()) ?> »</h2>
</div>
<? }
else
{ ?>
<div class="item">
<h2><?php echo $this->htmlEscape($_category->getName()) ?> »</h2>
</div>
<? }
$i++;
}
endforeach;
?>
</div>
---------------EDIT 3----------------
Solved by hiding the empty row via CSS.
You have to introduce az iterator (?) variable for example $i = 0
if ($i % 3 == 0) { //modulo
// use for whatever you want
}
In every cycle (maybe at the end of it, it depends on your real solution) you have to increment $i (++$i);
Hope this helps
<?php
$i=0;
echo"<div class="row" >
foreach($category as $cat)
{
if($i %3 ==0)
{
echo"</div><div class='row'> <div class='item'> Content </div>";
}
else
{
echo"<div class='item'> Content </div>";
}
$i++;
}
echo"</div>";
?>