I have cms where I can upload pictures into a map.
I also have a slideshow where I have manually put some pictures in. But I want the slideshow to randomly take a picture that I have uploaded.
All my pictures that I upload start with "beeld_" followed with a random nummer
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel">
<? echo'<img src="'.$root.'/cms/files/slider/fotos/'.'beeld_'. [?] .'.png" alt="" />'; ?>
</div>
<div class="panel">
<img src="<?=$root?>/cms/files/slider/fotos/beeld_2.png" />
</div>
<div class="panel">
<img src="<?=$root?>/cms/files/slider/fotos/beeld_3.png" />
</div>
<div class="panel">
<img src="<?=$root?>/cms/files/slider/fotos/beeld_4.png">
</div>
</div>
</div>
You can try some thing like rand(0, 10); (Note: number 10 can be replaced with highest number of image you have e.g. if your image name has beeld_50 you can use rand(0, 50 and no image sequence is missing. you can set value of $i for number of slides you want to display)
for ($i=0; $i<3; $i++){
echo '<div class="panel">';
echo '<img src="' . $root . '/cms/files/slider/fotos/beeld_'. rand(0, 10) .'.png" />';
echo '</div>';
}
As I said in the comments, you should just list all the images / files you have using scandir or an other function:
$images = array_diff(scandir($your_directory), array('..', '.'));
This gives you an array with all the files listed in that directory, after you did this, you could build your slidesshow panels again doing something like:
for ($i = 0; $i < $number_of_panels; $i++){
echo '<div class="panel">';
echo '<img src="' . $root . '/cms/files/slider/fotos/'. $images[rand(0, (count($images)-1)] .'" />';
echo '</div>';
}
Not that you need to do (count($images)-1) , if you don't it could be possible you would go out of the arrays bounds.. .
Related
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>
I am able to fetch only first image of every row of database.How can I fetch all the images using prepared statement and explode function.
<form method="POST" enctype="multipart/form-data">
<?php
$sql="select property_img from img_tbl";
$q=$conn->query($sql);
if($q->num_rows>0)
{
while($r1=$q->fetch_assoc())
{
$property_img1=$r1['property_img'];
$property_img2=explode(' ',$property_img1);
echo '
<div id="shade">
<div class="col-sm-12 " id="color">
<div class="col-sm-4 form-group">
<div class="row fppadd"> ';
?>
<?php
foreach($property_img2 as $data){
echo '<img class="img-zoom" src="uploads/' . $data . '" width="200" height="150" alt="not fetched"> ';
}
?>
<br></a></span><br>
</div>
</div>
</div>
</div> <?php
}
}?>
<br>
</form>
uploads folder structure of images
Images are saved in database in this format.I want to fetch these images
Try looping over the array after exploding by iterating array index :
for($i=0; $i<count($property_img2); $i++){
echo '<img class="img-zoom" src="uploads/' . $property_img2[$i] . '" width="200" height="150" alt="not fetched"> ';
}
However, I agree with the comments that your design is poor, and you might consider changing it to one-to-many relationship.
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>
I have this code inside a php file:
<?php
function convertToReadableSize($size){
$base = log($size) / log(1024);
$suffix = array("", "KB", "MB", "GB", "TB");
$f_base = floor($base);
return round(pow(1024, $base - floor($base)), 1) . $suffix[$f_base];
}
$file_path = 'online_assets/images/';
?>
With a repeating loop displaying every entry:
<?php
$fileSystemIterator = new FilesystemIterator('online_assets/images/');
foreach ($fileSystemIterator as $fileInfo){
$entries[] = $fileInfo->getFilename();
?>
<div class="row">
<div class="col-md-7">
<a href="<?php echo $file_path;?>Room.jpg" target="new">
<img src="/slir/w320-h180-c320x180/<?php echo $file_path;?>Room.jpg" class="img-responsive"/></a>
</div>
<div class="col-md-5">
<h4 class="red"><?php $filename;?></h4>
<p>Filesize: <?php echo convertToReadableSize(filesize($cannery_file_path . 'Room.jpg'));?><br>Format: jpg<br>Quality: <?php list($width, $height) = getimagesize($file_path . 'Room.jpg'); echo ($width) . " x " . ($height); ?></p>
<a href="<?php echo $file_path;?>Room.jpg" target="new">
<button type="button" class="btn btn-primary btn-sm">Download Here</button></a>
</div>
</div>
<?php } ?>
What I am trying to accomplish here is a loop that will return a value essentially foreach image inside the /images/ folder - so all the client has to do is upload images to that folder and they appear, with a thumbnail, file information and a link to download.
I have the rest working, but the loop is giving me some troubles. What am I missing for this?
I picked the code for the FileSystemIterator from the php online manual.
for my wordpress based website I would like to display a random image between posts, not having an image after the last post.
I thought I could combine an echo inside a php, but it would appear that this is impossible.
Any ideas how to accomplish this ?
<?php
if (($wp_query->current_post + 1) < ($wp_query->post_count)) {
echo '<div class="post-item-divider" align="center"><img src="http://v2.fortherestless.com/images/clouds/<?php echo rand(1,20);?>.png" alt="Random Image" /></div>';
}
?>
Store the number first in a variable then insert it to the image url.
<?php
if (($wp_query->current_post + 1) < ($wp_query->post_count)) {
$image_num = rand(1, 20);
echo '<div class="post-item-divider" align="center"><img src="http://v2.fortherestless.com/images/clouds/' . $image_num . '.png" alt="Random Image" /></div>';
}
?>