Change image based on platform

Experience Manager (PaaS/OnPrem)
1

I have code that is “working”, but I wanted to make sure this is the recommended approach.

Basically I want to set images based on the “platform” that I have detected in the component.

Here is what I have in a freemarker template that is working:

<img src="<@hst.html hippohtml=document.html> <#if profile == ‘mobile’> <@hst.link hippobean=document.heroimage.mobilehero/> <#elseif profile == ‘tablet’> <@hst.imagevariant name=“document.heroimage.original”/> <#else><@hst.link hippobean=document.heroimage/></#if> /@hst.html" alt="${document.heroimage.description?html}" class=“img-fluid”>

“profile” is set by the component and is working for me. Using the approach above, is that the best way to set the image src?

thanks,

John

2

I feel this is more a front end question than a Bloomreach Experience question, but doing this this way is not responsive. I think there is a way to do this via CSS, but I am no expert on that.

Any front enders reading?

3

I understand that I can use "media queries’ in CSS… I was just wondering if I wanted to change it on the server side if there was a recommended way to do it?

I had found the following and was trying to use it https://www.onehippo.org/library/concepts/rewriting-rich-text-field-runtime/render-different-image-variants.html

I was having trouble figuring out where the example below would go in the template and how to use “imagevariant”…

<@hst.html hippohtml=document.html>

<#if device == 'mobile'>

<@hst.imagevariant name="hippogogreengallery:mobilethumbnail"/>

<#elseif device == 'tablet'>

<@hst.imagevariant name="hippogogreengallery:largethumbnail"/>

<#else>

<@hst.imagevariant name="hippogallery:original"/>

</#if>

</@hst.html>

4

The example in the document is only for rich text fields (containing image links added by end users through CMS rich text editor), not for any other image links (added by end users through CMS link picker). In other words, if the document has a hippostd:html compound field and so it has a property getter for that, you may follow the example.
However, if the document has an image link property, you cannot use the technique in the example. In that case, your original approach seems okay, but you should not mix <@hst.html ... /> for a simple image (link) property.
Suppose document.heroimage is a link to an image and you want to generate an image src link from there. Don’t use <@hst.html /> there because the image link compound is different from hippostd:html compound field. Instead you can do the following for example:

<#if profile == ‘mobile’>
  <@hst.link var="myImageLink" hippobean=document.heroimage.mobilehero />
<#elseif profile == ‘tablet’>
  <@hst.link var="myImageLink" hippobean=document.heroimage.original” />
<#else>
  <@hst.link var="myImageLink" hippobean=document.heroimage” />
</#if>

<img src="${myImageLink}" alt="${document.heroimage.description?html}" class=“img-fluid”>

You might want to modularize the logic into a FreeMarker function [1] in an importable [2] library. Then you can possibly make it like this:

<#import ../includes/myimglib.ftl as myimglib>
<img src="${myimglib.getLink(document.heroimage, profile)}" alt="${document.heroimage.description?html}" class=“img-fluid”>

[1] https://freemarker.apache.org/docs/ref_directive_function.html
[2] https://freemarker.apache.org/docs/ref_directive_import.html

5

Thank you very much. I’ll try that approach.

6

Hi @marsdev
But I wonder how do you detect the client device from Hst Component ?

7

Not very sophisticated:-)

Just checking the user-agent…

String userAgent = request.getHeader("user-agent").toLowerCase();

if (userAgent.contains("iphone") || userAgent.contains("android")) {
	request.setAttribute("profile", "mobile");
} else {
	request.setAttribute("profile", "non-mobile");
}