I have an array that displays images. I want to make each image clickable to display that specific image larger on an overlaying div.
Each image is displayed and has a different id which is being generated with this code:
<?php if (count($images) > 0) : ?>
<?php $i = 0; ?>
<?php foreach($images as $image) : ?>
<div class=" item" onclick="showOverlay()" id="<?= $i; ?>"><img class="photo" src="<?= $image; ?>"></div>
<?php $i++; ?>
<?php endforeach; ?>
The image in the overlaying div must now use the id value to determine which array item (image) to display.
This is my code that does not work.
<div class="overlay">
<?php
$dirname = "img/photos/$student/$entry/*.JPG";
$images = glob($dirname);
?>
<img src="<?= $images[$_POST['id']]; ?>">
Related
I want to make one image active each when it is selected, but right now all items are active
<?php foreach($project_images as $image) {?>
<?php
if($image['project_image_name'] != '') {
$images = '<img src="'.base_url().'public/uploads/project_images/'.$image['project_category'].'/'.$image['project_id'].'/'.$image['project_image_name'].'" >';
} else {
$images = '<img src="'.base_url().'public/uploads/project_images/default/default-project-image.jpg'.'" ';
}
?>
<div class="carousel-item active">
<?php echo $images; ?>
</div>
<?php }?>
This sounds like a job for JavaScript, not PHP.
I'm assuming PHP doesn't know if the image is active or not, it just displays the image.
I'm assuming you want the image to be active when it's clicked. That's JavaScript.
Step 1: Don't make anything active.
Remove 'active' from the div.
<div class="carousel-item">
<?php echo $images; ?>
</div>
Step 2: Give each div a unique identifier so JavaScript knows what element you're referring to.
<?php
$id = 0;
foreach($project_images as $image) {
$id++;
?>
<?php
// .. code is the same
?>
<div id="carousel_<?php echo $id ?>" class="carousel-item">
<?php echo $images; ?>
</div>
<?php }?>
That should give each div a unique id.
Step 3: Create a JavaScript function that will toggle the 'active' class of the selected item.
Ex:
function ToggleClass(elemID){
// Get selected element
selElement = document.getElementById(elemID);
//Use selElement to change class. Code goes here
}
Step 4: Add the JavaScript function to the div.
Note the quotes -- use the double and singles as needed.
Ex:
<div id="carousel_<?php echo $id ?>" class="carousel-item active" onclick="ToggleClass('carousel_<?php echo $id ?>')">
<?php echo $images; ?>
</div>
Hope you're well.
I have got the below code working as intended, but is there a way of ONLY showing the div 'listinggallery' if there are images returned?
At the moment, it works great if there are images in the listing, but if there are no images, then I have an empty styled div showing. Ideally I want create a rule to say "IF listingimage 'true' then show 'listinggallery'".
I have tried placing the 'listinggallery' div elsewhere within the code but just seems to crash my site, so hoping I can create a rule?
Kind regards,
Spencer
<div class="listinggallery">
<?php
//Get the images ids from the post_metadata
$images = acf_photo_gallery('gallery', $post->ID);
//Check if return array has anything in it
if( count($images) ):
//Cool, we got some data so now let's loop over it
foreach($images as $image):
$id = $image['id']; // The attachment id of the media
$full_image_url= $image['full_image_url']; //Full size image url
$full_image_url = acf_photo_gallery_resize_image($full_image_url, 1024, 768); //Resized size to 262px width by 160px height image url
$thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
$url= $image['url']; //Goto any link when clicked
$target= $image['target']; //Open normal or new tab
$alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
$class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
?>
<div class="listingimage">
<div class="thumbnail">
<?php if( !empty($url) ){ ?><a href="<?php echo $url; ?>" <?php echo ($target == 'true' )? 'target="_blank"': ''; ?>><?php } ?>
<a href="<?php echo $full_image_url; ?>" class="fancybox">
<img src="<?php echo $thumbnail_image_url; ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>">
</a>
<?php if( !empty($url) ){ ?></a><?php } ?>
</div>
</div>
<?php endforeach; endif; ?>
</div>
If you move the creation of the <div> inside the block which decides if there is anything to display...
<?php
$images = acf_photo_gallery('gallery', $post->ID);
//Check if return array has anything in it
if( count($images) ):
// Output start of gallery div
?>
<div class="listinggallery">
<?php
//Cool, we got some data so now let's loop over it
foreach($images as $image):
// rest of code as it currently is
endforeach;
// Close of gallery div
?>
</div>
<?php
endif;
?>
I try to add images in a columns using Advanced Custom Fields but the images doesn't display. But it displays the url of the images.
<div class="container">
<?php if( have_rows('columns-1-services') ): ?>
<div class="row">
<?php while(have_rows('columns-1-services')):the_row(); {
$image_1 = get_sub_field("images-1");
$image_2 = get_sub_field("images-2");
$image_3 = get_sub_field("images-3");
$image_4 = get_sub_field("images-4");
} ?>
<div class="col-md-3 services"><?php echo "$image_1"; ?></div>
<div class="col-md-3 services"><?php echo "$image_2"; ?></div>
<div class="col-md-3 services"><?php echo "$image_3"; ?></div>
<div class="col-md-3 services"><?php echo "$image_4"; ?></div>
<?php endwhile; ?>
</div>
<?php
else :
// no rows found
endif;?>
</div>
As LucasNesk has said, the get_sub_field("image") function is returning a url rather than a full img tag.
Rather than using the url in a tag, I would recommend changing the field in settings to return the ID, and then using WordPress functions to output the image tag. That way you can easily use a thumbnail size and WP handles a responsive srcset for you.
From https://www.advancedcustomfields.com/resources/image/#template-usage
<?php
$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
?>
It happens because you are rendering the image URL directly into the HTML page.
Try to put it in a Image tag at the src attribute, like:
<div class="col-md-3 services">
<img src="<?php echo $image_1; ?>">
</div>
This will render your URL in the source attribute and load your image properly.
References of img tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
I am trying to display images on my web page, the content is getting fetched from my database, but the issue I'm facing is in displaying the image. please, can anyone guide me how should I display the image?
I mean to say the path what I should give
here 'image' is my column name and this is my view
<?php
if( !empty($results) ) {
foreach($results as $row) {?>
<div class="col-sm-4">
<img src="<?php echo base_url('uploads/');$image?>" alt="">
<h3><?php echo $row->title; ?></h3>
<p><?php echo $row->content; ?></p>
</div>
<?php
} ?>
<?php }
?>
Hope this will help you :
Use this : <img src="<?php echo base_url('uploads/'.$row->image);?>" alt="">
The whole code should be like this :
<?php
if( !empty($results) ) {
foreach($results as $row) {?>
<div class="col-sm-4">
<img src="<?php echo base_url('uploads/'.$row->image);?>" alt="">
<h3><?php echo $row->title; ?></h3>
<p><?php echo $row->content; ?></p>
</div>
<?php
} ?>
<?php }
?>
If $image is the column name(which contains image name) then Replace
<img src="<?php echo base_url('uploads/');$image?>" alt="">
with
<img src="<?php echo base_url();?>uploads/<?php echo $row->image;?>" alt="">
If $image has image path then remove ';' and add '.' on echo base_url('uploads/');$image?> line
You issue here is the following code;
<?php echo base_url('uploads/');$image?>
This is because you are not concatenating the string, rather, just saying it's variable name, so, use of the following will provide the output;
<?php echo base_url('uploads/') . $image' ?>
This replaces the semi-colon part way through for a period (.) which is the PHP concatenation operator
Obviously, there is the issue you are not setting $image, which would require (before usage) of;
$image = $row['image_column_name'];
// Or
$image = $row->img_column_name
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>