Automatically add Title attribute to image on page on Prestige theme

[FrauFrauchen]

I'd automatically like to add title tags to images on all pages, meaning i.e. startpage but also on the product pages. When uplaoding photos either to the website or product page, I can only add an Alt text , but no title.

I already found this post (https://community.shopify.com/c/shopify-design/automatically-add-title-attribute-to-image-on-page/td...), but it seems like it's used for a different theme and doesnt work for Presitge.

How can I set it up that it gets added automatically (i.e. equal to the Alt tag or for the product page it could be equal to the product title) or where do I add it manually?

[Gabe]

Hey @FrauFrauchen 

Thanks for the question and as this is the German community we can also plaudern auf Deutsch but EN is fine too. 😉

I suppose you can modify the provided JS code to work with the Prestige theme in Shopify. Since you want to apply the code only to pages, you need to find the appropriate parent class or container for pages in the Prestige theme. You can usually find this by inspecting the HTML of a page using your browser's developer console (Right-click on page -> "Inspect").

Assuming you have found the appropriate parent class or container (let's say it's called .page-container), you can modify the JS code like this:

$(document).ready(function() {
    $('img', '.page-container').each(function() {
        var img_alt = $(this).attr('alt');
        $(this).attr('title', img_alt);
    });
});

This code will only apply the title attribute to images inside elements with the .page-container class. Replace .page-container with the correct parent class or container for your theme.

You can add this custom JS code to your theme's JavaScript file. In the Prestige theme, it's usually named theme.js.liquid or theme.js. You can find this file under the "Assets" folder in the theme's code editor.

Before making any changes to your theme, it's always a good idea to create a backup of your theme so you can easily revert to the previous version if needed.

Once you've added the code to your theme's JavaScript file, save the changes and test the functionality on your website. The title attributes should be automatically added to the images on your pages, matching the alt tags.

If that doesn't work, then I can def recommend some experts for you! 😉

[FrauFrauchen]

Dann geht's gerne auf Deutsch weiter 😉

Im besten Fall soll die Änderung nicht nur auf den "normalen" Seiten funktionieren, sondern auf allen - also auch auf den Produktseiten und den verwendeten Produktfotos.

Ich habe eine theme.liquid eine theme.js und eine theme.css Datei, bei der ich die Info oben ergänzen könnte. Welches ist die richtige? Und was müsste ich anstelle von page.container reinschreiben bzw. wie finde ich das heraus?

Danke für die schnelle Rückmeldung!

[Gabe]

Hey @FrauFrauchen 

Leider habe ich wenig Einsicht in die Prestige Liquid Dateien und das würde einiges an Arbeit verlangen deine Code Files anzupassen. Deshalb werde ich hier nochmal einen Experten sehr empfehlen der/die in dein Code in einer Testumgebung eintauchen kann und das für dich einrichten, genau so wie du es haben möchtest. Es geht hier ja auch darum die Integrität deines Themes zu erhalten denn man möchte ja nicht einen Fehler machen und dein Theme Code komplett zerschießen.

Ich hoffe du kannst also verstehen, dass es nicht so einfach ist von hier aus dir eine komplette Coding Lösung anbieten zu können ohne einen Deep-Dive in dein Code machen zu können.

Hast du schon einen Experten der/die das machen kann? Wenn nicht dann kostet eine E-Mail an diese Experten hier nichts, und die antworten meist sehr schnell!

Hoffe das hilft! 😉