I have beginner with ACF and WordPress as developer.
So, I want to select which title post has to be displayed in div from WordPress panel. I have got some ACF file called "hot_news" which is post object. Returned content is post object, not ID.
I have got also "Show if post is equal to (some post title)".
This is my code:
<div class="bp1-col-1-1 news-line">
<a class="button button-hot-news" href="#">Aktualności</a>
<img class="hot-icon hot-icon-left" src="<?php echo get_bloginfo('template_url') ?>/images/warning-icon.png" alt="Hot news!">
<div class="morquee-efect">
<a class="hot-news-title" href="#"><?php the_field('hot_news'); ?></a>
</div>
<img class="hot-icon hot-icon-right" src="<?php echo get_bloginfo('template_url') ?>/images/warning-icon.png" alt="Hot news!">
</div>
When I make it is displayed, but does not display post title. What is wrong?
to retrieve a field from ACF you should use get_field so
<?php echo get_field('hot_news'); ?>
prints the current post custom field named "hot_news".
If you want you can specify a post ID :
<?php echo get_field('hot_news'[,post_ID]); ?>
You said in your question that hot_news is a post object. Therefore, if you try to echo an object, you're not going to get what you want.
Instead, you'll have to do something like:
<div class="bp1-col-1-1 news-line">
<a class="button button-hot-news" href="#">Aktualności</a>
<img class="hot-icon hot-icon-left" src="<?php echo get_bloginfo('template_url') ?>/images/warning-icon.png" alt="Hot news!">
<div class="morquee-efect">
<a class="hot-news-title" href="#"><?php
$hotnews = get_field('hot_news');
if($hotnews) echo $hotnews->post_title;
?></a>
</div>
<img class="hot-icon hot-icon-right" src="<?php echo get_bloginfo('template_url') ?>/images/warning-icon.png" alt="Hot news!">
</div>
You can get more info on how to work with an ACF post object here: https://www.advancedcustomfields.com/resources/post-object/
My method should work if you just need the simple post title, but if you start needing permalinks to the post and stuff like that, it may make sense to use the setup_postdata($post) code that the ACF docs use.
Related
I am building a theme and I have images displaying on the site via ACF. I am trying to get the alt text that the client enters when they upload the image. I understand that the image return format should be set to image array or ID, but not URL. Mine were set to URL quite some time ago and I am having trouble revising my code to reflect the alt text when inspected. Here is my current function that displays staff repeater.
function meetOurTeamListing() {
if(have_rows('meet_our_team')):
while(have_rows('meet_our_team')): the_row();
$staffImage = get_sub_field('staff_image');
$staffName = get_sub_field('staff_name');
$staffTitle = get_sub_field('staff_title');
$staffBio = get_sub_field('staff_bio');
$html =
'
<div class="myBtn staff-item">
<img src="'.$staffImage.'" />
<p class="staff-name">'.$staffName.'</p>
<p class="staff-title">'.$staffTitle.'</p>
</div>
<!-- The Modal -->
<div class="myModal modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="modal-header-text">
<p class="modal-name">'.$staffName.'</p>
<p class="modal-pipe">|</p>
<p class="modal-title">'.$staffTitle.'</p>
</div>
</div>
<img src="'.$staffImage.'" />
<div class="modal-body">'.$staffBio.'</div>
</div>
</div>
';
echo $html;
endwhile;
endif;
}
Obviously the sub-field would need to be converted to an image array, however simply switching the radio selector from "image url" to "image array" breaks the images on the front end. Given this context, how can I implement alt text from the WP database dynamically?
Problem solved. Thanks Nicole!
My problem was that when set up the custom fields that took images, I set them to Image URL. This is good if you just want to quickly display an image because it just returns a string. It should be set to Image Array. This results in an itemized list of key/value pairs (ie. alt text) that are accessible in the theme template.
To display your image that is set to an Image Array, here's the syntax:
<img src="'.esc_url($image['url']).'" alt="'.esc_attr($image['alt']).'" />
This works only inside of my PHP function. Alternatively, the following can be used inside a template file among the HTML:
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
I'm trying to get an image asset shown on the front-end using the wp_get_attachment_image WordPress function, but it doesn't seem to work with my options page on ACF.
Here is my code:
<?php
$image = get_field('logo', 'option');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
?>
Which looks like this on the back-end:
The picture you see above is an options page in ACF and when I try to query that image into the wp_get_attachment_image function, it doesn't work. However, when I run this code:
<img data-src="<?php the_field('logo', 'option'); ?>" alt="footer logo" class="lazyload" />
which is within an image tag, it works just fine.
I copied and pasted what was shows on the ACF docs located here (Basic Display ID), but it's not showing the image on the front-end.
Anything I'm missing guys?
Thanks a lot!
Return value in field should be Image ID. See Screenshot
What is the return value type you used? Image Array, Image URL, Image ID
And you need to get a field like this:
get_field('logo'); why do you add option?
More info here:
https://www.advancedcustomfields.com/resources/image/
wp_get_attachment_image requires the first parameter to be an image ID. In your case, if you are seeing the image using the code <img data-src="<?php the_field('logo', 'option'); ?>" alt="footer logo" class="lazyload" /> then get_field('logo', 'option') is returning the url of the image.. not the ID which is what you need if you are using wp_get_attachment_image.
What you need to do is change the Return Value of your logo field to Image ID.
Then you might have to re upload the image.
And also change this code <img data-src="<?php the_field('logo', 'option'); ?>" alt="footer logo" class="lazyload" /> to <img data-src="<?php echo wp_get_attachment_url(get_field('logo', 'option')); ?>" alt="footer logo" class="lazyload" />
ACf plugin returns value as you have set the return type.
If you have sent the return type as Image array then :
$image[0] -> full or $image[0][$full] or $image[$full] depending on the number of image uploaded.
If you have set return type as Image url:
<img src="<?php $image; ?>"> would do the work.
If you are setting return type as Image Id:
$img2 = wp_get_attachment_image_src(get_post_thumbnail_id($image),
$full); echo $img2[0];
I guess above methods will surely help you out.
Thanks
So I have a WP_Query looping through my custom post types and I'm looking to customize the src of my image tags based on which post in the loop it is. What is the cleanest way to achieve this.
consider this as what my loop is spitting out on each iteration:
<div class="partnerships p-section">
<div class="-display-inlineBlock partnerships icon">
<img style="min-width:71px;" src="<?php bloginfo('template_url')?>/images/icons/trainingAndDevelopment.svg">
</div>
<div class="-display-inlineBlock" style="width:70%">
<h1><?php the_title();?></h1>
<hr>
<p><?php the_content(); ?>
</p>
</div>
</div>
Why you don't use post thumbnail?
<div class="partnerships p-section">
<div class="-display-inlineBlock partnerships icon">
<img style="min-width:71px;" src="<?php the_post_thumbnail_url(); ?>">
</div>
<div class="-display-inlineBlock" style="width:70%">
<h1><?php the_title();?></h1>
<hr>
<p><?php the_content(); ?>
</p>
</div>
</div>
EDIT:
Then you need to allow upload SVG.
But BE WARNING: Allow upload SVG is not good for security
(take a look: https://secupress.me/blog/add-svg-support-in-wordpress-medias-yes-but-no/)
So DO NOT USE THE FOLLOWING CODE, which one can see everywhere.
function custom_mtypes( $m ){
$m['svg'] = 'image/svg+xml';
$m['svgz'] = 'image/svg+xml';
return $m;
}
add_filter( 'upload_mimes', 'custom_mtypes' )
FIRST SOLUTION
I don't know how to clean SVG on upload, luckily a plugin that does all that exists. This plugin also fixes some others issues with svg.
https://wordpress.org/plugins/scalable-vector-graphics-svg/
SECOND SOLUTION
If only admin need to upload svg
You can use following code:
function custom_mtypes( $m ){
if(get_current_user_id()==1){
$m['svg'] = 'image/svg+xml';
$m['svgz'] = 'image/svg+xml';
return $m;
}
}
add_filter( 'upload_mimes', 'custom_mtypes' );
If you speak French here is an interesting discussion on this subject
https://wpchannel.com/autoriser-envoi-fichiers-svg-wordpress/ (read comments, DON'T USE THE CODE on the top of this article)
Good Morning and Seasons Greetings! I am looking for help. I am trying to create a custom post, single page template where I want to embed a slider that fetches images, title and excerpt from the data of the same post. Let me describe the problem I seek help for.
The BACKGROUND Info
1) I have created a custom Post Type called "HPC Products"
2) It is linked with Custom Taxonomy called "HPC Product Categories"
3) The custom fields group for HPC Product includes Key Highlight 1, Key Highlight 2, Key Highlight 3 (all 3 as Single text fields) it also has fields called Product Image 1, Product Image 2, Product Image 3 (All 3 Image fields) , there are some other fields too such as title, features etc,
4) I have made a Custom Content Template for the Single-HPC-Product.
THE GOAL (Which I am not able to achieve)
Within the single-hpc-product page, I have the title and tagline followed by product description.Under that I want to have a slider with 3 slides.
Slide 1 – Should fetch Prod Image 1, The title of Key Highlight 1 and the Details of Highlight 1
Slide 2 – Should fetch Prod Image 2, The title of Key Highlight 2 and the details of Highlight 2
Slide 3 – Should fetch Prod Image 3, The title of Key Highlight 3 and the details of Highlight 3.
I have searched a lot of the forum strings, I have tried more than 25 different attempts at views and templates with different options such as Post is Parent, Post is Child, – Template is slider, template is custom display etc etc, But for some reason I am not getting success.
I really would be grateful if you could help me out by guiding me with simple steps to do this, I am a newbie with no knowledge or experience in php or coding.
I think you are using Advanced Custom Fields plugin to create your custom fields. If not use get_post_meta() instead of get_field()
First you need to find a slider that match with your requirements. After you found one look at it's markup. Imagin it's look like following code ,
<div id="slider-main">
<div class="slide">
<img src="images/img1.png" />
<span class="caption-1">Key Highlight</span>
<p class="caption-2">Key highlight details</p>
</div>
<div class="slide">
<img src="images/img2.png" />
<span class="caption-1">Key Highlight</span>
<p class="caption-2">Key highlight details</p>
</div>
<div class="slide">
<img src="images/img3.png" />
<span class="caption-1">Key Highlight</span>
<p class="caption-2">Key highlight details</p>
</div>
</div>
your template file look like this,
<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="main">
<div id="slider-main">
<div class="slide">
<img src="<?php echo get_field('product_img1'); ?>" />
<span class="caption-1"><?php echo get_field('key_highlight1'); ?></span>
<p class="caption-2"><?php echo get_field('highlight_details1'); ?></p>
</div>
<div class="slide">
<img src="<?php echo get_field('product_img2'); ?>" />
<span class="caption-1"><?php echo get_field('key_highlight2'); ?></span>
<p class="caption-2"><?php echo get_field('highlight_details2'); ?></p>
</div>
<div class="slide">
<img src="<?php echo get_field('product_img3'); ?>" />
<span class="caption-1"><?php echo get_field('key_highlight3'); ?></span>
<p class="caption-2"><?php echo get_field('highlight_details3'); ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php get_footer(); ?>
I am using follwing code in my wordpress custom theme template
<p id="news"> <?php echo apply_filters('the_content',$myNews)?></p>;
And the desired output should be like this
<p id="news"> Herer goes my news content from $myNewsvariable </p>
But i am getting output like this
<p id="news"></p>Here goes my news content from $myNewsvariable
Please tell me how i can fix this
the_content function prints out content by default. So there is no need to do a duplicate echo before apply_filters.
Also you can apply your filter to get_the_content:
<?php echo apply_filters('get_the_content', $myNews); ?>