Algeron
Algeron

Reputation: 269

How to get active theme name in velocity template in Liferay

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!

Upvotes: 1

Views: 2474

Answers (2)

Olaf Kock
Olaf Kock

Reputation: 48057

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

Upvotes: 3

Apoorva Prakash
Apoorva Prakash

Reputation: 46

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

Upvotes: 2

Related Questions