HTML Image gallery with Dynamic with PHP - php

I am trying to display images on a page using the bootstrap grid system, where their names are dynamically created by taking it from a database. For example I have this database, and I want to use the imageID in the src name of each image. Is there any cleaner way to do it without having to manually add a new div etc for each image?
PHP Code for getting image id:
<?php
//dynamically render images
include "../storescripts/connect-mysql.php";
$sql = mysql_query("SELECT * FROM imageGallery ORDER BY dateAdded ASC");
$images = array();
$imageCount = mysql_num_rows($sql); //Count the amount of products
if($imageCount > 0){
while($row = mysql_fetch_array($sql)){
$image = $row['imageID'];
$images[] = $image;
}
}else{
$image_gallery = "<h2>You have no images in the database</h2>";
}
?>
My HTML for displaying the images:
<div class="col-md-12">
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $images[0] ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $images[1] ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $images[2] ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $images[3] ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
</div>
See the image source for how I used the PHP.

As you have images available within $images array. So make a foreach loop inside html div.
<div class="col-md-12">
<?php foreach ($images as $image): ?>
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $image; ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
<?php endforeach; ?>
</div>
Update
This is for if you want only four divs inside a parent div over and over again.
<?php
$i = 0;
foreach ($images as $image):
if ($i % 4 == 0) {
echo '<div class="col-md-12">';
}
echo '<div class="col-md-3 galleryImg">';
echo '<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/' . $image .'" alt="Jedi Cycle Sport Gallery Image">';
echo '</div><!-- outputs child div -->';
$i++;
if ($i % 4 == 0) {
echo '</div> <!-- outputs parent div -->';
}
endforeach;
if ($i % 4 != 0) {
echo '</div> <!-- outputs parent div-->';
}

Simply use the foreach. Use the code as follows
<div class="col-md-12">
<?php foreach($images as $image) {?>
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $image ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
<?php } ?>
</div>

Instead of manually adding divs, you can simply use a foreach loop like this:
<div class="col-md-12">
<?php
foreach($images as $image){
?>
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $image; ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
<?php
}
?>
</div>

Related

How can i store images in an array and with a for loop print them? PHP

I try to print images with a for loop but the images dont load.
<?php
$imagenes = array('1.png', '2.jpg', '3.png', '4.jpg','IMG_0105.JPG');
?>
<div class="container">
<div class="row">
<div class="col-md">
<?php
for ($i=0; $i < 4; $i++) {
echo '<img src = \"$imagenes[$i]\" width = \'100px\' height = \'100px\';>';
}
?>
</div>
</div>
</div>
The images are in the same folder as the .php file
Edit: Added additional solutions based on answer from #nik
This will never work because variables are not evaluated inside of single quoted strings.
Make sure that your use a string inside double quotes. Or use string concatenation to build the HTML tag. Also, you image tag has a semicolon inside of it that might break the tag.
So you can do this ...
echo "<img src=\"{$imagenes[$i]}\" width=\"100px\" height=\"100px\">";
or
echo "<img src=\"" . $imagenes[$i] . "\" width=\"100px\" height=\"100px\">";
or
<img src="<?= $imagenes[$i]; ?>" width="100px" height="100px">
or
<img src="<?php echo $imagenes[$i]; ?>" width="100px" height="100px">
Use foreach for this. And for concatinate string with var - use . (dot)
<?php
foreach ($imagenes as $image) {
echo '<img src = "'.$image.'" width = "100px" height = "100px">';
}
?>
This would make it simplier:
<div class="container">
<div class="row">
<div class="col-md">
<?php foreach ($imagenes as $url) { ?>
<img src="<?php echo $url ?>" width="100px" height="100px">
<?php } ?>
</div>
</div>
</div>
I think its the way you're escaping the characters, you can just use concatenation on $images:
<div class="container">
<div class="row">
<div class="col-md">
<?php
for ($i=0; $i < 4; $i++) {
echo '<img src = '.$imagenes[$i].' width="100px" height ="100px";>';
}
?>
</div>
</div>
</div>

