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; ?>
Related
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; ?>
I have three separate fields in acf one for each image named slide_one, slide_two and slide_three. Now when I try to get the images to display using the code below nothing is being output. I am doing it this why and not using a loop like you usually as I'm wanting to have a separate text overlay for each image that I will have sliding in separately. This is the first step and it won't work. What an I doing wrong?
<div class="slider">
<ul class="slides">
<?php
$image_one = get_field('slide_one');
if( !empty($image_one ): ?>
<li>
<img src="<?php echo $image_one['url']; ?>" alt="<?php echo $image_one['alt']; ?>" />
</li>
<?php endif; ?>
<?php
$image_two = get_field('slide_two');
if( !empty($image_two ): ?>
<li>
<img src="<?php echo $image_two['url']; ?>" alt="<?php echo $image_two['alt']; ?>" />
</li>
<?php endif; ?>
<?php
$image_three = get_field('slide_three');
if( !empty($image_three ): ?>
<li>
<img src="<?php echo $image_three['url']; ?>" alt="<?php echo $image_three['alt']; ?>" />
</li>
<?php endif; ?>
</ul>
</div>
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; ?>
I am using Advanced Custom Fields to generate a slider for my site. Each of the images (attachments) also have a custom field attached to them using the 'Page Link' option, which allows me to associate a link with each image. The code below is pulling through a link, but it is the same for each image, regardless of which one is displayed in the slider (each image should have a different link)
<section class="slideshow">
<?php
$images = get_field('slideshow');
if( $images ):
?>
<?php foreach( $images as $image ): ?>
<figure>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<figcaption>
<h2><?php echo $image['caption']; ?></h2>
<h4>View Case Study</h4>
</figcaption>
</figure>
<?php endforeach; ?>
<?php endif; ?>
</section>
I have also tried making the url_link field specific to the image as below, but this doesn't pull any information.
<h4>View Case Study</h4>
Many thanks in advance.
It turns out that this isn't the best use of the 'Gallery' custom field. Instead, I've turned to using the 'Repeater' field which can have sub-fields in which I can hold image, caption and link information. Code amended as follows.
<section class="slideshow">
<?php if( have_rows('slideshow_slides') ): ?>
<?php while( have_rows('slideshow_slides') ): the_row();
// vars
$image = get_sub_field('image');
$caption = get_sub_field('caption');
$link = get_sub_field('link');
?>
<figure>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
<figcaption>
<h2><?php echo $caption; ?></h2>
<?php if( $link ): ?>
<h4>View Case Study</h4>
<?php endif; ?>
</figcaption>
</figure>
<?php endwhile; ?>
<?php endif; ?>
</section>
Hi I've been working with Kirby. I'm a complete beginner in PHP but managed to get a lot done. Just need some help with the gallery.
On the homepage a single image is displayed as thumbnail:
<?php foreach($articles as $article): ?>
<li class="<?php foreach(str::split($article->tags()) as $tag): ?><?php echo $tag ?> <?php endforeach ?>">
<?php foreach($article->images() as $image): ?><?php echo thumb($image, array('width' => 300, 'quality' => 70)) ?><?php endforeach ?><p><?php echo html($article->title()) ?></p>
</li>
<?php endforeach ?>
On the article page I'd like to have a gallery.
The gallery snippet:
<?php if($page->hasImages()): ?>
<ul class="gallery">
<?php foreach($page->images() as $image): ?>
<li>
<img src="<?php echo $image->url() ?>" width="<?php echo $image->width() ?>" height="<?php echo $image->height() ?>" alt="<?php echo $image->name() ?>" />
</li>
<?php endforeach ?>
</ul>
<?php endif ?>
Using Kirby, makes me store all the article items in one folder. But if I do this, and use the code mentioned above, all the images from the gallery also show up as thumbnails on the homepage.
I guess the best would be to edit the gallery snippet so it can grab images from a subfolder. But how?
Thank you for your help!
One solution to this is to name the file you wanna have displayed on the front page something like front.jpg. You can then directly access this image with $page->images()->find('front.jpg').
So you get this:
<?php foreach($articles as $article): ?>
<li class="<?php foreach(str::split($article->tags()) as $tag): ?><?php echo $tag ?> <?php endforeach ?>">
<a href="<?php echo $article->url() ?>" title="<?php echo html($article->title()) ?>">
<?php echo thumb($article->images()->find('front.jpg'), array('width' => 300, 'quality' => 70)) ?>
<p><?php echo html($article->title()) ?></p>
</a>
</li>
<?php endforeach ?>
(Note, that you have to remove the inner foreach-loop, because you're only displaying one image.)
The gallery snippet stays the same.
Here try:
<?php foreach($page->image()->yaml() as $image): ?>
<?php if($img = $page->image($image)): ?>
<img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" width="100%" height="100%" />
<?php endif ?>
<?php endforeach ?>