I pulled images from my database and put them in a table, when I go over the image then, I see my imgtitle which is what I want. But now I used a href to open a new page with the enlarged picture when I click on it. But how can I have the imgtitle on that pic as well when I go over it?
Here is the line of code:
<td><img src="<?= $image ?>" title="<?= $imgtitle ?>" height="100" width="100"></td>
Yes you can have title attribute in a and img element.
If you want to show the tooltip text again in the other page with the big picture, you have to use title there as well.
This is W3C's documentation on HTML Global title attribute:
In HTML5, the title attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).
In HTML 4.01, the title attribute cannot be used with: base, head, html, meta, param, script, style, and title.
Try
<a href="<?= $image ?>" title="<?= $imgtitle ?>">
Related
I'm using official WordPress AMP plugin to create my custom WordPress theme. For images I use
<?php if(has_post_thumbnail()):?>
<img class="img2" src="<?php the_post_thumbnail_url('blog-small'); ?>" alt="<?php the_title();?>">
<?php endif;?>
I get regular alt attribute as expected but the alt attribute is missing in some auto generated AMP codes. Here is an example of that code:
<img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzIxMCcgd2lkdGg9JzQwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB2ZXJzaW9uPScxLjEnLz4=">
As you can see here the alt attribute do not contain any value. Can any one help me to solve the problem? I'm not looking for AMP validation. Missing alt can harm SEO. If you wish you can provide a code snippet so that I can understand it easily. (I'm a new coder)
I am converting Html Template to WordPress, I have done 90% of the work.
In my Template, I have some <a> which are href to the images path as
<a href="img/elements/g7.jpg" class="img-pop-up">
Now i want to link this path in wordpress using any funtion,like i have done for img tag as
<img src="<?php bloginfo('template_url'); ?>/img/logo.png" alt="">
May you help me,how can i give the path to image using <a>tag.
There are several ways to get an image in Wordpress.
1) If you image is the thumbnail image of the page or post, you can simply use echo of get_the_post_thumbnail_url().
<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
2) If your image is in the media library, you can use the function wp_get_attachment_image( $attachment_id, $size, $icon, $attr );. You must know the image ID.
<?php echo wp_get_attachment_image(300, array('800', '600'), "", array("class" => "image")); ?>
300 is the ID of the image in the library (you can discover it looking at the number in the url when opening the image there).
800 and 600 is the size.
An attribute was added: class="image".
By default, it will output this:
<img width="700" height="466" src="example.com/wp-content/uploads/2020/02/image.png" class="image attachment-700x600 size-700x600" alt="" srcset="example.com/wp-content/uploads/2020/02/image.png 800w, example.com/wp-content/uploads/2020/02/image-png-1-300x200.png 300w" sizes="(max-width: 700px) 100vw, 700px">
3) If you want the image from media library as well, but just the url, you can use wp_get_attachment_image_url( $attachment_id ) function. Like this:
<?php echo wp_get_attachment_image_url(1286); ?>
4) If you image is in a custom field, created using the Advanced Custom Fields plugin, for example. Then, you call the_field using like this:
<?php the_field('image_field_name'); ?>
5) If the image is not in the media library, but in the theme folder, you can use the get_stylesheet_directory() to find the theme folder and render the image. For example, if the image is inside the theme folder, inside another folder called img.
<?php echo get_stylesheet_directory().'/img/image.png'; ?>
Hi guys wondering how I can manually add a link from Joomla intro article images to their corresponding article and also add a title tag to the link.
Ideally the way I want to do this is to for example wrap an achor tag around the image reference in the blog-item.php file (also want to achieve this for generic articles). And then within the anchor tag capture the related image alt tag and populate the title tag with that value.
Below is where I'm at. It's not currently working, not sure why as it should be pretty straight forward. I'm not a php developer, wondering what i'm missing.
Also already cleared both browser and joomla caches after my changes.
Any help would be appreciated, cheers guys
<a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>" title="<?php echo htmlspecialchars($images->image_intro_alt); ?>">
<img
src="<?php echo htmlspecialchars($images->image_intro); ?>"
alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</a>
To make your code work, add just before your code.
<?php $images = json_decode($this->item->images); ?>
and your code will start working.
Already tested and it worked.
I have htm file called user.htm. Here i will display my user details.When i'm trying to add link to user image i have one problem. span tag is exist in the image link.
For ex,
$img_link= '/image/users/44.jpg'.I want to remove the span tag from $img_link in user.htm.
my code is:
<img src="http://www.mysite.com/Imprenta/{$ruta_value}" height="50px" width="150px" />
Here the value of {$ruta_value} is => '/user/images/44.jpg'
I can not use PHP functions like str_replace or strip_tags here. how to do it?
You can very much use strip_tags in smarty like this ,
{$img_link|strip_tags}
So in your case, it will be like
<img src="http://www.mysite.com/Imprenta/{$ruta_value|strip_tags}" height="50px" width="150px" />
if you want to remove span tag from HTML give it an ID <span id="userSpan"> </span>
then use little JavaScript here
var span = document.getElementById("userSpan");
span.parentNode.removeChild(span);
I've been able to put some code together and get a QR code to display on my site. Now I'm attempting to get the QR Code to open a larger version inside colorbox. This is the code I've got so far:
<a href="<?php echo $????; ?>" title="<?php echo $heading_title; ?>"
class="colorbox" rel="colorbox">
<img src="http://chart.apis.google.com/chart?chs=250x250&cht=qr&chld=L&chl=
<?php $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; echo $url; ?>"
alt="Product QR Code" width="80" height="80" style="float: right" /></a>
All the code for colorbox is on this page already as I have products that use this very function. The original code said echo $popup but when I use that it shows me the main product image so that's no good. What I can't figure out is what to do with echo in the href section so it calls the image again in the pop-up box but in a larger size?
I've tried using the same url as with the img src but it only returns garbage characters in the pop-up box and doesn't know to turn it into an image instead.
Thanks for your time!
When you assign colorbox, set the photo property to true. Example:
$('a.example').colorbox({photo:true});
Colorbox normally uses a regex to determine if a link is pointing to an image or not, but the URL you are using isn't going to pass that regex.