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;
?>
Related
I have a wordpress project that is using ACF fields to pass images/video into a carousel. How would I get the alt text for the associated image?
I have tried to get_field('image') and various get_sub_field() calls, but image does not seem to be a field even though get_sub_field('still_image_url') and get_sub_field('image_link') are already pulling in the respective data for those fields.
I'm not even sure how to get the id for the image. Another php file is using the_ID();, but that is not working here.
<?php while (have_rows('top_slider')) : the_row(); ?>
<?php
$video_url = get_sub_field('video_url');
$video_url_responsive = get_sub_field('video_url_responsive');
$video_link = get_sub_field('video_link');
$image_url = get_sub_field('still_image_url');
$image_link = get_sub_field('image_link');
$has_target = strpos($image_link, '/') !== 0;
?>
Make sure you are using the return format of the Image either as IMAGE ARRAY or IMAGE ID.
Use the below code to get the ALT tag of the image if the return format is IMAGE ARRAY.
<?php
$image =get_sub_field('image');
if( !empty($image )): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
Use the below code to get the ALT tag of the image if the return format is IMAGE ID.
$image_id = get_sub_field('image');
$img_url = wp_get_attachment_image_src($image_id, 'full');
$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', TRUE);
$image_title = get_the_title($image_id);
?>
<img src="<?php echo $img_url[0]; ?>" width="<?php echo $img_url[1]; ?>" height="<?php echo $img_url[2]; ?>" alt="<?php echo $image_alt; ?>" title="<?php echo $image_title; ?>">
Here the "image" denotes the field name which you set while creating the field.
get_sub_field('image');
Refer the image for understanding about Field Name, Return Format etc
You can see the image id and other details on the REST API if you will set the options to show on REST API.
After adding the contents to WP REST API, you can display the pages' content on the WP REST API as you can use this example link:
https://write-your-site-url-here/wp-json/wp/v2/pages
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>
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 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']]; ?>">
I did not use attachment to upload image in wp post,
I use external host like dropbox, how to get it to my frontpage by specific post-type ?
example
<img src="https://www.dropbox.com/s/drgdrfhdtj.jpg?raw=1" alt="" width="506" height="673" />
<img src="https://www.dropbox.com/s/djtfdtjdtmjx.jpg?raw=1" alt="" width="506" height="714" />
how to get all this image ?
my code in function.php
function gallery (){
$pid = get_the_ID();
$post = get_post( $pid );
$content = $post->post_content;
$regex = '/src="([^"]*)"/';
preg_match_all( $regex, $content, $matches );
foreach($matches as $image):
echo '<img src="'.$image.'" alt="'.$post->post_title.'" title="'.$post->post_title.'">' ;
endforeach;
}
my code in content-gallery.php
<?php $post_format = get_post_format(); ?>
<?php if ( $post_format == 'gallery' ) : ?>
<div class="featured-media">
<?php gallery(); ?>
</div> <!-- /featured-media -->
<?php endif; ?>
but this do not work
edit:
work used image[1] (#master djon answer)
now problem is
output:
<img src="https://www.dropbox.com/s/image1.jpg""><img https://www.dropbox.com/s/image1.jpg">
double output one image <img src= and <img https://
how fix this ?
$image is an array of all groups contained in found match. Index zero is the whole matching (src="URL"), and index 1 is what you search for : the URL.
So you shall you $image[1] instead of $image.