Image are not rendering properly when HTMLs are imported/loaded to AJO

[ZoeAG]

Hello All, 

Have any of you guys noticed that the images are not rendering  properly when HTMLs are imported/loaded to AJO?

What I usually do is when adding emails to a Campaign or a Journey I load the zip file (the zip file includes the .html file and image folder). Then I am directed to choose the destination/folder in Experience Manager Assets. Once chosen the destination folder I can import the zip, then the email will be loaded to AJO Email designer. Lately I have noticed some images are not rendering properly, only the place holders/ thumbnails are visible. In some cases when I clicked Simulate Content, the images which did not render properly rendered fine. Anyhow when I sent the actual proof, all the images were available, which was a happy ending! Even it bothers me a bit not being able to see some of the images rendering properly in AJO, I did not mind it very much since everything was perfect after sending the proof. But today when I loaded the html, not a single image rendered and after sending a proof to test it, I figured even the proof did not show a single image; only the white spaces where the images should have been! 

Of course I can always manually add the images and it works fine. But wanted to know whether anyone came across the issues I described, and if so did you find a solution?

Please let me know. Thanks a bunch, Zoe 

[SatheeskannaK]

@ZoeAG There could be a couple of reasons this would happen. Either the asset has been moved to a different location or check your assets essential access. I have noticed when you don't have assets essential access images won't load in the email designer.

[ZoeAG]

Hey @SatheeskannaK , thanks for the comment, but the assets are available but let me check with the assets essential access. Thanks!

[riballor]

Hi @ZoeAG @SatheeskannaK We are also having the same issue, seems that the "data-medialibrary-id" and "data-mediarepo-id" tags are being generated inside the "src" tag

Adobe is investigating the issue still. 

See below example - Blue box how it should be configured - Red box how its being configured atm

Current workaround is to add the images manually by selecting those from the folder inside Asset Essential

Also my advice if you add assets manually is that your HTML has all alt-text tags so its easier to add the images correctly

[ZoeAG]

Hey @riballor @FilipeFreitas @PedroLeme Thank you so much for sharing different approaches. I have been editing the html as well. Even manually adding images also work (sometimes less time consuming than editing the html,) in some scenarios I figured if the image place holder is super small (1 px - i.e: horizontal line)the place holder isn't visible. BTW planning to try @FilipeFreitas  and @PedroLeme approaches as well. Anyhow hope Adobe would fix this soon.Thanks a bunch, Zoe! 

[FilipeFreitas]

Hi Zoe!

Let me share with you that I am facing the same issue here, and as riballor mentioned, the issue is with the data-medialibrary-id and data-mediarepo-id tags. I admit I manually edited one HTMLs, and yeah, that's time consuming and not scalable (although it worked).

Our team here decided to host the images on a S3 bucket and edit the HTML source-codes before uploading them into Adobe Journey Optimizer. We will continue with this approach until the upload feature is fixed.

Best regards

Filipe C. Freitas

[PedroLeme]

Hello @FilipeFreitas, all,

I'm also facing the same issue and I'd like to share a way I've found to get around it.

Usually, I import the HTML into the editor and after the conversion, considering that the assets are already in the AEM Assets folder, I open the HTML editing mode of the email content, copy all the code and with a code editor, find and replace all the 'src="urn"' to 'data-medialibrary-id="urn' and '|a' to '" data-mediarepo-id="a'.

You can see that the same quantity found in "ctrl+h" for the first element will also be found on the second element.

Once this is done, I just replace the entire new code over the previous one in the AJO builder.

Best regards,
Pedro Paes Leme

[FilipeFreitas]

Hi, Pedro!!

Definetely, a good approach! Thanks for sharing! Highly appreicated.

All the best!

Filipe C. Freitas 

[ZoeAG]

@PedroLeme Hey Pedro, is this like a bulk find and replace, is it?  Please let me know. Thanks a bunch, Zoe 

[PedroLeme]

Hey @ZoeAG ,

That's right! It's a massive find and replace.

What we're doing here for now is following the steps below:

• We import the ZIP containing the HTML and assets as normal;
• Convert using AJO's standard functionality;
• At the top of the editor, between the 'Plain Text' and 'Swith to live view' options, we access the 'HTML' option;
• Copy all the HTML content and with the help of an external code editor (Visual Studio Code, for example) find and replace (ctrl+H) all the fragments I mentioned in the previous reply in a single run;
• Finally, we return this code to AJO replacing all the code that was there.

Let me know if you need more information.

Regards,
Pedro Paes Leme

[ZoeAG]

@FilipeFreitas Hey Filipe, why are you guys hosting the images on a S3 bucket instead of keeping it in Experience Manager Assets? is there an advantage or you simply use S3 buckets for something else? Asking because you mentioned that you change the html code nevertheless.  Please let me know. Thanks a bunch, Zoe 

[FilipeFreitas]

Hey, Zoe!

The main reason for us to use S3 is to edit code in bulk - since we didn't know how long it would take until the feature was fixed. Someone in the company developed a script that loops through a folder, and edit all *.html files in it, redirecting the img src element to read from the S3 bucket. 

For example, we always store the html images in a folder named "images". The .bat script calls a .exe program that replaces "images/" by "http://ours3endpoint.com/images/".

By doing that, we go from:

<img src="imagens/header.png">

To:

<img src="http://ours3endpoint.com/images/header.png">

My apologies I do not have the script here with me - I would happily share if I had.

Best!

Filipe

[ZoeAG · Accepted solution]

Hello All, @FilipeFreitas @PedroLeme @riballor @SatheeskannaK Adobe product team has deployed the fix for this issue. Images should now be displayed when uploaded as zip. Please check, thanks, Zoe

[Sukrity_Wadhwa]

Thanks @ZoeAG for sharing that update with the Community!