Adding title attribute to links to recent post images
-
I’m using the EasyRotator widget to display recent post images. All the images link to the related post, and I was wondering if it was possible to add the post title as the
title
attribute on the link tags.Is there somewhere to do this in the settings or would it be possible to add code somewhere to do this?
-
Hi,
You can make this modification by editing the
wp-content/plugins/easyrotator-for-wordpress/engine/main.php
files. Modify line 1855:$codeOut .= '< a class="mainLink" href="' . htmlspecialchars($link) . '"';
Becomes:
$codeOut .= '< a class="mainLink" href="' . htmlspecialchars($link) . '" title="' . htmlspecialchars($title) . '"';
(Note: A space has been added in each line between
<
anda
to prevent formatting problems.)Sincerely,
Drew O’NeillWorked like a charm, thanks for the help!
Hi Drew,
I’m having problems implementing the title tag in the <img></img> tags for SEO purposes… Any help with that would be greatly appreciated.
At the moment the code only reads as follows:
-
<img class=”main” src=”http://www.dynamicafrica.co.za/wp-content/uploads/EasyRotatorStorage/user-content/erc_83_1352727464/content/assets/modular-building-0.jpg” alt=”Modular Buildings” />
<img alt=”Home” class=”thumb” src=”http://www.dynamicafrica.co.za/wp-content/uploads/EasyRotatorStorage/user-content/erc_83_1352727464/content/assets/modular-building-0.jpg” />
<span class=”title”>Modular Buildings</span>
<span class=”desc”>A permanent type of prefabricated building.</span>
Hi Stefanus,
Can you clarify what you’re trying to do? The
title
attribute is added to link tags, not image tags. You might be mixing it withalt
attribute that you can add to image tags.What I was wanting to do is add the article’s title as hover text on each slide: http://lucky-stars.ca/ptp
If you go in to edit the plugin file like Drew shows above, you’ll get the same result.
If you want to add the
alt
attribute to your images, that’s a another question altogether 😉Hi,
Thanks for the feedback.
To clarify, I want to add a title tag to the image tags. I see that there is an alt tag attached but not a title tag. Can you help with this?
Thanks a lot.
Hi Stefanus,
I meant what is the result you want on your website? If I go to your site now and hover over your slider, I see specific text for each image. “Modular Buildings”, “Multi House”, etc. This is what my original post was asking how to do, and it seems you’ve been able to do it successfully too.
In HTML, there is no such thing as a
title
attribute on<img>
tags. Even if you added it, it would have no effect, because browsers don’t recognize this as a valid HTML attribute.So what is it you’re trying to change on your site’s slider now?
PS Can you edit your original post so your code is in wrapped in backticks and doesn’t mess with the format of this page?
Hi Stefanus,
You mentioned in your first post that you’d like to add the
title
attribute for SEO purposes. If you’re concerned about SEO, you should simply set text in the Title field in the editor; any title text you specify will be used to set thealt
attribute.I think you would find this article helpful and instructive; it differentiates between the
alt
andtitle
attributes: http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/If you’re sure (after reading the above article) that you want to add
title
attributes to your images, you’ll need to manually add a code post-processor that modifies the<img>
tags to implement thetitle
attributes as desired. This would require more advanced coding skills.Please let me know if you have any other questions.
Sincerely,
Drew O’NeillHi Drew
Thanks for getting back to me. Really appreciate it.
Yes, I still want to apply the title tag (<img src=”http://www.dynamicafrica.co.za/wp-content/uploads/2013/10/feat1.jpg” width=”292″ height=”102″ title=”Permanent Camps – Modular Buildings | Dynamic Africa” alt=”Modular Buildings”>)
These days it is really important to fill out both the alt and title tags.
I will see what I can do with implementing the post-processor.
Thanks a lot.
Stefanus
Hi Stefanus,
It has been intriguing me why someone would want to add the
title
attribute to an<img>
, so I did a bit of research.First, I want to apologize for my previous comments which dismissed your wanting to use the
title
attribute and saying it is not possible to add it to anything other than links. Somehow in my 15 years of coding HTML, it has completely escaped me that this is an attribute you can add to all visible HTML tags.Still though, I was wondering what the best approach would be for SEO purposes. Should the
title
attribute be added to the<img>
tag, the<a>
tag or both?If you’re wanting your images to come up in Google search results, then use it on your
<img>
tags. If you want to improve your site’s ranking in Google, don’t bother with it on<img>
tags, Google tends to focus on the information in the ALT text. Still though, nice to use it on<a>
tags to get the friendly tooltip. This you can do with Drew’s code above.If you still want to apply the
title
attribute to your<img>
tags for image searches, try the code below based on Drew’s solution. Please note that I’ve not tested this myself.Change line 1860 in
wp-content/plugins/easyrotator-for-wordpress/engine/main.php
from:$codeOut .= '<img class="main" src="' . htmlspecialchars($src) . '"';
to:
$codeOut .= '<img class="main" src="' . htmlspecialchars($src) . '"' title="' . htmlspecialchars($title) . '"';
-
<img class=”main” src=”http://www.dynamicafrica.co.za/wp-content/uploads/EasyRotatorStorage/user-content/erc_83_1352727464/content/assets/modular-building-0.jpg” alt=”Modular Buildings” />
- The topic ‘Adding title attribute to links to recent post images’ is closed to new replies.