I am trying to display an image caption for a wordpress Advanced Custom Fields (ACF) repeater field, and haven't had any luck with the follow three options:
<?php if($middle_image['image']): ?>
<?php $midimage = wp_get_attachment_image_src($middle_image['image']); ?>
<?php $caption = $midimage->post_excerpt; ?>
<?php $captiontwo = $middle_image['image']['caption'] ?>
<?php $captionthree = $middle_image['image']->post_excerpt; ?>
<?php $alt = get_post_meta($middle_image['image'], '_wp_attachment_image_alt', true); ?>
<?php $main_image = wp_get_attachment_image_src($middle_image['image'], 'two-column-cropped' ); ?>
<div class="two-column-cropped"><img src="<?php echo $main_image[0]; ?>" alt="<?php echo $alt ?>" />
<?php if($caption) { ?>
<div class="image_caption"><?php echo $caption; ?></div>
<?php } ?>
</div>
<?php endif; ?>
Any suggestions would be appreciated. Thanks.
wp_get_attachment_src() does not fetch any data about an image besides the URL, height and width. You might want wp_get_attachment_metadata() however I think you would be better off changing your ACF field to return an Image Object (actually an array) instead of the Image ID (as I assume you have it now).
ACF can return any of three things for an image field: The image src URL, the Attachment ID (which can be passed to functions such as wp_get_attachment_image_src()), or the attachment information as an array.
You can check that you are receiving the correct response from ACF by using var_dump($middle_image) or var_dump($midimage)
I assume that $middle_image is your repeater field.
As long as ACF is configured correctly to return the image object (instead of the image URL or ID), you can simply remove this line:
<?php $midimage = wp_get_attachment_image_src($middle_image['image']); ?>
and then access the image caption using $middle_image['image']['caption']
Related
I am looking to add Alt text to slider images. I was able to add the line:
alt ="<?= $alt = get_post_meta(get_post_thumbnail_id($post->ID), '_wp_attachment_image_alt', true); ?>"
This line pulled in the alt text for the photos but it is the same alt text for all the photos within the slider. It doesn't seem to loop each alt text to each photo. Below is the code that pulls the images.
<?php $_gallery = get_field('project_gallery_photos'); ?>
<?php if( $_gallery ) { ?>
<div class="_featured-images">
<div class="_slider">
<?php foreach( $_gallery as $_img ): ?>
<div class="_slide">
<img src="<?= $_img['photo']['sizes']['project-images']?>" alt ="<?= $alt = get_post_meta(get_post_thumbnail_id($post->ID), '_wp_attachment_image_alt', true); ?>"/>
<?php if( $_img['photo_title'] || $_img['photo_caption'] ) { ?>
<div class="_caption">
<?= $_img['photo_title']? '<b>'.$_img['photo_title'].'</b><br>': '' ?>
<?= $_img['photo_caption'] ?>
</div>
<?php } ?>
</div>
<?php endforeach; ?>
</div>
What you're pulling in as the meta description for the "featured image" of the current global $post, which the gallery photos appear to be Advanced Custom Field for.
What you should be pulling in instead would be one of those settings from the foreach() loop. If you're using the standard ACF Pro Gallery field, the alt attribute is included at the first level of the array.
alt="<?= esc_attr( $_img['alt'] ); ?>"
Otherwise, you should be able to use print_r( $_img ); to find the attribute you need, for instance if your $_img contains a 'photo' key, you may need to use:
alt="<?= esc_attr( $_img['photo']['alt'] ); ?>"
Documentation & Function Reference
Function
Linked Description
foreach()
The foreach construct provides an easy way to iterate over arrays. foreach works only on arrays and objects, and will issue an error when you try to use it on a variable with a different data type or an uninitialized variable. There are two syntaxes:
print_r()
Prints human-readable information about a variable
esc_attr()
Escaping for HTML attributes
ACF Gallery
The Gallery field provides an interactive interface for managing a collection of attachments.
I'm using Owl Carousel to create a carousel gallery of logos. I'm using Advanced Custom Field's repeater feature to grab all of the urls of the logos. Here's the markup for the gallery:
<div id="clients">
<?php
$clients = get_field('client_carousel');
$client_logo = get_field('client_logo');
if( $clients ) {
?>
<section>
<div id="owl-clients" class="owl-theme owl-carousel">
<?php foreach( $clients as $client_logo ): ?>
<div class="item">
<img class="featurette-image img-responsive center-block" src="<?php echo $client_logo['url']; ?>" alt="<?php echo $client_logo['alt']; ?>"></div>
<?php endforeach; ?>
</div>
</section>
<?php } ?>
</div><!--end clients-->
The repeater field name is client_carousel and the field name of the field within it is client_logo.
I have a working demo here. It recognizes the seven logos in the group, but the only thing I can't get is the url for the img src.
Couple things to note. You're overriding the $client_logo variable, so not sure if that was just an abandoned artifact in the code since it doesn't look like you use it anyhow:
$client_logo = get_field('client_logo');
<?php foreach( $clients as $client_logo ): ?>
Other thing is ACF repeater field allows you to choose the output of the field type "image" - assuming that's what you set for the "url" field. Now, suppose you set "url" as an image, you can then select the output as Image URL instead of the default Image Array if you want the raw URL returned.
Supposing that's how you set it, then it should give you the image url without having ot modify your code:
<?php echo $client_logo['url']; ?>
However, we don't know the architecture of your repeating field and without that knowledge we wouldn't be able to advise further. Update your post and I can update this answer if this info doesn't point you in the right direction.
I am trying to achieve the below image:
Basically, I have set up ACF Gallery, and used the code below:
<?php $images = get_field('gallery'); if( $images ): ?> <!-- This is the gallery filed slug -->
<?php foreach( $images as $image ): ?> <!-- This is your image loop -->
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> <!-- Image Code -->
<?php endforeach; ?> <!-- This is where the image loop ends -->
<?php endif; ?> <!-- This is where the gallery loop ends -->
Which now lists all the images in the gallery. What I am looking for, is the first image to be full size, and the other 3 images to be thumbnails, like the image, which when clicked, change the full size image.
Anyone have any ideas?
EDIT:
Im open to another way of doing this
Normally I wouldn't post all of this, as it would require creating a lot of stuff, but luckily I just made something similar for work yesterday.
<?php $galleryImages = get_field('gallery'); ?>
<div id="largeGalleryImage">
<img src="<?php echo $galleryImages[0]['sizes']['gallery-full']; ?>" id="galleryImageLarge" />
</div>
<div id="galleryThumbs">
<?php $i = 0;
foreach($galleryImages as $galleryThumb){
$i++;
if($i==1){
$imgClass = 'active';
}else{
$imgClass = '';
}
echo '<img src="'.$galleryThumb['sizes']['gallery-thumb'].'" class="imageThumb imageNum'.$i.' '.$imgClass.'" picURL="'.$galleryThumb['sizes']['gallery-full'].'" />';
} ?>
</div>
<script type="text/javascript">
//Setup Gallery Clicks
$("#galleryThumbs .imageThumb").click(function () {
if ($(this).hasClass('active')) {
//do nothing
} else {
var newImage = $(this).attr('picURL');
$('#galleryImageLarge').attr('src', newImage);
$("#galleryThumbs .imageThumb").removeClass('active');
$(this).addClass('active');
}
});
</script>
In this example, "gallery-full" is a set custom image size for the large photo, and "gallery-thumb" is a set custom image size for my thumbnails.
The thumbnails have an attribute applied to them, called "picURL" and it houses the URL of the large image. The large image is auto-filled with the URL of the first image. Then, using jQuery, when a thumb is clicked, it changes the src value of the large image with the value of the thumbnail's "picURL".
It also gives the current thumbnail an "active" class, to allow for styling your current thumb.
I'm trying to give a client some options in the WP backend to customize a carousel that is displayed on their website's homepage. I am using Advanced Custom Fields to handle getting the input from the client. I want to give them two options:
Option #1) Allows the client to insert a string of text to be displayed ('carousel_title_text')
Option #2) Allows the client to upload a logo to be displayed ('carousel_logo')
I want the code to check for title text, and if there is none, display the logo instead. I haven't yet decided what will happen if both fields are empty. Anyway, here is what I've come up with:
<?
if( get_field('carousel_title_text') ) { ?>
<h2 class="promo"><?php the_field('carousel_title_text');?></h2>
<? } elseif( get_field('carousel_logo') ) {
the_field('carousel_logo');
}
?>
The 'carousel_title_text' displays as long as there is an input, but when it's empty and 'carousel_logo' is not, it does not properly output the logo. Can anyone tell me what I'm doing wrong or if there's a better approach?
Thanks in advance,
If I get it right, your problem is not with the If/Else statement but with the logo field. I assume you properly configured this field (carousel_logo) as Image in ACF.
Image fields offer three different Return Value possibilities:
Note: In some versions of ACF you'll found Image Object instead of Image Array, but it's conceptually the same.
None of them will show your image properly if you just use the_field('carousel_logo'); in your template. So, how do you get your logo?
If you want the easiest solution, choose Image URL as Return Value for your logo field and print it like that:
<?
$title = get_field('carousel_title_text');
$logo = get_field('carousel_logo');
if (!empty($title)) : ?>
<h2 class="promo"><?= $title ?></h2>
<?php elseif (!empty($logo)) : ?>
<img class="logo" src="<?= $logo ?>">
<?php else: ?>
<!-- No title, no logo -->
<?php endif ?>
I've changed a little your code, but basically the key line here is:
<img class="logo" src="<?= $logo ?>">
This, or the equivalent:
<img class="logo" src="<?php echo $logo ?>">
should show your image when the title is missing.
Bonus: If you're handling different thumbnail sizes I'd recommend you to use Image Array as Return Value. In that case, $logo would be an Array containing all information (such as sizes, all thumbnail URLs, captions, etc.)
Use:
<img class="logo" src="<?= $logo['sizes']['medium'] ?>">
where 'medium' is your thumbnail size label to output it.
Also, please check official docs on ACF's Image field type for more examples and further explanations.
You have put else condition on last, that will default text will show if client will not Enter text ot logo.
you will used bellow code.
<?php
if( get_field('carousel_title_text') ) { ?>
<h2 class="promo"><?php the_field('carousel_title_text');?></h2>
<?php } elseif( get_field('carousel_logo') ) {
the_field('carousel_logo');
}else {
echo " <h2 class="promo"> Default slider title </h2>"
}?>
it's default title client indicate to he has not entered slider text
Hope it's work for you.
Try:
<?php
$output = (get_field('carousel_title_text')) ? get_field('carousel_title_text'):get_field('carousel_logo');
echo $output;
?>
This sounds like it's to do with the settings for the logo, which I'm assuming is an image field? In the Wordpress admin there will be a setting under that field called 'Return value' which can be set to either 'Array' or 'URL'.
If this is set to 'Array', you'd need to store that array to a variable and then access its properties in your markup like so:
<?php
if ( get_field('carousel_title_text') ) { ?>
<h2 class="promo"><?php the_field('carousel_title_text'); ?></h2>
<?php } else{
$carousel_logo = get_field('carousel_logo');
if ( $carousel_logo ) { ?>
<img src="<?php echo $carousel_logo['url']; ?>" />
<?php } else { ?>
<h2 class="promo">Default slider title </h2>
<?php }
}
?>
Alternatively, you could set your field to only return the image URL and then access it like so:
<?php
if ( get_field('carousel_title_text' ) { ?>
<h2 class="promo"><?php the_field('carousel_title_text'); ?></h2>
<?php } elseif ( $carousel_logo ) { ?>
<img src="<?php the_field('carousel_logo'); ?>" />
<?php } else { ?>
<h2 class="promo">Default slider title </h2>
<?php }
?>
ACF's documentation on the Image field will provide more info on this.
I am trying to build a simple gallery with WordPress Advanced Custom Fields and the repeater field plugin. I need to display a thumbnail image which you click to enlarge the main image (I am using Fancybox). Does anyone know whether it is possible to get the link to the image thumbnail WordPress automatically generates?
I can get the main image link:
/wp-content/uploads/2014/12/slide1.jpg
But need to get this image link:
/wp-content/uploads/2014/12/slide1-150x150.jpg
Here is my code:
<?php if(get_field('gallery')): ?>
<ul>
<?php while(has_sub_field('gallery')): ?>
<a class="fancybox" href="<?php the_sub_field('image'); ?>" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="<?php the_sub_field('image'); ?>" alt="" width="200px;" height="auto"/></a>
<?php endwhile; ?>
<?php while(has_sub_field('video_link')): ?>
<a class="fancybox-media" href="<?php the_sub_field('video_link_snippet'); ?>"><img src="<?php the_sub_field('video_image'); ?>"/></a>
<?php endwhile; ?>
</ul>
<?php endif; ?>
You can absolutely do this with Advanced Custom Fields and Wordpress. To do so, go into the custom fields and change the sub field 'image' so that it returns the Image Object instead of the Image URL. See 'return value' here.
Once this field returns the object, try var_dumping the field to see your URL options:
var_dump(the_sub_field('image'));
This should show you the different thumbnail sizes enabled in your system and allow you to easily get the thumbnail you'd like. One possible example:
// Get image object with all sizes...
$image = the_sub_field('image');
$size = 'thumbnail';
// Get URL from sizes based on our $size var
$url = $image['sizes'][$size];
// Now we have the thumbnail URL
echo $url;
Let me know if you run into problems! For more documentation and many more options, try the Advanced Custom Fields documentation for the Image field.