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?
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 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?
php newbie. echoing out links to product pages, the following code works fine:
<a href="<?php echo $rows[$product_buy];?>"<p>Click Here for Details</p></a>
but, would like to change text link "Click Here..." to an image of a button.
tried different ways, searched around, still haven't figured it out
You could simply style your link to look like a button (by giving it a class/id to make sure not all links are targeted) or you can put an img tag between the a tag.
<img src="path_to_img" alt="">
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 :)
I am working on a WP website that uses an ecommerce plugin; amongst other things this plugin stores and retrieves product images. Trouble is that, if the product has no image assigned it returns an anchor tag with nothing in the text node as follows:
<a id="product_image_id" href="..."></a>
I'd like to stay away from messing with the core functions of the plugin so that I can stay on the upgrade path and would like to use PHP to check the returned string for an empty text node and replace it with a 'no image available' image like so:
<a id="product_image_id" href="..."><img src="..." /></a>
I've tried all manner of PHP sub string / replace functions without any success and have hit a wall.
Any help would be greatly appreciated!
Glad you solved it!
I had a solution based on SimpleXmlElement in mind:
$xs2 = '<a id="product_image_id" href="..."><img src="..." /></a>';
$xml = new SimpleXMLElement($xs2);
foreach ($xml->children() as $child)
echo $child->getName();
By look at the childern, it is easy to see if there is a image present. I not, add a node and return the SimpleXMLElement->asXml;
For anyone interested, here is how I solved it:
$thumbnail = function_that_returns_formatted_image();
$thumbnail_content = strip_tags($thumbnail, '<img>'); // Strip out </a> and ignore </img>
if (empty($thumbnail_content)) // Check for </img> tag
$thumbnail = '<img src="/path/to/temporary_image.jpg" />';
I hope this helps some one!