I'm using ACF plugin for my wordpress website https://www.advancedcustomfields.com
I created fields for page, and use the_field("field_name") and get_field("field_name") in page.php file in theme, but it show value of field, not html render.
For example field type is image, I want it display as <img src="$field_value"> not $field_value string.
Thanks
In ACF use this code.
<img src="<?php the_field('ACF filed name') ?>" alt="image">
Use image filed in ACF backed and select the Image URL. Check the screenshot for more details. https://prnt.sc/nauf26.
Check this link for more details https://www.advancedcustomfields.com/resources/image/
I would recommend using an image object when dealing with images in ACF unless you’re using it for a background image therefore only using the URL.
This is because it gives you access to limiting sizes, providing an accurate alt tag etc.
Please see the below:
<?php
$image = get_field('field_name');
?>
<img alt="<?php echo $image['alt'];>" src="<?php echo $image['url'];>">
For more information on the image field and how to use it within repeater and flexible fields click here.
Related
I'm looking for a way to speed up the insertion of the alt tag dynamically, thanks to PHP in my HTML tags.
Basically I have a page created in this format:
page-{slug}.php
I would like that inside this page all the images automatically take the alt tag of the image called in the src attribute of the HTML tag.
Currently I am forced to do the following for each image (in this page there are about twenty images):
<img src="/wp-content/uploads/image.png" alt="image example">
Instead I would like each image to follow the following format (excluding the src attribute that calls the file):
<img src="/wp-content/uploads/image.png" alt="<?php echo alt_recovery_by_media(); ?>">
Is it possible to call with PHP the alt tag of the image inserted in the media?
For example this:
Better still if the PHP code in question is to be inserted in the functions.php file. Basically I would like a code that automatically calls the alt tag associated with that image and that is already in the alt tag of the media uploaded to WordPress.
I finally managed to do it myself by searching through the WordPress documentation.
This code is for finding the src:
wp_get_attachment_image_src( IMAGE_ID, 'full' )[0];
Note that zero should be put to retrieve only the URL of the media file. You can find more info here:
https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/
To get the alt tag you can use:
get_post_meta( IMAGE_ID, '_wp_attachment_image_alt', true);
To retrieve the title of the image you can use instead:
get_the_title( IMAGE_ID );
You can't derive the alt attribute value from the src. Typically, you would either hardcode the alt value in your PHP template (since you already hardcode the src and know its value), or you would use the Wordpress wp_get_attachment_image() function which will fetch the image by its ID and - among other values - also the alt value.
More about it here: https://developer.wordpress.org/reference/functions/wp_get_attachment_image/
Hy.
After uploading an image to Wordpress it shows some weird link instead of "link-to-project/wp-content/uploads/2019/04/IMG_20171129_125745.jpg"
I noticed it shows some info from the database. For example the ID and the date, the size etc. But idk why wordpress is doing this.
When I inspect the source I get this weird link:
<a class="logo" href="http://localhost/project/"><img src="22, 22, IMG_20171129_125745, IMG_20171129_125745.jpg, 667317, http://localhost/project/wp-content/uploads/2019/04/IMG_20171129_125745.jpg, http://localhost/project/img_20171129_125745/, , 1, , , img_20171129_125745, inherit, 0, 2019-04-07 10:54:26, 2019-04-07 10:54:26, 0, image/jpeg, image, jpeg, http://localhost/project/wp-includes/images/media/default.png, 1700, 1000, Array" alt="logo"></a>
Here is the PHP code
<a class = "logo" href="<?php echo get_home_url(); ?>/"><img src="<?php the_field('website_logo','options'); ?>" alt="logo" /></a>
Note I'm using advanced custom fields here.
Just to add to your answer for people having issues in the future, the problem was the ACF Image field you was calling was set to image object and you was expecting it to return just the url. There are 2 ways to fix this:
Option 1: Edit the image field to only return the Image URL
Pros
Easy and simple to do, fastest solution
Good for inline background css
Cons
Unable to control the image size that is returned
Unable to display the image alt tag which can impact SEO
Option 2: Use the correct ACF Image code to display what you're looking for
The better way to display the image will be to use the Image object field as it allows a much better approach as you have access to all image attributes not just the URL. In order to display these see below:
$image = get_field('website_logo','options');
<a class="logo" href="<?php echo get_home_url(); ?>/">
<img src="<?php echo $image['url'];?>" alt="<?php echo $image['alt'];?>" />
</a>
More information on using the image object when using ACF Image fields can be found by clicking here.
Pros
Equally as easy and simple to do
Allows you to make use of the alt, sizes, title, caption etc. of the image
Allows you to use the same image with easy further down in the code by not needing to type out the field function again
Cons
Not the ideal solution when inlining background image css, use image url for this reason instead
*Fixed
I just had to use Image url as Return Value here, I accidentally used array for the return value.
Thanks.
I've registered several custom thumbnail sizes for a site I've been given control over, and want to be able to call on them in the template code, which is set up like this
<img id="product_thumb" class="border--round" alt="Image" src="<?php echo $vehiclepods->field('featured_image')['guid']; ?>">
Where do I pass the thumbnail parameter, or even force a size?
Sample template here
Functions here
Found the missing bit between the field and the thumbnail.
featured_image._src.speedmaster_front
Depending on your settings and pod configuration
$vehiclepods->field('featured_image.speedmaster_front')
should output the Full Image!
More details about how to get just the link or more in the Pods Documentation:
field()
display()
Magic Tags
I want to credit the author of a few the photos on my website in the title tag. I just added the fields in the admin sections using the instructions given here and this works fine.
Now i want to display that information in the title tag of a photo but that photo is set as a background image and therefor im not able to add a title tag to it and thus the info isnt showing. It is said as a background-image because it sometimes has an extra layer (partially) on top of it.
<figure
style="<?php echo "background-image:url('".$snakeImageUrl."'); background-size:cover;"; ?>"
title="<?php echo get_post_meta($post->ID, 'be_photographer_name', true); ?>
<?php echo get_post_meta($post->ID, 'be_photographer_url', true); ?>">
</figure>
How am i still be able to achieve this result?
I think you're going to have trouble here, I don't know of properties being able to be attached to content that's delivered via CSS which is what the style attribute within with figure selector is.
Can you edit the template? If so, why not have the image as a HTML image element and then use CSS and position:absolute on the content that you want placed over the background image?
I am trying to use an image from a wordpress post as a custom header background image. I currently have it set to use the featured image (which works, but I don't want to use the featured image)
html (header.php)
<?php
if (has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
}
?>
<div class="jumbotron-int" style="background-image:url('<?php echo $large_image_url[0]; ?>');">
I want to target a different image in the post. whether it's the first one, or one I an tag in some way. As long as I can control with one gets used.
I have installed the ACF plugin, as mentioned by another, but I can't figure out how to use it to do what I want
EDIT:
I want each post to have a different header image put in
You can make use of the Image field in ACF
http://www.advancedcustomfields.com/resources/image/
When you add an image field in ACF, You will see like the following screenshot
http://www.advancedcustomfields.com/wp-content/uploads/2013/02/acf-image-field-edit.jpg
In that screen, If you select the return value to Image URL and Field Name is set to "header-image" (without quotes) You should use the following code to get the image.
<?php $large_image_url = get_field('header-image'); ?>
<div class="jumbotron-int" style="background-image:url('<?php echo $large_image_url; ?>');">