I'm having trouble displaying multiple files (.pdf, .docx, .xlsx etc.) on WordPress Post using ACF File field type with enabled "Allow multiple files" on Advanced Custom Fields Extended PRO.
Here is the code that does not work:
<?php
$file = get_field('documents');
if( $file ):
// Extract variables.
$url = $file['url'];
$title = $file['title'];
$caption = $file['caption'];
$icon = $file['icon'];
// Display image thumbnail when possible.
if( $file['type'] == 'image' ) {
$icon = $file['sizes']['thumbnail'];
}
// Begin caption wrap.
if( $caption ): ?>
<div class="wp-caption">
<?php endif; ?>
<a href="<?php echo esc_attr($url); ?>" title="<?php echo esc_attr($title); ?>">
<img src="<?php echo esc_attr($icon); ?>" />
<span><?php echo esc_html($title); ?></span>
</a>
<?php
// End caption wrap.
if( $caption ): ?>
<p class="wp-caption-text"><?php echo esc_html($caption); ?></p>
</div>
<?php endif; ?>
<?php endif; ?>
Anyone can help me on how to display attached files on particular post?
Related
So I'm using ACF Image: https://www.advancedcustomfields.com/resources/image/, and outputting my image and caption as an Array.
I'd like to be able to add links within my captions e.g. '', but when I do this it literally outputs the code rather than turning the text into a link.
Is there a way to make it be a link rather than just outputting the HTML as text.
This is my code for my image:
<?php
$image = get_sub_field('image'); if( $image ):
// Image variables.
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
$caption = $image['caption'];
?>
<img class="img-fluid" src="<?php echo esc_url($url); ?>" alt="<?php echo esc_attr($alt); ?>" />
<?php if( $caption ): ?>
<p class="caption"><?php echo esc_html($caption); ?></p>
<?php endif; ?>
<?php endif; ?>
But when I add this to the caption box within Wordpress: This image is from Flickr.
It literally outputs the same as above rather than turning the word into a link.
As you can see above I had the code:
<?php echo esc_html($caption); ?>
When I removed the 'esc_html' part then I was able to add links within the caption area. So the code for the Caption was this instead:
<?php if( $caption ): ?>
<p class="caption"><?php echo ($caption); ?></p>
<?php endif; ?>
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'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>
In an article I want to have the link of the previous article, including the title of the article and a ACF custom image.
I now how to make the link of the previous title project :
<?php
$prev_post = get_previous_post();
if (!empty( $prev_post )): ?>
<a href="<?php echo $prev_post->guid ?>">
<?php echo $prev_post->post_title ?>
</a>
<?php endif ?>
Here's my ACF code for the current image :
<?php
$image = get_field('image_cover');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
But how to do the same thing (get_previous_link) for my ACF image ?
You can use
$image = get_field('image_cover', $prev_post->ID);
This will get the custom field image_cover from the previous post using the ID supplied by the previous post object.