Page tree
Skip to end of metadata
Go to start of metadata

Magnolia 5.4 introduced the site module which extracted the site functionality out of STK. Blossom 3.1.1 integrates with the site module, this means you can take advantage of the template prototype in Blossom templates. For more information see the Blossom documentation.

 

Blossom and STK take different approaches for extending the base templating and rendering functionality in Magnolia. Therefore some core functionalities in STK are not usable in Blossom templates/components. This is also true for projects using only base templating and rendering. It is possible though to use some select features from STK in such projects and in Blossom templates. I'll try to outline this below.

The Site definition is an STK concept but as it is not directly tied to the STK templates it can be used in Blossom templates/components. The Site definition is resolved early in the filter chain and is then available at any time further into request processing. For instance in Blossom controllers and views. Multi site support is an extension to this functionality and therefore works as well. Content i18n support can be configured per site and the multi site module sets the request up for content i18n accordingly. Content i18n is a feature of Magnolia core and therefore works in Blossom as intended.

Themes are configured on the Site definition and can be used in Blossom templates. The code in STK that includes them is in htmlHeader.ftl which is included on all pages. This needs to be replicated in Blossom templates. This also applies to JS files configured directly on the Site definition.

STKTemplatingFunctions provides some functions that are usable as is in non-STK templates, while some rely on finding the site root page. They do this by walking up the hierarchy until it finds a page using an STK template with category set to "home". To use these in a project that mixes STK and Blossom the root page must fulfill this requirement.

Blossom and STK have different concepts for template availability. They can exist side by side and will not conflict.

Blossom does not participate in the STK template prototype mechanism.

It is possible to mix Blossom and STK templates/components in the same project. Blossom components can be added to pages using STK templates, the opposite works in theory but some STK components depend on the model class of the page they're on. Which means that they will only work on a page using an STK template.

The resources module and the inplace-templating (templates workspace) are not directly tied to STK and are usable as is in Blossom templates.

In summary

It is possible to mix STK and Blossom pages in the same project. There are however some issues that you might encounter, for instance the STK looks for the site root page by iterating up the node hierarchy looking for a page with a template definition of category HOME. So your site root page must use an STK template.

It is possible to use Blossom components on STK pages.

It is possible to use STK components on Blossom pages. As long as they don't make use of the parent rendering model, those that do can ONLY be used on STK pages.

The site and the multi site support works with Blossom projects but you need the STK installed. If you don't want to use STK templates you can simply remove them.

Using STKTemplatingFunctions in Blossom JSPs and Freemarker templates

In order to use STKTemplatingFunctions it needs to be configured in blossom-servlet.xml. Add this context attribute in the TemplateViewResolvers there.

<entry key="stkfn">
  <bean class="info.magnolia.rendering.renderer.ContextAttributeConfiguration">
    <property name="name" value="stkfn"/>
    <property name="componentClass" value="info.magnolia.module.templatingkit.functions.STKTemplatingFunctions"/>
  </bean>
</entry>

Including CSS and Javascript from site and theme in JSPs

For Freemarker the STK has a file called htmlHeader.ftl which includes CSS and Javascript from the current site and theme. To do this in JSPs use the snippet below.

<%
    SiteManager siteManager = Components.getComponent(SiteManager.class);
    Site currentSite = siteManager.getCurrentSite();
    String themeName = currentSite.getTheme().getName();
    Theme theme = Components.getComponent(STKModule.class).getTheme(themeName);

    for (CssFile cssFile : theme.getCssFiles()) {
        if (StringUtils.isNotBlank(cssFile.getConditionalComment())) {
            out.print("<!--[if ${cssFile.conditionalComment}]>");
        }
        out.print("<link rel=\"stylesheet\" type=\"text/css\" href=\"" + cssFile.getLink() + "\" media=\"" + cssFile.getMedia() + "\" />");
        if (StringUtils.isNotBlank(cssFile.getConditionalComment())) {
            out.print("<![endif]-->");
        }
    }
    for (Resource jsFile : theme.getJsFiles()) {
        out.print("<script src=\"" + jsFile.getLink() + "\" type=\"text/javascript\"></script>");
    }
    for (Resource jsFile : currentSite.getJsFiles()) {
        out.print("<script src=\"" + jsFile.getLink() + "\" type=\"text/javascript\"></script>");
    }
%>

The imports you need are:

<%@ page import="info.magnolia.objectfactory.Components" %>
<%@ page import="info.magnolia.module.templatingkit.sites.SiteManager" %>
<%@ page import="info.magnolia.module.templatingkit.STKModule" %>
<%@ page import="info.magnolia.module.templatingkit.sites.Site" %>
<%@ page import="info.magnolia.module.templatingkit.style.Theme" %>
<%@ page import="info.magnolia.module.templatingkit.style.CssFile" %>
<%@ page import="info.magnolia.module.templatingkit.resources.Resource" %>
<%@ page import="org.apache.commons.lang.StringUtils" %>