How can I add a certain class to the ul based on how many images there are?
So when there is 2 images the ul get class"images one-photo" and when there are 5 images the ul gets the class class"images five-photo" and so on...
What I now have in code:
<?php if( have_rows('blog_item') ): ?>
<?php while( have_rows('blog_item') ): the_row(); ?>
<ul class="images">
<?php if( get_sub_field('photo-01') ): ?>
<li><img src="https://www.website.com/<?php the_sub_field('photo-01'); ?>" alt="" /></li>
<?php endif; ?>
<?php if( get_sub_field('photo-02') ): ?>
<li><img src="https://www.website.com/<?php the_sub_field('photo-02'); ?>" alt="" /></li>
<?php endif; ?>
<?php if( get_sub_field('photo-03') ): ?>
<li><img src="https://www.website.com/<?php the_sub_field('photo-03'); ?>" alt="" /></li>
<?php endif; ?>
</ul>
<?php endwhile; ?>
<?php endif; ?>
Something like this would come to mind:
<?php
$count = 0;
$image_display = '';
for($i=1 ; $i <= 3; $i++){
if( get_sub_field('photo-0'.$i) ):
$count++; // count photos here
$image_display .= '<li><img src="https://www.website.com/'.the_sub_field("photo-0".$i).'" alt="" /></li>';
endif;
}
$class = '';
switch ($count) {
case 1: $class = 'one-photo';break;
case 2: $class = 'two-photo';break;
case 3: $class = 'three-photo';break;
case 4: $class = 'four-photo';break;
case 5: $class = 'five-photo';break;
}
echo '<ul class="images '.$class.'">'. $image_display.'</ul>';
?>
Related
I'm working on WordPress custom fields and I need to write PHP if-else conditions in a loop whether it is the first child or last child of the ul list. but I don't know how to apply, kindly please help me to solve it
Here is my code below
<?php if( have_rows('chart') ): ?>
<ul class="list-unstyled">
<?php while( have_rows('chart') ): the_row();
$sr_no = get_sub_field('sr_no');
$list_content = get_sub_field('list_content');
?>
<li><div><span class="w-num"><?php echo $sr_no; ?></span><?php echo $list_content; ?></div><span class="chart-divider"><span class="chart-divider-r"></span></span></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
Count the entries for rows.
Set up a counter, and every time you iterate increase.
<?php if( have_rows('chart') ): ?>
<ul class="list-unstyled">
<?php
$counter = 1;
$total-row = // Figure out how to count(rows), or something like that
while( have_rows('chart') ): the_row();
$sr_no = get_sub_field('sr_no');
$list_content = get_sub_field('list_content');
if($counter == 1){
// First Row
} elseif ($counter == $total-row){
// Last Row
}
?>
<li><div><span class="w-num"><?php echo $sr_no; ?></span><?php echo $list_content; ?></div><span class="chart-divider"><span class="chart-divider-r"></span></span></li>
<?php
$counter++;
endwhile; ?>
</ul>
<?php endif; ?>
Please try with below:
The result you will see in the li as a class
If fist li, you will see the first_class
If last li, you will see the last_class
Else only some_class
<?php
$Total_charts_count = wp_count_posts( 'chart' )->publish; //Total count of charts
$chart_number = 1; //Loop starting point.
if( have_rows('chart') ): ?>
<ul class="list-unstyled">
<?php
while( have_rows('chart') ): the_row();
$sr_no = get_sub_field('sr_no');
$list_content = get_sub_field('list_content');
// First item
if($chart_number == 1) {
$class = 'some_class first_class';
// Last item
} else if ($chart_number == $Total_charts_count) {
$class = 'some_class last_class';
// Not first / Not last item
} else {
$class = 'some_class';
}
?>
<li class="<?php echo $class; ?>">
<div>
<span class="w-num"><?php echo $sr_no; ?></span>
<?php echo $list_content; ?>
</div>
<span class="chart-divider">
<span class="chart-divider-r"></span>
</span>
</li>
<?php
$chart_number++;
endwhile; ?>
</ul>
<?php endif;
?>
Hope it's work for you.
So I want to be able to include a <p></p> using html tags at the end of my foreach statement below, but I keep running into problems with the code.
Image:
Code:
<?php if(!empty($mediaUrls)):
if(is_front_page() || is_home()):
$counter = 0;
foreach($mediaUrls as $entry):
$counter++;
$mediaurl = $entry['media_url'];
$permalink = $entry['permalink'];
if($counter > 6) {
break;
}
?>
<article class="tw-status">
<div class="tw-content">
<img alt="" class="insta_image" src="<?= $mediaurl; ?>" width="100%"/>
</div>
</article>
<?php endforeach;
endif;
else:
echo 'No posts available.';
endif;
?>
You need to close PHP first and then you can add P tag as below:
<?php if(!empty($mediaUrls)):
if(is_front_page() || is_home()):
$counter = 0;
foreach($mediaUrls as $entry):
$counter++;
$mediaurl = $entry['media_url'];
$permalink = $entry['permalink'];
if($counter > 6) {
break;
}
?>
<article class="tw-status">
<div class="tw-content">
<img alt="" class="insta_image" src="<?= $mediaurl; ?>" width="100%"/>
</div>
</article>
<?php endforeach; ?>
<p></p>
<?php
endif;
else:
echo 'No posts available.';
endif;
?>
Hope it helps you.
How could I limit this foraech statement to just 5 loops? I think I should just use Break but I'm not sure where to put it.
<?php if(!empty($locations)): foreach($locations as $location): ?>
<?php if(empty($location["title"])) continue; ?>
<li>
<a href="<?php esc_attr_e($url.$glue.http_build_query($location["query"])) ?>">
<?php esc_html_e($location["title"]) ?>
</a>
<?php if($param->count): ?>
<div class="wpjb-widget-item-count">
<div class="wpjb-widget-item-num"><?php echo intval($location["count"]) ?></div>
</div>
<?php endif; ?>
</li>
<?php endforeach; ?>
You can use array_slice() first to get a new array with no more than 5 elements.
$locations = array_slice($locations, 0, 5);
Then everything unchanged.
There are three methods:
Method 1: foreach with a counter var
$counter = 1;
foreach($locations as $location) {
// use $location here
if($counter++ == 5) {
break;
}
}
Method 2: foreach using $key=>$val
foreach($locations as $key=>$val) {
// Your content goes here
if($key === 4) {
break;
}
}
Method 3: for loop
for($i = 0; $i < 5; $i++) {
// Use $locations[$i] here and do something with it
}
Using a counter variable into your loop you can control/limit to any number.
Example:
$counter = 0;
foreach($locations as $location):
if($counter++ == 5):
break;
// Your other content goes here
endif;
endforeach;
Add a variable ... increment it each iteration ... after reach 5 just break loop.
<?php $i = 1;?>
<?php if(!empty($locations)): foreach($locations as $location): ?>
<?php if(empty($location["title"])) continue; ?>
<li>
<a href="<?php esc_attr_e($url.$glue.http_build_query($location["query"])) ?>">
<?php esc_html_e($location["title"]) ?>
</a>
<?php if($param->count): ?>
<div class="wpjb-widget-item-count">
<div class="wpjb-widget-item-num"><?php echo intval($location["count"]) ?></div>
</div>
<?php endif; ?>
</li>
<?php if ($i++ == 5) break; ?>
<?php endforeach; ?>
You can use for():
<?php if(!empty($locations)):
for($i=0; $i<5; $i++) {
$location = $locations[$i];
<?php if(empty($locations["title"])) continue; ?>
<li>
<a href="<?php esc_attr_e($url.$glue.http_build_query($location["query"])) ?>">
<?php esc_html_e($location["title"]) ?>
</a>
<?php if($param->count): ?>
<div class="wpjb-widget-item-count">
<div class="wpjb-widget-item-num"><?php echo intval($location["count"]) ?></div>
</div>
<?php endif; ?>
</li>
}
I use this code to display user entered data.
But all data is displayed on 1 single line separate by comma.
I want to display all separate data in an individual < li > class
How can I achieve that?
<?php if ( $this->showPros() ): ?>
<div class="pros">
<h4><?php echo $this->__('Pros:') ?></h4>
<ul class="pros-ul">
<li class="pros-li">
<?php $isFirst = true ?>
<?php foreach( $this->getProsCollection() as $pros )
{
$name = $this->__( $pros->getName() );
echo ( $isFirst ? $name : ( ', '.$name ) );
$isFirst = false;
} ?><br />
</li>
</ul>
</div>
<?php endif ?>
Just wrap the $name in li tags:
<?php if ( $this->showPros() ): ?>
<div class="pros">
<h4><?php echo $this->__('Pros:') ?></h4>
<ul class="pros-ul">
<?php foreach( $this->getProsCollection() as $pros )
{
$name = $this->__( $pros->getName() );
echo ('<li class="pros-li">'.$name.'</li>');
}
?>
</ul>
</div>
<?php endif ?>
I'm using joomla! to output some extra fields into an article. The fields are a list of images (max of 10) which are displayed using backslider jquery plugin.
Here is the code i've used which works:
<div id="bs0" class="backslider">
<ul class="bs-slides">
<?php
$img1 = $this->item->extrafields['image_1'];
$img2 = $this->item->extrafields['image_2'];
$img3 = $this->item->extrafields['image_3'];
$img4 = $this->item->extrafields['image_4'];
$img5 = $this->item->extrafields['image_5'];
$img6 = $this->item->extrafields['image_6'];
$img7 = $this->item->extrafields['image_7'];
$img8 = $this->item->extrafields['image_8'];
$img9 = $this->item->extrafields['image_9'];
$img10 = $this->item->extrafields['image_10'];
?>
<?php if($img1) { ?>
<li><img src="<?php echo $img1; ?>"></li>
<?php } ?>
<?php if($img2) { ?>
<li><img src="<?php echo $img2; ?>"></li>
<?php } ?>
<?php if($img3) { ?>
<li><img src="<?php echo $img3; ?>"></li>
<?php } ?>
<?php if($img4) { ?>
<li><img src="<?php echo $img4; ?>"></li>
<?php } ?>
<?php if($img5) { ?>
<li><img src="<?php echo $img5; ?>"></li>
<?php } ?>
<?php if($img6) { ?>
<li><img src="<?php echo $img6; ?>"></li>
<?php } ?>
<?php if($img7) { ?>
<li><img src="<?php echo $img7; ?>"></li>
<?php } ?>
<?php if($img8) { ?>
<li><img src="<?php echo $img8; ?>"></li>
<?php } ?>
<?php if($img9) { ?>
<li><img src="<?php echo $img9; ?>"></li>
<?php } ?>
<?php if($img10) { ?>
<li><img src="<?php echo $img10; ?>"></li>
<?php } ?>
</ul>
</div>
I'm not a php expert but is there a better way of optimising this code, I'm thinking maybe putting the $img variables into an array and using a foreach loop to output each list item?
A little help wouldn't go a miss :)
Just iterate over them and use the index to reference the array indices:
for ($i = 1; $i <= 10; ++$i) {
if (!empty($this->item->extrafields["image_$i"])) {
echo '<li><img src="', htmlspecialchars($this->item->extrafields["image_$i"]), '"></li>';
}
}
Assuming there are up to 10 items to investigate.
The solution below will avoid evaluating strings, cache's everything you can, to keep your application running smoothly, and keeps your code nice and tidy.
<div id="bs0" class="backslider">
<ul class="bs-slides">
<?php
// Generate length of our image array / store known length of array
$images = 10;
// Loop through images
for( $i = 1; $i <= $images; $i++ ) {
// Store it for optimization sake.
$field = $this->item->extrafields['image_' . $i];
// Check it's not empty
if( !empty( $field ) ) {
// If not, print to browser
printf(
'<li><img src="%s" alt=""></li>',
htmlspecialchars($field)
);
}
}
?>
</ul>
</div>
I think this code will do same thing.
<div id="bs0" class="backslider">
<ul class="bs-slides">
<?php
for($i = 1; $i <= 10; $i++)
{
$img = $this->item->extrafields['image_'.$i]
if($img) { ?>
<li><img src="<?php echo $img; ?>"></li>
<?php }
}
?>
</ul>
</div>