I'm trying to create whiles to print images on bootstrap carousel. I am learning.
I get an array with database urls and I can not do while display the correct image active.
<?php
$this_post_id = get_the_ID();
$urls =get_post_meta($this_post_id,'my-images', true);
$totalUrls = count($urls);//count urls in array
$number = 0;
?>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php while($number <= $totalUrls){ ?>
<li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li>
<?php } ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php while($number <= $totalUrls){
foreach($urls as $url){
?>
<div class="item active">
<img src="<?php echo $url;?>" class="img-responsive" />
<div class="carousel-caption">
...
</div>
</div>
<?php} } ?>
</div>
Thanks
Related
I have a 'while' statement on my WordPress website which grabs the latest posts. I want to group every 6 posts in an ordered list. Is it possible to wrap the <li> elements in a <ul> for every 6 items?
I haven't tried anything to do this yet as not sure if possible. My code below is.
<?php elseif(get_row_layout() == 'posts_section'): ?>
<section class="content posts">
<div class="row">
<div class="columns medium-12">
<ul class="medium-block-grid-3 small-block-grid-2" data-equalizer>
<?php
$catquery = new WP_Query('cat='. get_sub_field('category') .'');
?>
<?php
while($catquery->have_posts()) : $catquery->the_post();
?>
<li data-equalizer-watch>
<a href="<?php the_permalink() ?>" rel="bookmark">
<div class="overlay"></div>
<div class="content">
<p><?php the_title(); ?></p>
<div class="text-center"><?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?></div>
</div>
</a>
</li>
<?php
endwhile;
wp_reset_postdata();
?>
</ul>
</div>
</div>
</section>
I cant test the following bit of code since you dont provide any other information, but this is how I would solve this:
<?php elseif(get_row_layout() == 'posts_section'): ?>
<section class="content posts">
<div class="row">
<div class="columns medium-12">
<ul class="medium-block-grid-3 small-block-grid-2" data-equalizer>
<?php
$catquery = new WP_Query('cat='. get_sub_field('category') .'');
?>
<?php
$n = 0; //setting a count
while($catquery->have_posts()) : $catquery->the_post();
if ($n % 6 != 0) {
$n += 1 //keep on increasing till its divisble by 6
?>
<li data-equalizer-watch>
<a href="<?php the_permalink() ?>" rel="bookmark">
<div class="overlay"></div>
<div class="content">
<p><?php the_title(); ?></p>
<div class="text-center"><?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?></div>
</div>
</a>
</li>
<?php
}
if ($n % 6 = 0) {
?>
//end the ul tag here and start a new one
</ul>
<ul class="medium-block-grid-3 small-block-grid-2" data-equalizer>
<?php
}
endwhile;
wp_reset_postdata();
?>
</ul>
</div>
</div>
</section>
I am trying to write a foreach loop for a Bootstrap Carousel in PHP, but the problem I'm having is, the first slide's div must be set as "active" but not the rest, and the li's "data-slide-to" must be set to the correct number, making the first one "[0]" have a class of active, but not the rest...
I know how to get the first result of the foreach, but I don't know how to call the second and beyond separately, nor how to make it match it to the "data-slide-to".
Here is my code below.
Disclaimer: the PHP code is Wordpress-specific, but the answer to the problem does not involve Wordpress-specific code.
PHP
$query_images_args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'post_status' => 'inherit',
'posts_per_page' => - 1,
);
$query_images = new WP_Query( $query_images_args );
$images = array();
foreach ( $query_images->posts as $image ) {
$images[] = wp_get_attachment_url( $image->ID );
}
for($i = 0; $i < count($images); $i++) {
$imageURL = $images[$i];
// I would echo all the entries with:
// echo $imageURL;
}
HTML
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
//Here's the active "li", which would be set to $imageURL[0]
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
//Here are the rest of the "li"s , which idk how to set up?
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
//Again, I know to set the background-image:url to '<?php echo $imageURL[0] ?>'
<div class="fill" style="background-image:url('img/01.png');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
//Not sure about here...
<div class="fill" style="background-image:url('img/02.png');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
//This part needs to be covered by the 2nd imageURL and beyond...
<div class="fill" style="background-image:url('img/03.png');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
Not sure if I'm approaching it correctly, but I cannot get it to work.
<?php
**//for indicators**
foreach($yourArray as $key=>$result){
<li data-target="#myCarousel" data-slide-to="<?php echo $key; ?>" class="<?php if($ke==0){echo "active";} ?>"></li>
}
For Your Image
foreach($yourArray as $key=>$result){
<div class="item <?php if($key==0){echo "active";} ?>">
<div class="fill" style="background-image:url('img/01.png');"></div> // Here is Your Image Url
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
}
Hope This Will Gives You an Idea.
You've probably solved this a long time ago, but this is what I did to solve the first image being set as 'active'.
echo '<div class="item active">'.$images[0].'</div>';
unset($images[0]);
foreach ($images as $img){
echo '<div class="item">'.$img.'</div>';
}
I'm trying to use a Bootstrap carousel in Wordpress, so I need to have a loop. However, the slider script requires the first slide to have a special class, and can't figure how to apply that class to the first iteration of the loop and only to it (in fact the class will rotate throughout the slides when the carousel is working, but the html needs to have first slide with active class and then all other slides without that class).
here is my code so far:
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<?php if( have_rows('slide') ): ?>
<?php while( have_rows('slide') ): the_row();
// vars
$img = get_sub_field('slide_image');
$desc = get_sub_field('slide_text');
$title = get_sub_field('slide_title');
$url = $img['url'];
$size = 'slider';
$thumb = $gal['sizes'][ $size ];
?>
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background:url('<?php echo $img; ?>') no-repeat; background-size:cover;"></div>
<div class="carousel-caption">
<h2><?php echo $title; ?></h2>
<div class="desc"><?php echo $desc; ?></div>
</div>
</div>
<?php endwhile;?>
<?php endif;?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
and for reference, the original pure HTML code is located at https://github.com/IronSummitMedia/startbootstrap/blob/gh-pages/templates/half-slider/index.html
so, in short, what I need is to have this line:
<div class="item active">
only once, but all the other iterations should be
<div class="item">
It would be something like How to put an class on specific (first element) inside loop?, only that in PHP and WordPress, I tried to follow that answer but couldn't understand it
Any help really appreciated
If you want just one occurrance, just use an $i variable.
<?php
// This sets the value to 0
$i = 0;
while( have_rows('slide') ): the_row();
// vars
$img = get_sub_field('slide_image');
$desc = get_sub_field('slide_text');
$title = get_sub_field('slide_title');
$url = $img['url'];
$size = 'slider';
$thumb = $gal['sizes'][ $size ];
?>
<!-------------------------------->
<!-- THIS $i checks if equals 0 -->
<!-------------------------------->
<div class="item<?php if($i==0) { ?> active<?php } ?>">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background:url('<?php echo $img; ?>') no-repeat; background-size:cover;"></div>
<div class="carousel-caption">
<h2><?php echo $title; ?></h2>
<div class="desc"><?php echo $desc; ?></div>
</div>
</div>
<?php
// This will increment $i so $i should not
// equal 0 except on the first loop
$i++;
endwhile; ?>
You can use $wp_query->current_post to get the index position in The Loop and then only print out "active" when the $wp_query->current_post == 0
Edit: realized you said "a loop" and not "the loop", you can just use an variable and if statement to check if it is the first iteration of your loop or not.
$show_active = true;
while( have_rows('slide') ): the_row();
if ( $show_active ){
$active = 'active';
$show_active = false;
} else {
$active = '';
}
endwhile;
I have used:
<div class="carousel-inner">
#foreach($banners as $banner)
<div class="carousel-item #if($banner->id == 1) active #endif">
<img class="d-block w-100" src="{{ Storage::disk('local')->url($banner->image) }}" alt="{{ $banner->title }}">
<div class="carousel-caption d-none d-md-block">
<h1>{{ $banner->title }}</h1>
<p>{{ $banner->body }}</p>
</div>
</div>
#endforeach
</div>
Works like a breeze!
Im trying to learn PHP and using it with the Bootstrap library for my site. I am looking to use the bootstrap carousel as seen here
What I am trying to achieve is the carousel with captions and the Machine Name I am showing in the picture would be a hyperlink that will take you to that page for more info. I have a MySQL database that contains the machine name and the ImagePath as to where it is located.
So my code currently is as below -
<?php
while($row = mysql_fetch_array($result))
{
?>
<div class="bs-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<img data-src="holder.js/900x800/auto/#777:#777" style="height: 400px; width: 400px;" alt="First slide image" src="<?php echo $row['MachineImagePath'] ?>"/>
<div class="finlay-carousel-caption">
<h3><?php echo $row['MachineName']?></h3>
<div>
<p>
Click the link above for more details about <?php echo $row['MachineName']>
</p>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<?php
}
mysql_close($connection);
?>
Currently instead of placing each image inside the carosuel this is creating a new carousel for each image down the page. Should the <carousel-example-captions> html be outside the while loop so it is created once and then the img tag will pick up the new image for each slide as you click the next > and prev < buttons.
Note also - <h3><?php echo $row['MachineName']?></h3> - I have not yet turned the header into a hyperlink as I wanted to get the carousel working correctly first.
I recently added a carousel with a link from the mysql database. The issue is that you have the create new carousel code inside of the while statement. If you take it out and just have the new slide commands inside the while it will work perfect.
<div class="bs-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
$counter = 1;
while($row = mysql_fetch_array($result)){
?>
<div class="item<?php if($counter <= 1){echo " active"; } ?>">
<a href="">
<img data-src="holder.js/900x800/auto/#777:#777" style="height: 400px; width: 400px;" alt="First slide image" src="<?php echo $row['MachineImagePath'] ?>"/>
</a>
<div class="finlay-carousel-caption">
<h3><?php echo $row['MachineName']?></h3>
<p>Click the link above for more details about <?php echo $row['MachineName']>; ?></p>
</div>
</div>
<?php
$counter++;
}
mysql_close($connection);
?>
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
</div>
</div>
If you get the number of rows from you mysql statement you can change the indicators section to have a loop that would allow for unlimited number of slides.
I've solved this issue creating a control variable like this:
define a control variable: $active = true
create a loop
check inside a loop if $active is true
set control variable to false after loop ends
<?php $active = true; ?>
<?php foreach($images as $image):?>
<div class="carousel-item <?php echo ($active == true)?"active":"" ?>">
<img src="assets/img/anuncios/<?php echo $image['image'] ?>" class="d-block w-100" alt="...">
</div>
<?php $active = false; ?>
<?php endforeach; ?>
This way, the active class is printed only at the first loop.
I find most carousel software, even that based on JQuery, too complicated to configure and maintain, that's why I created my own carousel that you can download here for free: https://33hops.com/php-html5-lightweight-slideshow-carousel.html
The premises on top of which I programmed this are short and straight: I just wanted something that could automatically pick the images put in a given folder, preload them and cycle through them with a nice HTML5 transition effect and optionally texts overlayed on top. The result is an ultralight PHP carousel with an ultra low footprint ideal for mobile developments and easy maintenance, just change the images and reload.
<div id="carousel-example-generic" class="carousel slide clearfix" data-ride="carousel">
<div class="carousel-inner">
<?php
$tmp_post = $post;
$query_args = array( 'suppress_filters' => false, 'post_type' => 'post' );
$slides = get_posts( $query_args );
if ( ! empty( $slides ) ) {
$counter = 0;
foreach( $slides as $post ) { setup_postdata( $post ); $counter++;
?>
<div class="item<?php if ($counter == 1) echo ' active'; ?>">
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($loop->ID) );?>
<img src="<?php echo $feat_image ?>" class="img-responsive img-circle"/>
<div class="finlay-carousel-caption">
<?php $degisc= get_post_meta( $post->ID, '_my_meta_value_key', true );?>
<h1><?php echo $degisc;?></h1>
<?php $position = get_post_meta( $post->ID, '_my_meta_value_key1', true );?>
<p><?php echo $position;?></p>
<div class="line marginBottom15"></div>
<?php $words = get_post_meta( $post->ID, '_my_meta_value_key2', true );?>
<p><?php echo $words;?></p>
<div class="line"></div>
</div>
</div>
<?php } }
$post = $tmp_post;
?>
</div>
</div>
geeks please help,
I have a problem with the usage of array keys with the while loop.
I'm trying to display the twitter bootstrap slider images by looping from the database with this code:
<div id="slider">
<!--Code for make home images slide show-->
<div id="myCarousel" class="carousel slide">
<!-- here comes the engine to run the sliders -->
<?php
$query = 'SELECT * FROM banners WHERE status = 1 ORDER BY id ASC';
?>
<div class="carousel-inner">
<?php
if ($r = mysql_query($query , $conn)) { //run the query
$row = mysql_fetch_array($r);
reset($row);
while (list($key, $value) = each($row)) {
if ($key == 0) { ?>
<div class="item active">
<img src="images/homeimages/<?php echo $value['image'];?>" alt="<?php echo $value['title'];?>">
<!-- <img src="images/homeimages/one.jpg" alt=""> -->
<div class="carousel-caption">
<!-- <h4>First Thumbnail label</h4> -->
<p><i><?php echo $value['title'];?></i></p>
</div>
</div>
<?php }else{ ?>
<div class="item">
<img src="images/homeimages/<?php echo $value['image'];?>" alt="<?php echo $value['title'];?>">
<!-- <img src="images/homeimages/one.jpg" alt=""> -->
<div class="carousel-caption">
<!-- <h4>First Thumbnail label</h4> -->
<p><i><?php echo $value['title'];?></i></p>
</div>
</div>
<?php }
}
}else {
print '<p style="color: red;">Could not retrieve the slider:<br />' . mysql_error($dbc) . '.</p>';
} ?>
</div>
<!-- <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
</div><!-- endof slider -->`
.
as`it's well known the first slider image of twitter bootstrap must have the class of active to make sure it loads faster. I need to pick the first slider image from an array and add the class of active into it while the rest of the slider images remains the same without an active class.
can someone please tell me where i'm messing up with my codes?
Try this:
<div class="carousel-inner">
<?php
if ($r = mysql_query($query , $conn)) {
$count = 0;
while ($row = mysql_fetch_array($r){
if ($count == 0){?>
<div class="item active">
<?php}
else { ?>
<div class="item">
<?php}?>
<img src="images/homeimages/<?php echo $row['image'];?>" alt="<?php echo $row['title'];?>">
<div class="carousel-caption">
<p><i><?php echo $row['title'];?></i></p>
</div>
</div>
<?php
}
$count ++;
}
}
else {
print '<p style="color: red;">Could not retrieve the slider:<br />' . mysql_error($dbc) . '.</p>';
}