Webflow, in combination with TX Live, allows you to dynamically localize images using the URL attribute. Instead of manually swapping images per language, TX Live can modify the image source dynamically through the src attribute of an <img> tag.
How to Implement TX Live URL Localization
To translate an image, treat its URL (src attribute) as translatable text. Use the special directive tx-content="translate_urls" to enable this functionality.
Editing Image Attributes in Webflow
- Select the Image
- In Webflow Designer, click on the image element you want to edit.
- Add Custom Attributes (e.g.,
tx-contentfor TX Live)
- Scroll down to the Custom Attributes section.
- Click Add Custom Attribute and enter:
- Name:
tx-content - Value:
translate_urls
- Name:
- This enables TX Live to recognize and localize the image URL dynamically.
- Save & Publish
- Preview the changes and publish the site to see the localized images in action.
Why Use This Approach?
- Seamless User Experience – Visitors see culturally appropriate images instantly.
- Efficient Content Management – No need for separate Webflow pages per language.
- Improved SEO – Boost search rankings with localized images.
- Faster Deployment – Minimal coding required.
By leveraging TX Live and Webflow together, image localization becomes simple and efficient. Try it out and enhance your global website today!