Page Layouts and Sections

162 views
Skip to first unread message

Ignacio Giri

unread,
Mar 1, 2016, 10:09:48 AM3/1/16
to Scroll Viewport Developers
Hello,

I need your help to come up with a smart and creative way to wrap sections within Page Layouts. I'm using Foundation to override the grid. And it's working fine! But I would really like to be able to have different classes for each section. Since I can't do that within Confluence, I was wondering if its possible to scan the type of content of each section and then assign a certain class.

#* @vtlvariable name="grids" type="com.k15t.scroll.viewport.model.render.content.layouts.GridHelper" *#
#* @vtlvariable name="pageLayout" type="com.k15t.scroll.viewport.model.render.content.layouts.PageLayout" *#

$grids.setup(
    {
        "single": ["large-offset-3 large-10"],
        "three_equal": ["large-offset-3 large-4", "large-4", "large-4"],
        "three_with_sidebars": ["large-offset-3", "", ""],
        "two_equal": ["large-offset-3 large-5", "large-5"],
        "two_left_sidebar": ["large-offset-3 large-4", "large-8"],
        "two_right_sidebar": ["large-offset-3 large-8", "large-4"]
    }
)

#foreach($pageLayoutSection in $pageLayout.sections)

  <div class="section"> //I'd like to add a class here depending of content

    <div class="row">

      #foreach($cell in $pageLayoutSection.cells)
        #if($cell.content != "")
          #set( $class = $grids.get($pageLayoutSection.type, $velocityCount) )
          <div class="columns $class">
              $cell.content
          </div>
        #end
      #end

    </div>

  </div>

#end

I have tried with Columns/Sections macros, but I have less control of the layout and still can't assign classes for each section.

Any ideas?

Thanks,

Stefan Kleineikenscheidt (K15t Software)

unread,
Mar 2, 2016, 10:26:23 AM3/2/16
to scroll-vi...@googlegroups.com

Hi Ignacio,

we've come across this ourselves, and there are different approaches to this.

Background: The main underlying issue with page layouts is that the Confluence editor does not allow page authors to attach metadata to the page layout sections.

So, in our projects we have used two different approaches:

1. Create two (or more) different templates and then use page property named 'templateName' on each Confluence to define which template should be used. In each template you reference different pagelayout.vm that renders different classnames. This approach is only so flexibel, but makes it simple for your authors.

This is how it looks like in the editor:
Inline image 2
In this case Viewport will try to use the template template/common/page/simple-text.vm (instead of page.vm).

2. The other option is to use multiple page properties that define a list of classNames and assign them in the layouts.vm:

For example:
Inline image 3

In the pagelayouts.vm you can access these properties as follows:
Inline image 4


Please note the exclamation mark in the definition: $!page.properties.get("sectionClasses${velocityCount}")  This will make velocity output an empty string, if your authors have not defined the "sectionClassesN" properties properly.

Let me know if that helped.

Cheers,
-Stefan







--
You received this message because you are subscribed to the Google Groups "Scroll Viewport Developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to scroll-viewport...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/scroll-viewport-dev/4d4c6242-b5b1-4ec4-bf81-0a28d0e18c9f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Ignacio Giri

unread,
Mar 7, 2016, 10:07:59 AM3/7/16
to Scroll Viewport Developers
Yes, I think I can get away with option 2. I was thinking something similar. It does work, but it feels prehistoric, like Tim Berners-Lee in 1989. But its alright for now. Thanks!



To unsubscribe from this group and stop receiving emails from it, send an email to scroll-viewport-dev+unsub...@googlegroups.com.

Stefan Kleineikenscheidt (K15t Software)

unread,
Mar 10, 2016, 3:10:28 AM3/10/16
to scroll-vi...@googlegroups.com

I agree.

We've played with different options to attach properties to the page layout / sections / cells, but the Confluence editor (and even storage format) does not allow a simple-to-use solution to this.


To unsubscribe from this group and stop receiving emails from it, send an email to scroll-viewport...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Scroll Viewport Developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to scroll-viewport...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/scroll-viewport-dev/d8a9032c-16ca-4ca8-b775-34fac91d8bdd%40googlegroups.com.

Amit Kapoor

unread,
Mar 16, 2020, 8:45:01 AM3/16/20
to Scroll Viewport Developers

Hi Guys,

Can you throw more light on what defines the sections and this implementation?

-Amit
Reply all
Reply to author
Forward
0 new messages