image folder has 3 files
<img src='images/AAA_1.jpg'>
<img src='images/AAA_2.jpg'>
<img src='images/AAA_3.jpg'>
<img src='images/BBB_1.jpg'>
<img src='images/BBB_2.jpg'>
<img src='images/BBB_3.jpg'>
<img src='images/CCC_3.jpg'>
PHP is
foreach ($carousel as $image) {
if(strpos($image, 'AAA_') === 0){
echo "<div class='box'><img src='images/carousel/$image'/></div>";
}
}
so the output is
<div class='box'>
<img src='images/AAA_1.jpg'>
</div>
<div class='box'>
<img src='images/AAA_2.jpg'>
</div>
<div class='box'>
<img src='images/AAA_3.jpg'>
</div>
How can I add a first class on the fist box, looks like
<div class='box first'>
<img src='images/AAA_1.jpg'>
</div>
<div class='box'>
<img src='images/AAA_2.jpg'>
</div>
<div class='box'>
<img src='images/AAA_3.jpg'>
</div>
Use the key:
foreach ($carousel as $key=>$image) {
$first = $key == 0 ? ' first' : '';
if(strpos($image,'AAA_') === 0){
echo <<<EOD
<div class='box{$first}'>
<img src='images/carousel/{$image}.jpg'>
</div>
EOD;
}
}
Note: I used a heredoc statement for the echo as I prefer to echo multiple tags of HTML over multiple lines.
Simple: Use a flag.
$firstEchoed = FALSE;
foreach ($carousel as $image) {
if(strpos($image,'AAA_') === 0){
echo "<div class='box";
if ( ! $firstEchoed)
echo " first";
echo "'><img src='images/carousel/$image'/></div>";
$firstEchoed = TRUE;
}
}
You can use a boolean flag, or add count param to foreach:
foreach ($carousel as $i => $image)
Related
I'm trying to convert the variable name to all lower case, in an echo statement. For example:
$categories = array('1'=>'Holiday')
foreach ($categories as $categoryId => $category) {
echo "<div class=\"container\"> <a href=\"category.php?categoryId=$categoryId\">
<img src=\"images/categories/strtolower($category).jpg\" alt=\"holiday turkey\" class=\"image\">
<div class=\"overlay\"> <div class=\"text\">$category</div> </div> </a> </div> ";}
I want to convert the variable name to all lowercase, so I can get the picture. I tried just changing the name of the image to Holiday.jpg but I wanted to know if this is possible...
Thank you in advance!
$categories = array('1'=>'Holiday')
foreach ($categories as $categoryId => $category) {
echo "<div class='container'><a href='category.php?categoryId=$categoryId'>
<img src='images/categories/".strtolower($category).".jpg' alt='holiday turkey' class='image'>
<div class='overlay'> <div class='text'>$category</div> </div> </a> </div>";
}
Yes you can do it like this:
foreach ($categories as $categoryId => $category) {
echo "<div class=\"container\"> <a href=\"category.php?categoryId=$categoryId\">
<img src=\"images/categories/" . strtolower($category) . ".jpg\" alt=\"holiday turkey\" class=\"image\">
<div class=\"overlay\"> <div class=\"text\">$category</div> </div> </a> </div> ";
}
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 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>
Can you please take a look at this snippet and let me know why I am outputting the alt attribute in
echo '<img src="'.wp_get_attachment_link($image, 'large').'" alt="Projects" />';
in following snippet:
$images = get_post_meta($post->ID, 'vdw_gallery_id', true);
foreach ($images as $image) {
echo '<div class="col-xs-6 col-md-3">';
echo '<div class="thumbnail">';
echo '<img src="'.wp_get_attachment_link($image, 'large').'" alt="Projects" />';
echo '</div>';
echo '</div>';
}
here is what happening
wp_get_attachment_link returns an html link https://codex.wordpress.org/Function_Reference/wp_get_attachment_link
Use wp_get_attachment_image_src instead https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/
$images = get_post_meta($post->ID, 'vdw_gallery_id', true);
foreach ($images as $image) { ?>
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<?php
$img = wp_get_attachment_image_src($image,'large');
if ($img && isset($img[0])):
?>
<img src="<?php echo $img[0];?>" alt="Projects" />
<?php endif;?>
</div>
</div>
<?php }?>
TRY LIKE THIS
echo "<img src='".wp_get_attachment_image_src($image,'large')."' alt='Projects'/>";
error in this line
echo '<img src="'.wp_get_attachment_link($image, 'large').'" alt="Projects" />';
Your error are due to ' in 'large' change to below
$images = get_post_meta($post->ID, 'vdw_gallery_id', true);
foreach ($images as $image) {?>
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="<?=wp_get_attachment_link($image, 'large')?>" alt="Projects" />
</div>
</div>
<?php }?>
I have to modify the first item of the array, however I failed, but I manage to do a code:
<div class="carousel-inner">
<?php if($results) {
$x= 1;
foreach ($results as $data) { $x++; ?>
<div class="item <?php if($x == 1) { echo 'active';} ?>">
<img alt="" src="<?=base_url('uploads/'.$data->file)?>">
</div>
<?php }
} ?>
</div>
Assuming that I will get these result:
<div class="item active">
<img alt="" src="http://localhost/ideal_visa/uploads/fd5fa6cfbe64c8b68664ddbf0546d81b.jpg">
</div>
<div class="item">
<img alt="" src="http://localhost/ideal_visa/uploads/c43c064de5cb9e751c723eb9791f2107.jpg">
</div>
<div class="item">
<img alt="" src="http://localhost/ideal_visa/uploads/e3137475f6330d52e9cd9c6fc5efba1e.jpg">
</div>
I only have to add active on the first item of the array.
You don't need to do extra $x for this.You can use foreach with key => value and check if it's first index
<?php if($results) {
foreach ($results as $key=>$data) { ?>
<div class="item <?php echo ($key == 0)? 'active':''; ?>">
<img alt="" src="<?=base_url('uploads/'.$data->file)?>">
</div>
<?php }
} ?>
Problem
You have put $x=1 before the foreach, then increment it at the start.
That means when you show the first image, $x==2.
Solution
You can either start with $x=0 or move the line $x++ to the end of the loop:
foreach ($results as $data) { ?>
<div class="item <?php if($x == 1) { echo 'active';} ?>">
<img alt="" src="<?=base_url('uploads/'.$data->file)?>">
</div>
<?php $x++; }
You need to increment $x after the iteration
<?php
if($results) {
$x= 1;
foreach ($results as $data) {?>
<div class="item <?php if($x == 1) { echo 'active';} ?>">
<img alt="" src="<?=base_url('uploads/'.$data->file)?>">
</div>
<?php
$x++;
}
} ?>
<div class="carousel-inner">
<?php if($results) {
$x= 1;
foreach ($results as $data) { ?>
<div class="item <?php if($x == 1) { echo 'active';} ?>">
<img alt="" src="<?=base_url('uploads/'.$data->file)?>">
</div>
<?php $x++; }
} ?>
</div>
you need to increment the x value after the iteration
OR
<div class="carousel-inner">
<?php if($results) {
foreach ($results as $x=>$data) { ?>
<div class="item <?php if($x==0) echo 'active'; ?>">
<img alt="" src="<?=base_url('uploads/'.$data->file)?>">
</div>
<?php }
} ?>
</div>
you can just utilize associative key of the array $data and change the condition to $x==0