I am using Advanced Custom Fields gallery in a custom post type;
I have managed to display images (thumbnails) added to the gallery using the following code
$images = get_field('gallery'); if( $images ): $images = explode(',', $images); $images = array_filter($images); if( count($images)):
?>
<ul>
<?php foreach( $images as $image ): $alt = get_the_title($image); $url = ```this is where I'm stuck``` ?>
<li>
<a href="<?php echo $url; ?>" title="<?php echo $alt; ?>">
<?php echo wp_get_attachment_image($image, "thumbnail", false, ['alt' => $alt]); ?>
</a>
</li>
<?php endforeach; endif; ?>
</ul>
<?php endif; ?>
How can I get urls of the images?
I have tried
<?php echo $image['url']; ?>
but it didn't work
Install this plugin: https://wordpress.org/plugins/lightbox-photoswipe/
Use Code below:
$images = get_field('gallery');
if( $images ):
$images = explode(',', $images);
$images = array_filter($images);
if( count($images)): ?>
<ul>
<?php foreach( $images as $image ):
$alt = get_the_title($image);
$imageUrlFull = wp_get_attachment_image_url( $image, 'full' ) ?>
<li>
<a href="<?php echo $imageUrlFull ?>" title="<?php echo $alt; ?>">
<?php echo wp_get_attachment_image($image, "thumbnail", false, ['alt' => $alt]); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<?php endif; ?>
Other guys also gave good tips hovewer if u like lightbox it depends from js what attributes or classes are used to create lightbox. Cheers.
First, you should make sure your custom field return value is set to "Image Array". This is a common mistake. If that is set correctly, you should be able to do the following. I assume if you're using a lightbox solution of some kind, you may need to add a class to your <a> tag. Either way, this should display the images successfully:
<?php
$images = get_field('gallery');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<a href="<?php echo $image['url']; ?>" title="<?php echo $image['alt']; ?>" >
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
Should be pretty straight forward. You get it the same way you got the thumbnail image.
Resource:
https://www.advancedcustomfields.com/resources/gallery/
<?php
$images = get_field('gallery');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $images ): ?>
<ul>
<?php
foreach( $images as $image_id ):
echo '<li data-lightbox="' . wp_get_attachment_image_src($image_id, 'full'). '">';
echo '<img src="' . wp_get_attachment_image_src( $image_id, 'thumb' ) . '">';
echo '</li>';
endforeach;
?>
</ul>
<?php endif; ?>
Related
I have some ACF(advanced Custom Fields) image values that I display in an include file outside of the main loop. The ACF image is stored as an array, so I would like to display the array values, for example URL, alt tag, size , ect..
This is my code
<?php
global $wp_query;
$postid = $wp_query->post->ID;
$callout_image = get_post_meta($postid, 'callout_image', true);
wp_reset_query();
?>
<?php if( !empty( $callout_image ) ): ?>
<img src="<?php echo esc_url($callout_image['url']); ?>" alt="<?php echo esc_attr($callout_image['alt']); ?>" />
<?php endif; ?>
the error is
Warning: Illegal string offset 'url' in
What am I doing wrong?
UPDATE: Fixed code
<?php
global $wp_query;
$postid = $wp_query->post->ID;
$callout_image = get_field('callout_image', $postid);
wp_reset_query();
?>
<?php if( !empty( $callout_image ) ): ?>
<img src="<?php echo esc_url($callout_image['url']); ?>" alt="<?php echo esc_attr($callout_image['alt']); ?>" />
<?php endif; ?>
https://www.advancedcustomfields.com/resources/image/
<?php
$image = get_field('image');
if( $image ):
// Image variables.
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
$caption = $image['caption'];
// Thumbnail size attributes.
$size = 'thumbnail';
$thumb = $image['sizes'][ $size ];
$width = $image['sizes'][ $size . '-width' ];
$height = $image['sizes'][ $size . '-height' ];
// Begin caption wrap.
if( $caption ): ?>
<div class="wp-caption">
<?php endif; ?>
<a href="<?php echo esc_url($url); ?>" title="<?php echo esc_attr($title); ?>">
<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
</a>
<?php
// End caption wrap.
if( $caption ): ?>
<p class="wp-caption-text"><?php echo esc_html($caption); ?></p>
</div>
<?php endif; ?>
<?php endif; ?>
I'm using Advanced Custom Fields to create an image gallery. At the moment I have the image size set to thumbnail I tried setting it to medium but it didn't work so I don't know if I'm missing something. But I would like to create my own image size anyway. So how would I do this? I was looking on the ACF site but it seems to have gone down.
<div class="container">
<div class="row">
<div class="col-md-12">
<?php
$image_ids = get_field('gallery', false, false);
$shortcode = '[gallery ids="' . implode(',', $image_ids) . '"]';
echo do_shortcode( $shortcode );
?>
<?php
$images = get_field('gallery');
if( $images ): ?>
<ul>
<?php foreach( $images as $gallery_images ): ?>
<li>
<a href="<?php echo $gallery_images['url']; ?>">
<img src="<?php echo $gallery_images['sizes']['thumb-nail']; ?>" alt="<?php echo $gallery_images['alt']; ?>" />
</a>
<p><?php echo $gallery_images['caption']; ?></p>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
</div>
</div>
Generally, thumbnail is written 'thumbnail' and not thumb-nail. Maybe this is it ?
Also, to create a custom image size in Wordpress, you need to add it to your functions.php file. Something like add_image_size( 'my-new-size', 220, 180, true );
see https://developer.wordpress.org/reference/functions/add_image_size/
<?php
$images = get_field('immagine');
if( $images ): ?>
<?php foreach( $images as $image ): ?>
<li><img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>"></li>
<?php endforeach; ?>
<?php endif; ?>
The code to generate a list of most read articles on my Joomla website AND display their intro images is as follows:
<ul class="mostread<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<?php $images = json_decode($item->images); ?>
<?php if( $images->image_intro ) : ?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php endif; ?>
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
</li>
<?php endforeach; ?>
</ul>
Having little to no experience with PHP, what do i need to do to this code to make it display only the first item's image instead of for all of them?
#hek-mat was close, but the OP was trying to stop the image on the other posts from displaying, not the link and title.
<?php
// track if we've seen an image yet or not
$seen_first = false;
foreach ( $list as $item ) :
$images = json_decode( $item->images );
// OP only wants posts with image_intros
if ( $images->image_intro ) :
// OP only wants to see the first item's image
if ( ! $seen_first ) :
?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars( $item->title ); ?>" />
<?php
// don't show another image
$seen_first = true;
// end "if first not seen yet"
endif;
// show the article (for all)
?>
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name"><?php echo $item->title; ?></span>
</a>
</li>
<?php
// end "if image_intro"
endif;
endforeach;
?>
Try like this..
Set a variable $first = true; after displaying first item set it to false.
<ul class="mostread<?php echo $moduleclass_sfx; ?>">
<?php
$first = true;//initially set true
foreach ($list as $item) : ?>
<?php $images = json_decode($item->images); ?>
if($first==true){ ?> //checks $first is true if true prints
<?php if( $images->image_intro ) : ?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php endif;
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
</li>
<?php
}
$first = false;//after printing first item set it false
endforeach; ?>
</ul>
To display only first item image you have do it like below.
<?php
$first = true;//initially set true
foreach ($list as $item) :
$images = json_decode($item->images);
if($first==true):
if( $images->image_intro ) : ?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php
endif;
endif;
$first = false;
?>
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
</li>
<?php endforeach; ?>
Rather than modifying the PHP, it is probably easier to add some CSS to a custom CSS file like this:
ul.mostread img {display: none;}
ul.mostread img:first-of-type {display: block;}
so that only the first image is displayed.
See https://joomla.stackexchange.com/a/3878/120 for instructions on how to create a custom CSS file in Joomla.
A custom CSS file also has the advantage that it won't be overwitten by any future Joomla or template updates.
How would I go about adding an ALT tag for these images? Would I have to add the
$alt = get_post_meta(get_post_thumbnail_id($post->ID), '_wp_attachment_image_alt', true);
to the array, and then add the <?php echo $alt; ?> when displaying the image?
<?php /* 2 IMAGES DIVIDER */ ?>
<?php if($divider_type == 'images'): ?>
<section class='divider content gallery'>
<?php
$images = array();
foreach($section['images'] as $image_id => $image_url)
{
$image = wp_get_attachment_image_src($image_id, '900w');
$image_details = get_post($image_id);
$images[] = array('img_url'=>$image[0],'caption'=>$image_details->post_excerpt);
}
?>
<div class='gallery-half'>
<figure>
<img src='<?php echo $images[0]['img_url']; ?>'>
<?php if($images[0]['caption'] != ''): ?>
<figcaption><?php echo $images[0]['caption']; ?></figcaption>
<?php endif; ?>
</figure>
</div><!--
--><div class='gallery-half'>
<img src='<?php echo $images[1]['img_url']; ?>'>
</div>
</section>
<?php endif; ?>
Thank you in advance.
Why not use wp_get_attachment_image()? This handles the alt tag for you.
<?php /* 2 IMAGES DIVIDER */ ?>
<?php if ( $divider_type == 'images' ) : ?>
<section class='divider content gallery'>
<?php
$images = array();
foreach ( $section['images'] as $image_id => $image_url ) : ?>
<?php $image_details = get_post( $image_id ); ?>
<div class='gallery-half'>
<figure>
<?php echo wp_get_attachment_image( $image_id, '900w' ); ?>
<?php if ( $image_details->post_excerpt ) : ?>
<figcaption><?php echo $image_details->post_excerpt; ?></figcaption>
<?php endif; ?>
</figure>
</div>
<?php endif; ?>
</section>
<?php endif; ?>
I modified the snippet slightly so it will loop through all the images in your $section['images'] and output the in a .gallery-half div with the figure element and caption if there is one.
You can use wp_get_attachment_image too, which will get you the img html tag with the alt attribute. However, you were right, if you want to get the value yourself, you have to use get_post_meta. Actually the wp_get_attachment_image function does the same to access that data.
$default_attr = array(
'src' => $src,
'class' => "attachment-$size_class size-$size_class",
'alt' => trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )), // Use Alt field first
);
I am trying to add a class to an image slider, i managed to add it to the img tag and it is working but it is not working when there are several images to the gallery, meaning the class 'zoooom' is effective only on the first image of the slider. Below is the for each code. How can I apply the class to each image of the slides? I guess I have to loop through using $image like class="" but where should i add "zoooom" then? None of the code I have been trying worked, I don't know PHP and have to fix this bug, any help would be appreciated, Thanks!
<ul class="product-slider">
<?php
if( $images ): ?>
<?php foreach( $images as $image ): ?>
<li>
<img class="zoooom" src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" style="max-width:80%;"/>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
you need to change your class using loop this code generate new class zoom1,zoom2,zoom3....
Try this
<ul class="product-slider">
<?php $i =1;
if( $images ): ?>
<?php foreach( $images as $image ): ?>
<li>
<img class="zoooom<?php echo $i; ?>" src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" style="max-width:80%;"/>
</li>
<?php $i++; endforeach; ?>
<?php endif; ?>