How to get active theme name in velocity template in Liferay

Question

We use one theme for our desktop web page and another for responsive/mobile version of the site. But for mobile we don't always want to show images and it would be good if we can restrict it from the template, not just hiding it with CSS (because it still loads the image, just does not show it).

For that I need to get liferay current active theme ID or name so I can add simple if statement in the template.

#if(${themename} == "desktopTheme")
<img src="foo.jpg"/>
#end

Does anyone has ideas how to get it? I searched and checked lots of liferay's forums, but didn't find anything.

Thanks!

Olaf Kock · Answer 1 · 2013-09-30T09:20:44.573

My advice would be to not hardcode the theme's name, but use theme settings that are readily available. Just configure your theme to be "desktop" or "mobile" style and check for this property. This way you can cover many different themes without hardcoding particular ones.

Also, the various ThemeDisplay.getTheme*() methods will help you to get the required information almost anywhere you are.

Here's some untested pseudo code for your themes (I just typed it here, never compiled/deployed, you might want to add null-checks for the VM stuff)

<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.0.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_6_0_0.dtd">
<look-and-feel>
    <compatibility>
        <version>6.1.0+</version>
    </compatibility>
    <theme id="my-desktop-1" name="My First Desktop Theme">
        <settings>
            <setting key="mobile" value="false" />
        </settings>
    </theme>
</look-and-feel>


<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.0.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_6_0_0.dtd">
<look-and-feel>
    <compatibility>
        <version>6.1.0+</version>
    </compatibility>
    <theme id="my-mobile-1" name="My First Mobile Theme">
        <settings>
            <setting key="mobile" value="true" />
        </settings>
    </theme>
</look-and-feel>

And then, in VM or JSPs or other code:

#if( ! $themeDisplay.getSetting("mobile"))
     ## more resources, desktop only, here.
#end

#if( $themeDisplay.getSetting("mobile")
     ## mobile only stuff here.
#end

And finally you might also want to consider to use the Device Detection API to determine the current device's actual capabilities on a far finer granularity

Hey, thanks! Somehow it did not work. Should I enable anything to access $themeDisplay from templates? — Algeron, Sep 30 '13 at 12:04
And by template I mean web content template, not theme template like portal_normal.vm — Algeron, Sep 30 '13 at 12:36

score 2 · Answer 2 · answered Sep 30 '13 at 08:15

2

Suggest you to use themeId whis is also unique. its something the following: xxx_WAR_xxxtheme

#if($themeDisplay.getThemeId().equalsIgnoreCase("<dektop theme id>"))
### your logic here
#end

HTH

answered Sep 30 '13 at 08:15

Apoorva Prakash

46
2

If I add to template just $themeDisplay.getThemeId() it doesn't render it? Do you know where I can find the id? – Algeron Sep 30 '13 at 08:53
see the pseudocode (actually, the xml) in my answer to find the theme's id – Olaf Kock Sep 30 '13 at 09:24

How to get active theme name in velocity template in Liferay

2 Answers2