Adding a title attribute to all existing images in a blog

  • Resolved augatti

    (@augatti)


    19 years, 9 months ago

    I have only just discovered the problems associated with different browsers handling of the “alt” and “title” attribute of an “img” element (see https://virtuelvis.com/gallery/alttext for example).

    In one of my WordPress sites https://scrumble.com.au I have over 650 images within the posts content. They appear like this:
    <img src=”/images/someimage.jpg”alt=”some text”/>
    I want compliant browsers like Firefox to display the value of the alt attribute as a tooltip on mouse-over. Now I understand the difference between alt and title I will get it right for all new posts. However I wish to address the problem with all the existing images.

    One way I can achieve this is to change them all to read like this:
    <img src=”/images/someimage.jpg”alt=”some text”title=”some text”/>
    I am trying to work out the best way to achieve this. Has anyone encountered a similar problem before?

    Am I correct in my understanding that the string manipulation required would make this too complex to address using the replace and update syntax of mySQL? Would I be best to export the wp_posts table of the database and perform some sort of string manipulation in an editor before importing it back? Or is there some existing php code (plugins, hacks) that I could use to interact directly with the database?

    I’ll keep working on the problem, but in the meantime I would really appreciate any advice from anyone with similar prior experience.

Viewing 4 replies - 1 through 4 (of 4 total)

  • It’s great that you want to make your images and site as accessible as possible. But reality is that this is a LOT OF WORK.

    Yes, you can export, do some fancy string manipulation (and if you succeed, consider contributing the explanation to the WordPress Codex ;D ) and reimport the posts.

    Or you can just start from here and make sure that every image is done right.

    I have THOUSANDS of images on my site. I’m not going backwards, only forwards.

    And here is an article that will help you to “add” titles to your quicktags in the Write Post panel.

    Thread Starter augatti

    (@augatti)

    Thanks Lorelle. I was determined to find a way to go backwards though. I found a solution, a rather ugly one process-wise, but very quick and effective to implement once I figured out how. This is how I did it:
    1. In phpMyAdmin, made two copies of wp_posts – one named wp_posts_bak and the other wp_posts_new. (via the Operations tab)
    2. Exported wp_posts_new in SQL format, not to a file but to the screen.
    3. Selected the export “SQL” text and copied and pasted it into a Word document. (I hate using Word, but I needed the advanced Find and Replace capability)
    4. Opened the Find and Replace dialog box in Word, and checked Use Wildcards (under “More”)
    5. Find What = (\alt=”*\”)
    6. Replace With = \1title\1
    an explanation of why I did this is here:
    https://groups-beta.google.com/group/comp.os.ms-windows.apps.word-proc/msg/9aff369aaa446dd4?hl=en
    7. The result was that
    <img src=”/images/someimage.jpg”alt=”some text”/>
    now looked like this
    <img src=”/images/someimage.jpg”alt=”some text”titlealt=”some text”/>
    8. I then did a find and replace of titlealt -> title
    9. Selected the entire text of this modified Word document and copied it. NB on first run I saved the file, both on exporting and after modifying it in Word. This appeared to have corrupted the data. That’s why I then tried just moving the text around simply by copying and pasting it between apps.
    10. Back in phpMyAdmin I dropped the wp_posts_new file.
    11. Under the SQL tab, pasted the text into the Run SQL query box and ran it.
    12. Checked the newly created wp_posts_new file – it looked okay.
    13. Dropped the wp_posts table.
    14. Copied the wp_posts_new table to wp_posts (via the Operations tab)
    15. Tested my website – perfect. Made a note to delete the wp_posts_bak and wp_posts_new after a few weeks if everything is still fine.

    I don’t know whether or not to cheer or pity you. Wow. You did it. Amazing.

    BE VERY careful using Word as it changes all the quotes and apostrophes into characters and does other harmful things. I would have used WordPerfect’s MUCH better search and replace functions, but then I’ve tweaked out and customized WordPerfect to allow me to do code, but I do NOT recommend it.

    Check everything thorughly and let us know in a week or two is all of this works out. That’s an amazing amount of work. And thanks for sharing it with us.

    Thread Starter augatti

    (@augatti)

    One month on, and everything is fine!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding a title attribute to all existing images in a blog’ is closed to new replies.

Tags