Creating Variations with different Text or Images

  1. What do you want to see in Hype?
    I've been creating a lot of HTML5 Banners across different languages, my current method is to duplicate the file and then change the text inside, it'd be great if Hype could have this sort of feature to create variations so the animations are all contained, but certain assets can be swapped out.

  2. How high of a priority is this for you?
    [X] Nice to Have
    [ ] Important
    [ ] Can't use Hype without it

1 Like

Hi,
How would you prepose text would be swapped out as an object?

The way people do do this is the project uses code to look at the text elements data-attributes and read from a text file to populate them according to what the data-attribute is.

Then the only thing needed is to either have the text file contain all language versions or swap that file out as needed.

Incidentally , I did write an AppleScript/JXA app a long time ago to deal with this directly in the exports but now days I would do the above.

You could use Hype Data Magic (on the fly variations), although it would still require changing the data in Head HTML in each variation.


Or use an export script like suggested by @MarkHunte and actually duplicating and rendering the changed data into each text variation during the export.

broken down to a very simple logic you can swap contents on prepare for display.

give a class to an element that should be affected by languagechanges and fill the below js-object with corresponding content.

//////// key is equal to a class of an element in a scene, value is the text for the element
var languages = {

de : {

entry001 : 'German',
entry002 : 'nur ein Beispiel'

},

en : {

entry001 : 'english',
entry002 : 'just a sample'

}

};

/////////////////choose the language to serve here
//in fact you could automate this by checking the browserlanguage
//to use navigator.language

 var chosenLanguage = languages.de;//switch to languages.en for english
 

 //////////////nothing to change below
 
 const sceneElement = element;
 
 var arrayOfLanguageEntries = Object.entries(chosenLanguage);
 
 arrayOfLanguageEntries.forEach(function(languageEntry){
 let [htmlClass, htmlText] = languageEntry;
 
 let currentElement = sceneElement.querySelector(`.${htmlClass}`);
 
 if(currentElement){
 currentElement.innerHTML = htmlText;
 }else{
 console.log(`no element with class ${htmlClass} in the scene`)
 }
 
 })

this is very basic, but will give you an idea. searching the forum you'll find plenty of other approaches ...

languages.hype.zip (15.8 KB)

3 Likes

Example of using Hype Data Magic for variations

Here is a setup with live preview. The animation is the same across the language version using a symbol, but could also be individual per language. Export the Hype project using advanced export to export each scene individually.

Example_using_Hype_Data_Magic_for_multi_language_advanced_export.hype.zip (84,8 KB)

1 Like

Example of using Hype Data Magic for variations with dynamic images

You can also assign images dynamically. As they are dynamic, the advance export panel doesn't detect what to include, so you need to assign it by choosing each slide and putting a checkmark at the side of the resource. Preloading and all will work as usual after that.

Example_using_Hype_Data_Magic_for_multi_language_with_images_advanced_export.hype.zip (143,1 KB)


If the images should be completely dynamic from an external source, meaning you don't even want to add them into Hype and rather load them from a third-party server, this is also possible. The only thing that wouldn't work is preloading in that case, but in most cases it wouldn't matter. If preloading is urgently needed, in such cases, one can "inject" the dynamic image into the official Hype preloader using Hype Document Loader.

4 Likes

When the project is exported is the Data Magic plugin code and config removed? Very impressive plugin!

1 Like

javascriptcode (except node.js) is clientside and for that reason has to be there when the client requests it. if you want the changes baked in you'd need an exportscript postprocessing the Hype-export. That's why i intended to do the switch dynamically using the navigator.language ... one export, multiple languages ... DataMagic can handle this too :slight_smile: just an idea ... though

1 Like

Thanks and as @h_classen said. The JavaScript (client side) needs to be there. You can download it and add it to your resource library to remove the dependency on the CDN. If you want to have a solution without any dependencies, you could always write an export script (Python or JXA on export) as @MarkHunte mentioned.

addition: to reduce the load of languages (this seems to be a matter for you ...) to be requested you could store each language in a separate json, csv or js and load only the one you'll need ... this could be done on HypeDocumentLoad

1 Like