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; ?>
Related
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?
What is the best method to replace the image in the footer for WordPress given the following code in the footer.php in WordPress? I would like to have a different image from the "main_logo". Keep in mind I have uploaded the image to the Media section of WordPress, and it has provided me with the URL for that image.
<?php if (!function_exists('dynamic_sidebar') ||
!dynamic_sidebar('Bottom 1')) : ?><?php endif; ?>
<?php
$logo = $data['main_logo'];
$disable_footer_logo = $data['disable_footer_logo'];
?>
<?php if($disable_footer_logo!="Yes") : ?>
<?php
if($logo!=""){
$img_url = $logo;
}else{
$img_url = get_template_directory_uri().'/images/logo2.png';
}
?>
<img src="<?php echo $img_url; ?>" alt="" class="img-left" />
<?php endif; ?>
replace $logo = $data['main_logo']; with $logo = get_template_directory_uri().'/images/your_image.png', Assuming your image is located in images folder.
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.
I'm attempting to add a background video to a wordpress website in place of the large image that is currently there.
I understand how to set up the video with HTML5 and CSS, but am not very familiar with php and am kind of lost on where to begin when it comes to writing a function to pull the video/s (wmp and mp4) from the media library and display them.
Any guidance on how to go about this would be much appreciated. Thanks!
I know that this is the part of the code that needs to be modified:
<div class="intro-block">
<?php if ( has_post_thumbnail() ):?>
<?php the_post_thumbnail('full'); ?>
<?php else: ?>
<?php
$image = get_field('global_intro_image', 'option');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" >
<?php endif; ?>
<?php endif; ?>
<div class="text-holder">
<div class="container">
<?php if( $title = get_field( 'title' )) : ?>
<h1><?php echo $title; ?></h1>
<?php endif; ?>
<?php if( $find_btn_link = get_field( 'find_btn_link' )) : ?>
<?php echo get_field( 'find_btn_text' ); ?>
<?php endif; ?>
</div>
</div>
</div>
It currently pulls the featured image for the page and displays it.
Any suggestions on where to begin?
Thanks in advance!
First you need to find out which part is calling the image. Looks like this part:
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" >
<?php endif; ?>
Then comment out this part or just remove this part of the code and replace if with video tag and style it so it looks just as you need.
Then if you need to be able to indicate videos from wordpress back end, than you need to create options page / or only add fields if you have theme options page.
https://codex.wordpress.org/Creating_Options_Pages
Even easier is to create options pages with ACF pro