Automatically add Title attribute to image on page

Solved
Highlighted
Shopify Partner
48 0 5

I am trying to figure out how to easily add a "title" attribute to the images that are uploaded onto a regular "page" (not product images, this is on an info page).  I know that I can go into the html and add the title attributes to each image there, but I am trying to set this up so that it will be easy for someone else to update and so that they don't have to go into the html every time they add a new image.  Currently when you upload an image through the simple image upload button, it gives a place to enter an alt tag, but not a title.  Is there code that I could put on the page template that would automatically add whatever is entered as the alt tag as a title attribute for each image? Hope that makes sense! Thanks!

0 Likes
Highlighted
Shopify Expert
3470 543 819

Hi @Laurie_ONeill 

That's depend on your page code, currently you are adding image from theme editor? 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Shopify Partner
48 0 5

The part I'm talking about is on "pages".  Currently when you upload images to a page (not product page, this is an info only page) through the simple page editor, it only gives you a place to put an alt tag, not a title tag.  If I click over into the html I can add the title tag there, but the person who is going to be using the site isn't comfortable with html so I'm trying to figure out how to code it into the page.liquid template so that it will automatically make the title tag for the image be whatever was entered in that alt tag field on the simple editor.  Sorry, I'm probably not describing this very well - I've figured out a lot of customizations for my own store but am self taught and don't know the correct terms!

0 Likes
Highlighted
Shopify Expert
3470 543 819

I got your problem, but sorry to say that, this page are totally manage by shopify so we can not add any extra field in shopify pages section, and on code side we have just one line in liquid code {{page.content}} to get all pages content so even we can not add any text in content of page.

But we ave another way using Js script to do this but for that we have to make custom code to add title tag from ALT of image in background, here then you no need to manage title script will automatically add title tag in all image of page. but for that you need developer help, let me know if yo want. or you can do your self as i give you logic.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Shopify Partner
48 0 5

Thanks so much.  This sounds beyond my ability, and this is for a friend who can't afford to hire someone, but thanks for trying to help.  At least if I know it isn't easy to do I won't spend hours trying to figure it out! Thank you!

0 Likes
Highlighted
Shopify Expert
3470 543 819

Ok no problem then i can suggest you code here may be that help

Ad this code in your asset->theme.js file at bottom

$(window).on('load',function(){
    $.each($('.page-width img'),function(i,v){
        var img_alt=$(this).attr('alt');
        $(this).attr('title',img_alt);
    })
}) 

Note: this code work store wise so you have to add parent class on place of '.page-width' in Js so it only work on pages not on whole store.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Shopify Partner
48 0 5

Thank you SO much! I added the code, and it works on most of the rest of the site (which is fine, I don't mind having the titles show on hover on the whole site), but unfortunately doesn't seem to work on the "pages", which is where I need it to work the most! Any idea what I did wrong? I put the code into the assets theme Js file, but am not sure how to get it to work on the pages.

0 Likes
Highlighted
Shopify Expert
3470 543 819

Send your store url we have to change selector base on your pages code.

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Shopify Partner
48 0 5

Sorry, I just saw this - here's an example of one of the pages. I have other pages just like this where I also need it to work. Thanks! https://www.claudiasanchez.com/pages/gallery-new-cats-in-town

0 Likes
Highlighted
Shopify Expert
3470 543 819

This is an accepted solution.

Add this js in theme.js 

$(window).on('load',function(){
    $.each($('.template-page .main-content img'),function(i,v){
        var img_alt=$(this).attr('alt');
        $(this).attr('title',img_alt);
    })
})  

That work on all pages 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like