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?
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/
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.
I have an HTML tag <img> for specific products, however some products don't have images since their similar products already have the same. I want the viewer who reached these image-less products to be able to click on a link and get to the similar products. Now the <img> is like this:
<img src="../imgs/product/<?php echo $productName;?>.png" alt="No image for this item. Please refer to its similar item: <?php echo $alt; ?> "/>
Then I want the $alt part to be a link to the similar product, so I wrote:
<?php
$alt = '<a href=\"singleproduct.php?singleItem='
. $similarProduct .'\">'. $similarProduct. '</a>';
?>
It's not possible to print out the link no matter how I revise the style of quotes. Just wondering if it's not possible at all to insert an <a> inside of <img>...? If not, how to make this work?
You can't have a html tag in a html attibute. If you wan't a full html fallback, take a look at Inputting a default image in case the src attribute of an html <img> is not valid?
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; ?>');">
I have a image gallery with 15 pics, it shows the first image in normal size and the rest are thumbs on the bottom, when you click the thumbs it replaces the normal size image with that one, and if you click the normal sized image it shows on a lightbox style popup with the image description.
This gallery layout is called Galleria and its part of the SIG Pro joomla plugin:
http://demo.joomlaworks.net/simple-image-gallery-pro
The image descriptions for each image are shown on the popup, but I would like to remove this behavior and show the description below the normal sized image.
My question is regarding PHP, I'm very noob at this.
For what I figured out I can print all the thumbs descriptions with this:
<?php foreach($gallery as $count=>$photo): ?>
<p class="sigProGalleriaTargetTxt"><?php echo $photo->captionDescription; ?></p>
<?php endforeach; ?>
But what I want to print is only the description of the image that is selected.
I tried this:
<p class="sigProGalleriaTargetTxt"><?php echo $gallery[0]->captionDescription; ?></p>
But this only prints the first image description, because it has the value 0 (first image).
I see that I need to increment the value of $gallery according to the selected image.
How can I achieve this?
Here is the complete php file:
http://codepad.org/MlPbgPzl
Thank you,
What about using som javascript/dom to set the captions? its a bit of a hacky but, i would try to have an onClick Event which calls a function to apply the description.
in the thumbs sections something like:
<span class="sigProLinkWrapper">
<a onClick="setDesc('<?php echo $photo->captionDescription; ?>');" href="...
and for the description:
// leaving the <?php tag like this, so you get always the first description
// but adding an id tag
<p id='photoDescription' class="sigProGalleriaTargetTxt">$gallery[0]->captionDescription; ?></p>
and finally replacing it with some javascript (or jquery if youre using that)
function setDesc(photoDesc)
{
var descContainer = document.getElementById("photoDescription").innerHTML= photoDesc;
}
maybe it helps :)