Bootstrap multiple rows based on mysql query count

I am using Bootstrap to create a row of 6 colunm images.
<div class="row">
<?php
$sql = //my query
while($row = mysqli_fetch_array($sql)){
?>
<div class="col-xs-6 col-md-2">
<img id="img" class="img-responsive" src="img/<?php echo $row['image']; ?>" />
</div>
<?php
}
?>
</div>
Which works fine when there is only 6 rows from the database, however when there is 7 the extra one gets bumped to the far right rather than the far left on the next row, see example below.
| img | img | img | img | img | img
| img
Normal result i am looking for would be
| img | img | img | img | img | img
| img
I want to create a new bootstrap row after every 6 results, any help would be appriciated
You could fetch all the values into an array first, count how many elements are in the array and then dynamically control what span classes you use.
<div class="row">
<?php
$sql = //my query
$images = array();
while($row = mysqli_fetch_assoc($sql)){
$images[] = $row['image'];
}
$column_class = count($images) > 6 ? "col-xs-3 col-md-1" : "col-xs-6 col-md-2";
foreach ($images as $image) {
?>
<div class="<?= $column_class ?>">
<img id="img" class="img-responsive" src="img/<?= $image ?>" />
</div>
<?php
}
?>
i have seen this before when the heights of the images are not identical. the float left only floats to the point where the bottom line is uneven. try adding a style height with a reasonable fixed height.
<div class="row">
<?php
$sql = //my query
while($row = mysqli_fetch_array($sql)){
?>
<div class="col-xs-6 col-md-2">
<img id="img" class="img-responsive" style="height:100px" src="img/<?php echo $row['image']; ?>" />
</div>
<?php
}
?>
</div>
I ran into this problem in a recent project and was able to solve it with this code. I only have two views so I only need the two lines but you could have more if you wanted. You can see this in action on this page
<div class="visible-md-block visible-lg-block clearfix">
<div class="visible-sm-block visible-xs-block clearfix">
Here is the full php code for the gallery page
<?php
$c = 1;
foreach($images as $image) {?>
<div class="col-xs-4 col-md-3">
<a class="thumbnail" href="path to full size image" data-toggle="lightbox" data-footer="<?php echo $image['caption']; ?>">
<img class="img-responsive" src="path to thumbnail" alt="...">
</a>
</div>
<?php
if(($c % 4) == 0) {
echo '<div class="visible-md-block visible-lg-block clearfix"></div>';
}
if(($c % 3) == 0) {
echo '<div class="visible-sm-block visible-xs-block clearfix"></div>';
}
$c++;
}
?>
Sorry while this code works for when you want the number of images in a row to change at different screen sizes I just re read your question and you say you just want 6 across all the time so you could just use one line
if(($c % 6) == 0) {
echo '<div class="clearfix"></div>';
}
The $c variable is just a counter and the code $c % 6 == 0 will put the clearfix div every time $c is divisible by 6.

In PHP fetch content and truncate the string or variable, till 3rd breakline then display

//In PHP fetch content and truncate the string or variable, till 3rd breakline then display
//when i use this method the entire div deallocated and the its not displaying properly...hope the fetch content contain some image tags too // ...
<div class="mid-blks-cont">
<!-- Block1 -->
<div class="mid-block-1 boxgrid caption">
<?php
foreach ($querypost as $row) {
$content = $row->post_content;
$pcontent_overview = (strlen($content) > 300) ? substr($content,0,300).'... Read More' : $content;
if($img == "No Image Uploaded" ) {
?>
<img alt="" src="<?php echo base_url(); ?>assets/img/samples/sample1.jpg"style="width: 391px; height:231px"/>
<?php } else { ?>
<img alt="" src="<?php echo base_url(); ?>uploads/<?php echo $row->post_media ;?>" style="width: 391px; height:231px" />
<?php }?>
<h4 class="cat-label cat-label2"><?php echo $row->category;?></h4>
<div class="cover boxcaption">
<h3><?php echo $row->post_title;?><span class="topic-icn"><?php echo $row->comment_count;?></span></h3>
<p> <?php echo $pcontent_overview;?>....</p>
MORE <i class="fa fa-angle-double-right"></i>
</div>
<?php } ?>
</div>
</div>

