Alt text image auto naming?

Craig_Moodie1
New Member
3 0 0

Hello.

I am trying to find out if there is a way for the alt image text to automatically be named from the individual image names. I have seen an app that does something simliar called https://apps.shopify.com/alt-text

I'm not sure it's going to do what I want though. Since we rename all our images before they are imported with unique keyword content, then the text is simply copied and pasted individually to the ALT TEXT in shopify. I just want to automate this process.

Thanks, Craig

Replies 5 (5)
Jason
Shopify Expert
10440 169 2081

Are you wanting to take the actual file name and convert that into your alt tag?

Assuming all your images names are like this...
Vintage_Marquee_Lights_Arrow_with_LED_bulbs_and_in_natural_metal.jpg

... you should be able to put something like this with the product.images loop.

alt="{{ image.src | split:'/' | last | split:'.' | first | replace:'_',' ' }}"

 

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
Craig_Moodie1
New Member
3 0 0

 

Hi Jason. 

Thanks for your reply. Are the underscores in your example actually meant to be included? I haven't been using underscores in either the image file names or the Alt Text entries. Would the code snippet you wrote not work if the image file names did not contain underscores? 

If it was put into the site, where exactly would it need to be placed? We would just supply it to our web dev but just in case he needs to be told where to put it.

Also would it instanly update all old alt image text or would it just work on new images uploaded? I just want to be careful that something irreversible isn't going to happen.

Thanks, Craig.

 

Jason
Shopify Expert
10440 169 2081

That filename is one I pulled from the site - with underscores included. It doesn't matter if the filename doesn't have underscores or not. FYI, All the images I looked at had underscores.

 

If it was put into the site, where exactly would it need to be placed? We would just supply it to our web dev but just in case he needs to be told where to put it.

It needs to be added wherever the images are added. It's basic stuff, so I'd be worried if they don't know. In reality your web dev could have given you that link of code as well so you could have skipped the forum process.

Also would it instanly update all old alt image text or would it just work on new images uploaded? 

Since it's being applied to the theme code itself (eg: editing your template) it would work on any image you've applied it to. It would totally ignore any alt tag in place and only use the filename.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
Craig_Moodie1
New Member
3 0 0

Thanks for your help.

I've passed the info onto my boss and waiting to hear back.

 

Cheers, Craig.

Julie00
Tourist
7 0 1

Hi @Jason 

Sorry it's an old post but I have the exact same issue. Since we manually optimize our product pictures' titles before uploading them on Shopify, it would be perfect if we would simply use our pictures file names as alt text automatically. (and remove symbols like "-") . 

I tried to copy paste you code on my theme product-template.liquid but it didn't work.

alt="{{ image.src | split:'/' | last | split:'.' | first | replace:'_',' ' }}"

I might have put it in the wrong place... Do you mind telling me where I should place this code exactly?

 

Thank you very much in advance

Julie