Advanced Tags

In the summer of 2014 we introduced a number of new tags to Serckit that allow for more advanced page layouts. There are two noteworthy caveats:

• Many of these tags are sensitive to the underlying html they are intermixed with. You'll need to be comfortable working in the HTML View to use them effectively this.
• These tags do not work universally across all SERC-hosted sites. Older sites may not yet be retrofitted to take advantage of them. In general consult with your web support person before diving in too deep. In most cases they can work with you to put in the desired advanced tags.

Glorified Links

A number of the new tags just provide a new way to make a link with more visual impact. Linkbars and imageblocks both provide a way to combine an image and some text into a single link:

Using [linkbar]

[linkbar 123 left http://google.com efefef]Text in the linkbar[end linkbar]

The linkbar tag provides a page-wide colored bar with an image (the id provide in the '123' spot) along the left edge and text filling the rest. The background color can optionally be changed from the default by providing a 6 digit hexidecimal representation of the RGB color at the end of the tag. To work most effectively at a wide variety of screen sizes the image you provide should be more than twice as wide as it is tall (5:2 is best) and should work visually even if the right side of the image is cropped off.

Using [imageblock]

[imageblock 123 bottom medium http://google.com efefef]Text in the imageblock[end imageblock] 

The imageblock tag has a similar syntax and behavior. It presents a rectangular block combining the image and text; all acting as a single link. The 'bottom' option is appropriate if you have very little text: the text is layed over the top of the bottom of the image. Changing 'bottom' to 'tall' will make a taller block where more room is provided for the text and the image sits entirely above the text. Each of these options is available in a small, medium and large variant. You can omit the image id number and the tag will make use of whatever image is associated with the page to which the block points.

Note for each of these tags it's possible to insert other formatting (headings, bold) within the text. Of course, since the entire bar or block acts as a link, one can't insert other links within the text.

The divclass Tag

A number of the new features rely on using variants of a single new tag: the divclass tag:

[divclass 'genericbehavior']

This tag, with a specific behavior inside the single quotes, is put at the start of a section of the page to invoke that behavior in that section of the page. The standard [end] tag must be placed at the end of the section. In most cases it's possible to nest multiple divclass tags (make sure you have a matching number of 'end' tags) and also in some cases to specify more than one behavior within the single quotes of a single divclass tag. On a complicated page you may end up with a confusing collection of [end] tags. You can label them in any way you like (e.g. with the same label as the matching divclass) in single quotes at the end of the tag: [end 'mylabel']. This doesn't change the behavior of the end tag, but may help you keep track of which one completes which divclass tag.

Flowing Text Across Multiple Columns

Sometimes you have a long vertical list or run of text that would make better use of the page if it were to flow horizontally into multiple columns. The [divclass 'twocolumn'] behavior will cause the text to flow evenly (responding to changes in page width) across two columns. Note that there is no way to control the exact column breaking behavior (e.g. to make sure a heading isn't separated from its associated text) so this tag isn't useful for larger sections of a page with lots of internal structure. It's best for short lists. There is also a threecolumn variant who's behavior is what you might expect.

Multiple Columns with Pre-defined Content and Equal Height

In some situations, like a website front page, it may be advantageous to split your content into several columns. The following tags will allow you to do in a way that creates columns of equal height (leaving empty space at the bottom of columns to match the height of the tallest column). They all involved a series of nested divclass tags intermingled with the content for the column:

[divclass 'twocolumn-container'][divclass 'column50']

Content of first column

[end]

[divclass 'column50']

Content of second column

[end]

[end 'container']

This particular variant creates two columns of equal width. It is wrapped in a container divclass. Then each individual column content is wrapped in a divclass that indicates a width of 50%--both a starting tag and an ending tag. There are several variants available:

• twocolumngm-container used in place of 'twocolumn-container' and column classes of columngm1 and columngm2 in the example above results in the first column being wider than the second (with widths determined by the golden mean).
• threecolumn-container along with column33 (to indicate each column is 33% of the total width) can be used to get a three column layout.
• fourcolumn-container along with column25 gives you four columns.

All of these layouts will collapse to a single column at narrow screen widths. However, depending on the specific content in your columns, it may be beneficial to vary the layout at widths other than the standard narrow width, which will require custom changes to the site chrome.

Making Space for Your Content

If you find your content running up against edge and needing more room to breathe these tags can be helpful. They'll be especially useful on front pages:

[divclass 'hero200']

This creates a fixed height block 200 pixels high. This is useful for a so-called 'hero' block at the top of a front page which might include context boxes, links bars and such. Because it's a fixed height you need to know exactly how tall your content will be (across a full-range of screen widths) for it to be useful. hero300 and hero400 are also available if you need more room.

[divclass 'padding-box2']

This will put some extra white space between the content within and any surrounding area of the page. This particular one sets aside 2% of the available space as whitespace. More space is available by changing the trailing '2' to 3,6 or 10.

On a Carousel

The [carousel] tag creates a 'rotatable' view of the elements placed within it. Normally these would be a set of similarly sized divclasses, imageblocks or the like. It must be closed with an [end] tag. The addition of the flag 'auto' will cause the carousel to automatically switch contents every few seconds: [carousel auto]. The carousel can also be set to start on a random content element with the 'random' flag (which should be after the auto flag if used: [carousel random]. There are additional options exemplified by the complete example [carousel auto min2 max7 width200 margin10 random nocontrols pageronly]. The min and max numbers control how many elements are shown at a time (depending screen width), width and margin are fixed pixel measurements for the width and left/right margins for each element, nocontrols completely hides the carousel controls (so users can't change anything) and pageronly displays just the page-changing controls on the bottom of the carousel. The min/max/width/margin options only work if all are used.

ImageBanners...

The imagebanner is a feature designed for hero blocks on front pages. It spreads a large image across the background of a section of a page inside (over) which you can add whatever content is appropriate. It's intended to stretch the full width of the page and in most cases an image 4 times wider than tall is used. If the image doesn't entirely cover the width of the page it will automatically be faded into a background color on either the right or left edge. The banner can either be set to a height that matches the height of the underlying image (using the 'ownheight' option as below), or be forced to fit to the height of the containing block (e.g. one of the hero divclasses above) using the 'containerheight' alternative. The tag below specifies the image id and the side and hex color of the background to fade to. An identical tag with 'end' instead of 'start' must be used to close off the imagebanner.

Feature added November 2015:
You can now also use the keywords "center" and "focus" to align the background image in your banner. The keyword "center" will try to put the center of the image in the center of the browser window, and "focus" will align an image's focal point (settable when editing the image) at the center of the browser window. If an image's focal point is not set, imagebanner will default to the center alignment.

[imagebanner 40861 right 4d6e8a ownheight start]
Text and images that overlap the imagebanner background go here
[imagebanner 40861 right 4d6e8a ownheight end]

ImageZoom

The [imagezoom] tag can be simple, with a single image in it:

[imagezoom 'Zoom in on this!' start]
[zoomimage 107600]
[imagezoom end] 

Which displays like so:

Or more complex, with multiple images included:

[imagezoom collection maxH-400 rows-2 'A collection in two rows' start]
[zoomimage 65144 'David']
[zoomimage 54997 'Sean']
[zoomimage 57643 'Krista']
[zoomimage 90314 'John']
[imagezoom end] 

Which displays like so:

And here are a couple more examples that show other optional flags: