I have 24 records in database table. I want to display 6 records in each particular list. So, i need 4 list of records basically.
I have tried this way, refer below code snippet for more details.
<?php
$homeBrands1 =mysql_query("SELECT b.MASTER_ID,b.IMAGES,b.PAGE,b.HOME_LOGO,b.STATUS,m.ID,m.TITLE,m.LOGO FROM cms as b
INNER JOIN master as m on m.ID=b.MASTER_ID WHERE b.PAGE='homebrands' AND b.POSITION=1");
$homeResult1 =mysql_fetch_array($homeBrands1);
$homeBrands3 =mysql_query("SELECT b.MASTER_ID,b.IMAGES,b.PAGE,b.STATUS,b.HOME_LOGO,m.ID,m.TITLE,m.LOGO FROM cms as b
INNER JOIN master as m on m.ID=b.MASTER_ID WHERE b.PAGE='homebrands' AND b.POSITION=3");
$homeResult3 =mysql_fetch_array($homeBrands3);
$homeBrands2 =mysql_query("SELECT b.MASTER_ID,b.IMAGES,b.PAGE,b.STATUS,b.HOME_LOGO,m.ID,m.TITLE,m.LOGO FROM cms as b
INNER JOIN master as m on m.ID=b.MASTER_ID WHERE b.PAGE='homebrands' AND b.POSITION=2");
$homeResult2 =mysql_fetch_array($homeBrands2);
$homeBrands4 =mysql_query("SELECT b.MASTER_ID,b.IMAGES,b.PAGE,b.STATUS,b.HOME_LOGO,m.ID,m.TITLE,m.LOGO FROM cms as b
INNER JOIN master as m on m.ID=b.MASTER_ID WHERE b.PAGE='homebrands' AND b.POSITION=4");
$homeResult4 =mysql_fetch_array($homeBrands4);
$homeBrands5 =mysql_query("SELECT b.MASTER_ID,b.IMAGES,b.PAGE,b.STATUS,b.HOME_LOGO,m.ID,m.TITLE,m.LOGO FROM cms as b
INNER JOIN master as m on m.ID=b.MASTER_ID WHERE b.PAGE='homebrands' AND b.POSITION=5");
$homeResult5 =mysql_fetch_array($homeBrands5);
$homeBrands6 =mysql_query("SELECT b.MASTER_ID,b.IMAGES,b.PAGE,b.STATUS,b.HOME_LOGO,m.ID,m.TITLE,m.LOGO FROM cms as b
INNER JOIN master as m on m.ID=b.MASTER_ID WHERE b.PAGE='homebrands' AND b.POSITION=6");
$homeResult6 =mysql_fetch_array($homeBrands6);
?>
<div class="brands">
<div class="main-heading">
<h3>Our<br> Brands</h3>
</div>
<ul id="slider1" style="overflow:hidden;">
<li style="margin-left: -19px !important; margin-right:22px !important;">
<div class="row" style="padding-left:10px !important; margin-left:1px;">
<div class="col-sm-4">
<div class="brand-cat wow fadeInUp" data-wow-delay="0s">
<img src="images/brands/<?php echo $homeResult1['IMAGES']; ?>" class="img-responsive" alt="<?php echo $homeResult1['TITLE'];?>">
<div class="brand-name"><img src="images/home_logos/<?php echo $homeResult1['HOME_LOGO'];?>" class="img-responsive" alt=""></div>
<div class="overlay">
<div class="overly-brand-name"><img src="images/home_logos/<?php echo $homeResult1['HOME_LOGO'];?>" class="img-responsive" alt=""><i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
View more
</div>
</div>
<div class="brand-cat wow fadeInUp" data-wow-delay="0.4s">
<img src="images/brands/<?php echo $homeResult3['IMAGES']; ?>" class="img-responsive" alt="<?php echo $homeResult3['TITLE'];?>">
<div class="brand-name"><img src="images/home_logos/<?php echo $homeResult3['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult3['TITLE'];?>"></div>
<div class="overlay">
<div class="overly-brand-name"><img src="images/home_logos/<?php echo $homeResult3['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult3['TITLE'];?>"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
View more
</div>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-6">
<div class="brand-cat stradivarius wow fadeInUp" data-wow-delay="0.3s">
<img src="images/brands/<?php echo $homeResult2['IMAGES']; ?>" class="img-responsive" alt="<?php echo $homeResult2['TITLE'];?>">
<div class="brand-name"><img src="images/home_logos/<?php echo $homeResult2['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult2['TITLE'];?>"></div>
<div class="overlay">
<div class="overly-brand-name"><img src="images/home_logos/<?php echo $homeResult2['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult2['TITLE'];?>"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
View more
</div>
</div>
<div class="brand-cat wow fadeInUp" data-wow-delay="0.5s">
<img src="images/brands/<?php echo $homeResult4['IMAGES']; ?>" class="img-responsive" alt="<?php echo $homeResult4['TITLE'];?>">
<div class="brand-name"><img src="images/home_logos/<?php echo $homeResult4['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult4['TITLE'];?>"></div>
<div class="overlay">
<div class="overly-brand-name"><img src="images/home_logos/<?php echo $homeResult4['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult4['TITLE'];?>"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
View more
</div>
</div>
</div>
<div class="col-sm-6" style="padding-left:10px;">
<div class="brand-cat gerry wow fadeInUp" data-wow-delay="0.2s">
<img src="images/brands/<?php echo $homeResult5['IMAGES']; ?>" class="img-responsive" alt="<?php echo $homeResult5['TITLE'];?>">
<div class="brand-name"><img src="images/home_logos/<?php echo $homeResult5['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult5['TITLE'];?>"></div>
<div class="overlay">
<div class="overly-brand-name"><img src="images/home_logos/<?php echo $homeResult5['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult5['TITLE'];?>"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
View more
</div>
</div>
</div>
</div>
<div class="row" style="padding:0px !important;">
<div class="col-sm-12">
<div class="brand-cat wow fadeInUp" data-wow-delay="0.5s">
<img src="images/brands/<?php echo $homeResult6['IMAGES']; ?>" class="img-responsive" alt="<?php echo $homeResult6['TITLE'];?>">
<div class="brand-name"><img src="images/home_logos/<?php echo $homeResult6['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult6['TITLE'];?>"></div>
<div class="overlay">
<div class="overly-brand-name"><img src="images/home_logos/<?php echo $homeResult6['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult6['TITLE'];?>"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
View more
</div>
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</li>
<li style="margin-left: -19px !important; margin-right:22px !important;">
<div class="row" style="padding-left:10px !important; margin-left:1px;">
<div class="col-sm-4">
<div class="brand-cat wow fadeInUp" data-wow-delay="0s">
<img src="images/brands/<?php echo $homeResult1['IMAGES']; ?>" class="img-responsive" alt="<?php echo $homeResult1['TITLE'];?>">
<div class="brand-name"><img src="images/home_logos/<?php echo $homeResult1['HOME_LOGO'];?>" class="img-responsive" alt=""></div>
<div class="overlay">
<div class="overly-brand-name"><img src="images/home_logos/<?php echo $homeResult1['HOME_LOGO'];?>" class="img-responsive" alt=""><i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
View more
</div>
</div>
<div class="brand-cat wow fadeInUp" data-wow-delay="0.4s">
<img src="images/brands/<?php echo $homeResult3['IMAGES']; ?>" class="img-responsive" alt="<?php echo $homeResult3['TITLE'];?>">
<div class="brand-name"><img src="images/home_logos/<?php echo $homeResult3['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult3['TITLE'];?>"></div>
<div class="overlay">
<div class="overly-brand-name"><img src="images/home_logos/<?php echo $homeResult3['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult3['TITLE'];?>"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
View more
</div>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-6">
<div class="brand-cat stradivarius wow fadeInUp" data-wow-delay="0.3s">
<img src="images/brands/<?php echo $homeResult2['IMAGES']; ?>" class="img-responsive" alt="<?php echo $homeResult2['TITLE'];?>">
<div class="brand-name"><img src="images/home_logos/<?php echo $homeResult2['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult2['TITLE'];?>"></div>
<div class="overlay">
<div class="overly-brand-name"><img src="images/home_logos/<?php echo $homeResult2['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult2['TITLE'];?>"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
View more
</div>
</div>
<div class="brand-cat wow fadeInUp" data-wow-delay="0.5s">
<img src="images/brands/<?php echo $homeResult4['IMAGES']; ?>" class="img-responsive" alt="<?php echo $homeResult4['TITLE'];?>">
<div class="brand-name"><img src="images/home_logos/<?php echo $homeResult4['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult4['TITLE'];?>"></div>
<div class="overlay">
<div class="overly-brand-name"><img src="images/home_logos/<?php echo $homeResult4['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult4['TITLE'];?>"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
View more
</div>
</div>
</div>
<div class="col-sm-6" style="padding-left:10px;">
<div class="brand-cat gerry wow fadeInUp" data-wow-delay="0.2s">
<img src="images/brands/<?php echo $homeResult5['IMAGES']; ?>" class="img-responsive" alt="<?php echo $homeResult5['TITLE'];?>">
<div class="brand-name"><img src="images/home_logos/<?php echo $homeResult5['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult5['TITLE'];?>"></div>
<div class="overlay">
<div class="overly-brand-name"><img src="images/home_logos/<?php echo $homeResult5['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult5['TITLE'];?>"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
View more
</div>
</div>
</div>
</div>
<div class="row" style="padding:0px !important;">
<div class="col-sm-12">
<div class="brand-cat wow fadeInUp" data-wow-delay="0.5s">
<img src="images/brands/<?php echo $homeResult6['IMAGES']; ?>" class="img-responsive" alt="<?php echo $homeResult6['TITLE'];?>">
<div class="brand-name"><img src="images/home_logos/<?php echo $homeResult6['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult6['TITLE'];?>"></div>
<div class="overlay">
<div class="overly-brand-name"><img src="images/home_logos/<?php echo $homeResult6['HOME_LOGO'];?>" class="img-responsive" alt="<?php echo $homeResult6['TITLE'];?>"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
View more
</div>
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</li>
</ul>
</div>
Can anyone help me on this issue?
You only need to do one query, and save your results in an array:
$homeBrands =mysql_query("SELECT b.MASTER_ID,b.IMAGES,b.PAGE,b.HOME_LOGO,b.STATUS,m.ID,m.TITLE,m.LOGO FROM cms as b
INNER JOIN master as m on m.ID=b.MASTER_ID WHERE b.PAGE='homebrands' ORDER BY b.POSITION LIMIT 6");
$homeResult =mysql_fetch_array($homeBrands);
Then iterate over the results using a loop (it is the loop that you are missing in your case):
<?php
foreach($homeResult as $hr)
{
?>
<div class="brand-cat wow fadeInUp" data-wow-delay="0s">
<img src="images/brands/<?php echo $hr['IMAGES']; ?>" class="img-responsive" alt="<?php echo $hr['TITLE'];?>">
<div class="brand-name"><img src="images/home_logos/<?php echo $hr['HOME_LOGO'];?>" class="img-responsive" alt=""></div>
<div class="overlay">
<div class="overly-brand-name"><img src="images/home_logos/<?php echo $hr['HOME_LOGO'];?>" class="img-responsive" alt=""><i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
View more
</div>
</div>
<?php
}
?>
And that's all the code you need, regardless of number of results you want to display. Hope you get the idea. The code is not tested
Related
How can I dynamic below html in foreach loop? I've an images array I can echo one image per loop but I'm not sure how can I loop two images per loop?
<div class="d-flex flex-row">
<div class="d-flex flex-column">
<img src="1" class="img-fluid">
<img src="2" class="img-fluid">
</div>
<div class="d-flex flex-column">
<img src="3" class="img-fluid">
<img src="4" class="img-fluid">
</div>
<div class="d-flex flex-column">
<img src="5" class="img-fluid">
<img src="6" class="img-fluid">
</div>
<div class="d-flex flex-column">
<img src="7" class="img-fluid">
<img src="8" class="img-fluid">
</div>
</div>
This what I tried.
<?php $images = get_field('image_gallery'); ?>
<?php if($images): ?>
<div class="d-flex flex-row">
<?php foreach( $images as $image ): ?>
<div class="d-flex flex-column">
<a data-fancybox="gallery" href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['url']; ?> " class='img-fluid' alt="">
</a>
<!-- This duplicates the image and need some break or continue statment -->
<a data-fancybox="gallery" href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['url']; ?>" class='img-fluid' alt="">
</a>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
Use the following code. May be it help you
<?php $images = get_field('image_gallery'); ?>
<?php if($images): ?>
<div class="d-flex flex-row">
<?php for ($i=0; $i < count($images); $i++) { ?>
<div class="d-flex flex-column">
<a data-fancybox="gallery" href="<?php echo $image[$i]['url']; ?>">
<img src="<?php echo $image[$i]['url']; ?> " class='img-fluid' alt="">
</a>
<!-- This duplicates the image and need some break or continue statment -->
<a data-fancybox="gallery" href="<?php echo $image[$i+1]['url']; ?>">
<img src="<?php echo $image[$i+1]['url']; ?>" class='img-fluid' alt="">
</a>
</div>
<?php
$i++;
}
?>
</div>
<?php endif; ?>
You could use a for loop instead and iterate the loop every 2 images...
<?php $images = get_field('image_gallery'); ?>
<?php if($images): ?>
<div class="d-flex flex-row">
<?php for($i = 0; $i < count($images); $i+=2){ ?>
<?php $image = $images[i];?>
<div class="d-flex flex-column">
<a data-fancybox="gallery" href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['url']; ?> " class='img-fluid' alt="">
</a>
<?php if (!empty($images[i+1])) { ?>
<?php $nextImage = $images[i+1];?>
<a data-fancybox="gallery" href="<?php echo $nextImage['url']; ?>">
<img src="<?php echo $nextImage['url']; ?>" class='img-fluid' alt="">
</a>
<?php } ?>
</div>
<?php } ?>
</div>
<?php endif; ?>
I have $product_image='img1.png,img2.png,img3.png' as a string where I explode $product_image and show image as $pro_img[0], $pro_img[1] and $pro_img[2].
I get error
Message: Undefined offset: 2
if $pro_img[2] doesn't find any image.
I want to solve it using foreach loop but I don't have any idea how can I use foreach to fix this problem?
<?php $pro_img = explode(",",$product_image); ?>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="pro-large text-center">
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[0]; ?>" style="width: 50%;height: 35%;" alt="">
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="pro-large text-center">
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[1]; ?>" style="width: 50%;height: 35%;" alt="">
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div class="pro-large text-center">
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[2]; ?>" style="width: 50%;height: 35%;" alt="">
</div>
</div>
</div>
<ul class="nav product-img-tab" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[0]; ?>" style="width: 50%;height: 96px;" alt="">
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[1]; ?>" style="width: 50%;height: 96px;" alt="">
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[2]; ?>" style="width: 50%;height: 96px;" alt="">
</a>
</li>
</ul>
Since you have various sections (home/profile/contact), that I assume you always want to display either with or without an image, I suggest using isset instead.
Isset simply checks if a key exists in the $pro_img array, and you can use that to decide whether or not to print the image tag:
<?php
$pro_img = explode(",",$product_image);
?>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="pro-large text-center">
<?php if (isset($pro_img[0])) : ?>
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[0]; ?>" style="width: 50%;height: 35%;" alt="">
<?php endif; ?>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="pro-large text-center">
<?php if (isset($pro_img[1])) : ?>
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[1]; ?>" style="width: 50%;height: 35%;" alt="">
<?php endif; ?>
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div class="pro-large text-center">
<?php if (isset($pro_img[2])) : ?>
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[2]; ?>" style="width: 50%;height: 35%;" alt="">
<?php endif; ?>
</div>
</div>
</div>
<ul class="nav product-img-tab" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
<?php if (isset($pro_img[0])) : ?>
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[0]; ?>" style="width: 50%;height: 96px;" alt="">
<?php endif; ?>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
<?php if (isset($pro_img[1])) : ?>
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[1]; ?>" style="width: 50%;height: 96px;" alt="">
<?php endif; ?>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">
<?php if (isset($pro_img[2])) : ?>
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[2]; ?>" style="width: 50%;height: 96px;" alt="">
<?php endif; ?>
</a>
</li>
</ul>
I've seen some websites in google images when you click "open image in new tab" it redirects to the url of the original post.
I have my website that has a lot of images created with php gd which take the data from the post and create the image, the url it's similar to this:
example.com/img/(number-post-id)-some-text.jpg
and the post its
example.com/post/(number-post-id)
It's there a way to redirect the images to the original post when somebody open the image in a new tab?
thanks
/* add a little bottom space under the images */
.thumbnail {
margin-bottom:7px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"/>
<div class="container">
<h1>Image Grid</h1>
<b> NOTE: </b> Try To Open With <kbd>`Right Click`</kbd> <b> > </b> <kbd> `Open Link In New Tab`</kbd> Or .. With
<kbd>Ctrl<kbd> + <kbd> Click<kbd>
<hr>
<div class="row">
<div class="col-xs-3">
<a href="https://www.google.com" class="thumbnail"> Google
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="https://www.facebook.com" class="thumbnail"> facebook
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="https://www.stackoverflow.com" class="thumbnail"> stackoverflow
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="www.yahoo.in" class="thumbnail"> yahoo.in
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
</div>
<hr>
</div>
From what I understood, this is a snippet that should solve your q:
<a href="http://example.com/imagelink" target="_blank"> <!-- target _blank opens in new tab-->
<img src="http://example.com/image.extension">
</a>
iam create website use template,
but i'm confused while loop / for loop one of script this template
this loop
2 div but only contain 2 content/article/news
This screenshot
http://i.stack.imgur.com/0OHsV.png
This code
<?php
$data_news = mysql_query("select * from news");
while($news=mysql_fetch_object($data_news)){
?>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<ul>
<li class="clearfix">
<div class="scale_image_container">
<img src="images/flex_small_img1.jpg" alt="" class="scale_image">
</div>
<div class="post_text">
<h4><?php echo $news->title ?></h4>
<div class="event_date"><?php echo tgl($news->datenews) ?></div>
</div>
</li>
<li class="clearfix">
<div class="scale_image_container">
<img src="images/img1.jpg" alt="" class="scale_image">
</div>
<div class="post_text">
<h4><?php echo $news->title ?></h4>
<div class="event_date"><?php echo tgl($news->datenews) ?></div>
</div>
</li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<ul>
<li class="clearfix">
<div class="scale_image_container">
<img src="images/flex_small_img1.jpg" alt="" class="scale_image">
</div>
<div class="post_text">
<h4><?php echo $news->title ?></h4>
<div class="event_date"><?php echo tgl($news->datenews) ?></div>
</div>
</li>
<li class="clearfix">
<div class="scale_image_container">
<img src="images/img1.jpg" alt="" class="scale_image">
</div>
<div class="post_text">
<h4><?php echo $news->title ?></h4>
<div class="event_date"><?php echo tgl($news->datenews) ?></div>
</div>
</li>
</ul>
</div>
<?php } ?>
How i can while loop/for loop like my this screenshot ?
Thank's :)
1you can use something like this , please try
<?php
$data_news = mysql_query("select * from news");
$count=1;
while($news=mysql_fetch_object($data_news)){
?>
<?php if($count % 2!=0 ) {?>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<ul>
<?php } ?>
<li class="clearfix">
<div class="scale_image_container">
<img src="images/flex_small_img1.jpg" alt="" class="scale_image">
</div>
<div class="post_text">
<h4><?php echo $news->title ?></h4>
<div class="event_date"><?php echo tgl($news->datenews) ?></div>
</div>
</li>
<?php if($count % 2==0) {?>
</ul></div>
<?php } ?>
<?php $count++;} ?>
I come from a Java background and never really have the need for foreach loops, but due to career and personal study I am getting heavily into php. I am still trying to get my head around them and am struggling to incorporate a conditional within it. I believe I may use to use a key array but I am completely lost. If you could explain how to achieve this, plus best practice.
Here you can the foreach loop I am trying to incorporate:
<?php foreach ($products as $product) { ?>
<?php if ($product['thumb']) { ?>
<div class="image"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></div>
<?php } ?>
<?php } ?>
Into this:
<div class="container">
<div class="col-md-12">
<h1>In the Spotlight</h1>
<div class="well">
<div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3"><img class="img-responsive" src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
</div>
Thanks in advance to those who help
This is a rough example of how you can do it. Its pretty silly but it does the job and you should be able to understand it.
<?php
// echo code from the start .. until <div class="carousel-inner"> <div class="item active">
$inserted = 0;
foreach ($products as $product) {
if (array_key_exists('thumb', $product) && !empty($product['thumb'])) {
++$inserted;
// echo '... code from each row, e.g. <div class="col-md-3" ....',
if ($insert % 4 == 0) { // call this for every 4 images
// echo the end of the row
}
if ($insert == 12) {
// echo the final part because we displayed 12 items now
break; // exit the loop after the 12 items
} else {
// echo the start of a row again because we haven't got 12 yet
}
}
}
?>