Adding title attribute to links to recent post images

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 < and a to prevent formatting problems.)

Sincerely,
Drew O’Neill

Worked 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=”https://www.dynamicafrica.co.za/wp-content/uploads/EasyRotatorStorage/user-content/erc_83_1352727464/content/assets/modular-building-0.jpg&#8221; alt=”Modular Buildings” />
  <img alt=”Home” class=”thumb” src=”https://www.dynamicafrica.co.za/wp-content/uploads/EasyRotatorStorage/user-content/erc_83_1352727464/content/assets/modular-building-0.jpg&#8221; />
  <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 with alt 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: https://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 the alt attribute.

I think you would find this article helpful and instructive; it differentiates between the alt and title attributes: https://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 the title attributes as desired. This would require more advanced coding skills.

Please let me know if you have any other questions.

Sincerely,
Drew O’Neill

Hi Drew

Thanks for getting back to me. Really appreciate it.

Yes, I still want to apply the title tag (<img src=”https://www.dynamicafrica.co.za/wp-content/uploads/2013/10/feat1.jpg&#8221; 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) . '"';