Foreach 4 items use a div, and then every other 4 items repeat another div

I am trying to create an image carousel, but that requires 2 seperate divs for the scroller, one active one, and then another which is not active but can be scrolled to...
This is what I'm trying to acomplish:
//the first 4 of a foreach
<div class="item active">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
</div>
//the next 4 of a foreach
<div class="item">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
</div><!-- /item -->
//now after every 4 repeat the <div class="item"> with the images inside, </div>
This is my foreach
<?php $i = 1; foreach(explode(",",$this->product->images) as $images): ?>
On each 4 I don't want the 4 divs to be repeated on the img inside the div.
I'm not sure how I will accomplish this?
Thanks to the posters. but now it's showing 5 instead of 4?
<div class="item active">
<?php $i=1 ; foreach(explode( ",",$this->product->images) as $images): ?>
<div data-target="#carousel" data-slide-to="<?php echo $i; ?>" class="thumb">
<img src="<?php echo Config::get('URL') .'images/products/'.System::escape($this->product->username). '/item' .System::escape($this->product->id) .'/'. System::escape($images); ?>"></div>
<?php if ($i % 4==0 ) {
echo '</div><div class="item">';
echo '<div data-target="#carousel" data-slide-to="'.$i. '" class="thumb"><img src="'.Config::get( 'URL') . 'images/products/'.System::escape($this->product->username). '/item' .System::escape($this->product->id) .'/'. System::escape($images).'"></div>';
} $i+=1; endforeach; ?>
</div>
<!-- /item -->
You can use the modulo operation to check, if your counter variable is the multiple of 4:
if ($i % 4 == 0) {
echo '</div><div>';
}
You just need to make sure that your foreach actually increases the value of $i on every iteration.
Alternatively you could reset $i back to 0 inside of the if body, so it always counts only to 4 and never higher. But I prefer the modulo solution, because that way you have an actual counter variable, not a fake one. :)
You can use Simple approach , add at start and also closing at the end like
<?php
$i=1;
foreach($arrayItems as $single){
if($i%4 == 0){
?>
<div class="Special">
<?php
}
?>
<div class="regular">Regular content</div>
<?php
if($i%4 == 0){
?>
</div>
<?php
}
$i+=1;
}
?>

Looping an image inside a div and loop the div after it will contain 4 images

currently i have this structure
<div class="col">
img1
img2
img3
img4
</div>
<div class="col">
img1
img2
img3
img4
</div>
then when i tried to loop it
i got this results
img[0]
img[1]
img[2]
how can i achieve this structure
<div class ="col"[0]>
img[0]
img[1]
img[2]
img[3]
</div>
<div class ="col"[1]>
img[0]
img[1]
img[2]
img[3]
</div>
Loop code:
<?php
foreach ($images as $k => $v){
$imagesrc ='graph.facebook.com/'.$v['fbid'].'/picture';;
?>
<div class="col" >
<img [<?php echo $k; ?>] src="<?php echo $imagesrc; ?>" width="29px" height="31px" alt="name">
</div>
<?php
}
?>
In the loop you want to add a <br> or <p> after each image.
Example inside loop
$counter = 0;
$firstTime = true;
$column = 0;
<?php foreach ($images as $k => $v):
$imagesrc ='graph.facebook.com/'.$v['fbid'].'/picture';
if ($firstTime) {
echo '<div class="col'.$column.'" >';
$firstTime = false;
}
if ($counter > 3) {
echo '</div>';
$column++;
echo '<div class="col'.$column.'" >';
$counter = 0;
} ?>
<img src="<?php echo $imagesrc; ?>" width="29px" height="31px" alt="name">
<?php $counter++; ?>
<?php endforeach; ?>
</div>

Categories