How to get a preview of fragments

vishal · August 30, 2017, 7:36am

Enonic version: 6.11
OS: Centos
How should we get a preview of fragments in content studio with css applied on them
As of now, we see the them without any css changes applied to them
I have tried creating template template but could not find any content type to be added in *Supports dropdown

Cwe · August 30, 2017, 12:47pm

In site.xml:

<!-- Used for Fragments to work in XP Content Studio preview -->
<mapping controller="/site/pages/default/default.js">
    <match>type:'portal:fragment'</match>
</mapping>

In default.js:

const isFragment = content.type === 'portal:fragment';

In default.js view, do not render regions and then:

<!--/* Render Fragments (single view, supported with mappings in site.xml) */-->
<main th:if="${isFragment}" th:remove="tag">
    <div data-portal-component="fragment" th:remove="tag"/>
</main>

tsi · August 30, 2017, 3:22pm

You can also see how this was done in the “sample blog” app:

github.com

enonic/app-superhero-blog/blob/master/src/main/resources/site/site.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<site>
  <config>
    <input type="ImageSelector" name="backgroundImage">
      <label>Background image</label>
      <occurrences minimum="0" maximum="1"/>
      <config/>
    </input>
    <input type="TextLine" name="numPosts">
      <label>Max posts per page</label>
      <occurrences minimum="0" maximum="1"/>
    </input>
    <input type="ContentSelector" name="postsFolder">
      <label>Posts folder</label>
      <occurrences minimum="0" maximum="1"/>
      <config>
        <relationship-type>system:reference</relationship-type>
        <allow-content-type>base:folder</allow-content-type>
      </config>
    </input>

This file has been truncated. show original

github.com

enonic/app-superhero-blog/blob/master/src/main/resources/site/pages/default/default.js

var stk = require('stk/stk');
var menu = require('menu');

var portal = require('/lib/xp/portal');

exports.get = handleGet;

function handleGet(req) {
    var me = this;

    function renderView() {
        var view = resolve('home.html');
        var model = createModel();
        return stk.view.render(view, model);
    }

    function createModel() {

        var up = req.params;
        var site = portal.getSite();

This file has been truncated. show original

github.com

enonic/app-superhero-blog/blob/master/src/main/resources/site/pages/default/home.html

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width"/>
    <title>Superhero theme</title>

    <!--[if lt IE 9]>
    <script data-th-src="${portal.assetUrl({'_path=js/html5.js'})}" src="../assets/js/html5.js" type="text/javascript"></script>
    <![endif]-->

    <link rel="stylesheet" id="style-css" data-th-href="${portal.assetUrl({'_path=css/style.css'})}"  href="../assets/css/style.css" type="text/css" media="all"/>
    <link rel="stylesheet" id="enonic-css" data-th-href="${portal.assetUrl({'_path=css/enonic.css'})}"  href="../assets/css/enonic.css" type="text/css" media="all"/>
    <link rel="stylesheet" data-th-href="${portal.assetUrl({'_path=css/flexslider.css'})}"  href="../assets/css/flexslider.css" type="text/css" media="all"/>
    <link rel="stylesheet" id="superhero-carrois-gothic-css" data-th-href="${portal.assetUrl({'_path=css/google-font-carrois-gothic.css'})}" href="https://fonts.googleapis.com/css?family=Carrois+Gothic&amp;ver=4.1-alpha-30340" type="text/css" media="all"/>
    <script data-th-src="${portal.assetUrl({'_path=js/jquery-1.11.1.min.js'})}" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script data-th-src="${portal.assetUrl({'_path=js/jquery-migrate-1.2.1.min.js'})}" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
    <script type="text/javascript" data-th-src="${portal.assetUrl({'_path=js/superhero.js'})}" src="../public/js/superhero.js"></script>
    <script type="text/javascript" data-th-src="${portal.assetUrl({'_path=js/jquery.flexslider-min.js'})}" src="../public/js/jquery.flexslider-min.js"></script>
    <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>

This file has been truncated. show original

How to get a preview of fragments

Enonic version: 6.11 OS: Centos How should we get a preview of fragments in content studio with css applied on them As of now, we see the them without any css changes applied to them I have tried creating template template but could not find any content type to be added in *Supports dropdown

Enonic version: 6.11
OS: Centos
How should we get a preview of fragments in content studio with css applied on them
As of now, we see the them without any css changes applied to them
I have tried creating template template but could not find any content type to be added in *Supports dropdown