ShowTable of Contents Prerequisites
You should be familiar with Web Experience Factory and Data Layouts and be able to create and run models.
Introduction to Using the new Multichannel Responsive Data Layouts provided with the Feature Pack for Web Experience Factory 8
In this article we will talk about the new data layouts that we created for this feature pack. These layouts are designed to work with the new responsive theme for portal 8.0.0.1 and the new Web Experience Factory theme defined in this feature pack. Some of these layouts require the new portal 8.0.0.1 theme, but others are designed for stand alone use as well and can be used on any portal theme. These layouts improve performance, improve ease of use and are easier to customize than the existing data layouts that we provide.
The performance enhancements of the new data layouts are achieved by including styles used in common layouts to our themes base style sheet. This improves the loading time of the portal pages by having fewer server requests for the style sheet files. The themes base style sheet is found here factory\html_templates\fp80\fp80_uitheme.css.
The Data Layout builder uses the selected style sheet (via selection by Theme or directly in the Data Layout builder) to associate a class name with an HTML wrapper element for each layout, to enable CSS selectors to identify a given layout and style association. In order to allow unique style sheet and selector class selection in the Data Layout builder, while reducing the number of style sheet requests, the Data Layout builder (as of Web Experience Factory 8.0.0.2) has been enhanced to allow selection of a pseudo-stylesheet where the filename ends in "_uitheme.css" which allows for association of a set of styles with a given layout, without triggering an additional HTTP request for that set of styles. This new implicit mechanism in Data Layout builder version 8.0.0.2 is intended for use with the Feature Pack for 8.0 UI themes' base stylesheet, which includes all of the styles for the most commonly used layouts, uniquely identified by a root classname association with each layout and _uitheme.css stylesheet pair.
For example, with the Web Experience Factory 8.0 (and earlier) Data Layout builder,
Selecting Data Layout "My Thumbnail List" with stylesheet "myThumbnail2ColumnList.css" would result in:
- an association between the root css class for that selected stylesheet (defined in the layout metadata) being added to the generated layout list in the page
- a stylesheet link reference for myThumbnail2ColumnList.css being added to the page, and thus to the http requests for the overall portlet page.
With the version 8.0.0.2 Data Layout builder,
Selecting Data layout "Thumbnail Multiline List (Feature Pack for 8.0)" and stylesheet .../fp80_thumbnail_list_medium_uitheme.css results in
- an association between the root css class for that selected stylesheet (defined in the layout's metadata) being added to the generated list in the page
- No additional stylesheets added to the page and thus no additional http requests. Because the selected stylesheet ends in _uitheme.css, it is assumed by the builder that the actual styles will be defined in the primary stylesheet defined for the UI Theme associated with the model and webapp (fp80_uitheme.css for the themes in this feature pack).
While this implicit mechanism may not seem immediately and obviously intuitive, it was necessary to include it in the Web Experience Factory 8.0.0.2 fixpack (where new builder features, inputs and associated labels/help are not typically provided) as a performance fix, to allow for unique Data Layout stylesheet selection without incurring additional http requests. Using the new Multichannel wizard, Themes and Data Layouts provided in the feature pack should not require a complete understanding of the above implicit mechanism; This description is provided primarily as an aid to understanding how your application is using the artifacts and mechanisms provided with Data Layout version 8.0.0.2 and why (due to performance reasons) you may not see a particular _uitheme.css stylesheet show up in a network trace or browser debugger session when using this feature, despite being selected in the Data Layout builder UI.
The most common way to add these styles that are needed by these data layouts is to add the new feature pack themes that we defined to your models. Another way that you can add these styles is by defining your own theme with a base style sheet defined in it and import the related styles from our style sheets into your own style sheet. Of course you can always create your own style sheet and type the name into the style sheet input of the Data Layout builder, defining all the styles you need for your layout of this layout template. An example of this is found here samples\layouts\alt_method_examples\Thumbnail_custom_stylesheet.model. Another way to include the styles if you are not using our theme, is to add a style sheet builder that references the style sheet file name ending in uitheme.css. In this case the styles that are needed are defined by this style sheet, but the Data Layout builder does not add the style sheet. However since you added your own style sheet builder and reference this style sheet the styles are added to a page. This technique also allows you to use these new Data Layouts in projects that do not contain the feature pack but into which you copy the Data Layouts. An example of this can be found here samples\layouts\alt_method_examples\Thumbnail_small_no_theme_added_stylesheet.model.
So if the styles of the uitheme.css files are included in the theme file why do multiple style sheets that have this extension in some data layouts? This is done because of a feature that the Data Layout Builder supports where each style sheet in the picker has a corresponding root class that is set on the layout container. It is these root classes that are used within the css selectors to create unique selectors for specific layouts. For example in the Thumbnail Multi-Line List (Feature Pack for 8.0) layout there are separate style sheet choices for a list that contains a small thumbnail and a list that contains a medium one. These choices map to different root classes fp80_SmallThumbnailList and fp80_MediumThumbnailList. Selecting one of these classes causes the data layout builder to set the class of the root container to the correct class and then in our style sheet we set different styles that change the layout.
.fp80_SmallThumbnailList .thumbnailListItem{min-height:61px}
.fp80_MediumThumbnailList .thumbnailListItem{min-height:75px}
To help limit the number of style sheet combinations for these layouts, new target areas are added to these layouts. These targets areas allow you to set styles and classes on the container elements of the layout, which allows you to set styles that affect the layouts themselves. The top container containerLayoutStyles(clStyles) is the root node of the entire container and can be used to set styles and classes that completely change the look and feel of a layout.
Container Layouts
For example the Thumbnail Multi-Line List (Feature Pack for 8.0) layout provides three cl (container Layout) styles
- clArrow - adds an arrow to the middle of the last column for each list item. This is commonly used for mobile applications.
- clSingleRow causes the layout to only use the center-middle data values from the center column
- clCenterWrap causes the center-middle data value to wrap and support multiple lines of text.
These styles if any are set for a specific layout are found at bottom of the style picker.
If you set these styles on the root container it adds this style class to the css selectors, which causes the layout to vary. You can use more than one of these styles at a time. For example if you want the arrow and the center wrap, you add both of these to the target. Note that these style targets are meant for only setting the style field. If you set the value field of these, you can get invalid results. Extra styles can affect multiple containers with in a layout, and each layout can have their own clStyles which will only be listed within that data layout.
You can also use the containerLayoutStyles(clStyles) target to add your own root style for style based layouts to our layout. For example if you want to change our thumbnail multi-line list to only have two columns you could set the style to your own style name clTwoColumn and then, in your own style sheet define styles such as:
.clTwoColum .wpfCenterContainer{width: 70%;}
.clTwoColum .wpfRightContainer{display:none;}
This hides the right column and expands the center to fill the width of the page. An example of this can be found here samples\layouts\alt_method_examples\Thumbnail_custom_stylesheet.model.
The other containers of the layout are also exposed so that you can set styles to them. The targets names that end in _styles are added, so that you can set styles to the individual containers. For example in our Multi-Line List (Feature Pack for 8.0)layout there are default layouts for different 3 column layouts. If you want to have the column widths different from the default settings, set the widths that you want. For a three column layout with the left column width specified as 20%, the middle column width as 50% and the right column to be the remainder, set the styles as follows:
Another use for these containers is to set default styles for child elements, If you set the font size, face and weight on the container, child elements inherit them. These targets can also be used to make these layouts responsive. You can use some of the new style classes that are included in the feature pack theme to hide columns or items based on a device or a specific theme column. Some examples of how this could be used will be included in the info for specific layouts.
These new layouts offer these new style layouts, but you can also use this technique in your own data layouts. The way to do this is by adding data-target-exact to the containers that you want to expose in the builder. One thing to note is that in some cases you might have two targets defined in the same element in your layout. You would do this if you want the user to be able to target the container which is what the data-target-exact target will do and also have data-target elements that are created as children of the element allowing you to put multiple items in the same target. For example in the multi-line list template we have an element "left_top" class= "wpfListColumnItem wpfListTopItem" data-target-exact= "left_top_styles"
So with all the new style targets and styles how do you set multiple style classes? The easiest way to set multiple classes to the style targets is to insert a new row in the list widget by right clicking and choosing Insert.
From the drop down list, select the name list and style container to which you want to add another class, to
and add the style to the target
These classes are added to the container class attribute in the order they are in the input list.
Some of the layouts in the feature pack are dependent on portal themes and the content catalog templates. In this case they also use the uitheme.css extension but the styles are not defined in our project at all. These data layouts depend on the styles being defined on the portal page already. For the Content Template Catalog Style List (Feature Pack for 8.0) the /factory/data_layout_templates/fp80_ctc_list_using_styles_from_ctc_uitheme.css style sheet has no styles defined in it. For the Image with overlayed text (Feature Pack for 8.0)the /fp80_image_overlaid_text_using_ctc_styles_uitheme.css style sheet has no styles defined. A portlet using these data layouts and style sheets must be placed on a portal page that was created using the WCM Content Template Catalog which includes the support for the portal responsive theme.
Optional Data Layout styles
Each data layout template includes a list of optional style classes that can be assigned to the fields. These style classes are defined in the base theme style sheet factory\html_templates\fp80\fp80_uitheme.css. If you are not using this style sheet in your model then you can add these styles classes to a page using a style sheet builder and reference this file factory\data_layout_templates\fp80_base_styles.css.
Here are the styles classes.
The image classes sizes match the existing image sizes. These values are not always displayed in the style chooser. If a data layout such as the thumbnail has specific sizes built in these sizes are not shown in the chooser. But they are contained in the theme file and can be entered manually.
.wpfImageExtraExtraSmall{width:16px;height:16px;}
.wpfImageExtraSmall{width:30px;height:30px;}
.wpfImageSmall{width:50px;height:50px;}
.wpfImageMedium{width:65px;height:65px;}
.wpfImageLarge{width:80px;height:80px;}
The wpfImageXLarge style class is more flexible, and handles images that are not square. Instead of setting a specific size min and max values can be set.
.wpfImageXLarge{
min-width:100px!important;
max-width:200px!important;
min-height:100px!important;
max-height:200px!important;
}
This style class is set on the container of the image not the image itself, if the border is to large for the images then you should set the container size to better fit your image. In some cases it will work on the image but wasn't designed for that.
.wpfCtcImageContainerBorder{
border: 2px solid white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
margin-left: 2px;
}
This style class is set on the container that you want text to wrap in.
.wpfWrapContainer{
text-overflow:visible!important;
white-space:normal!important;
overflow:visible!important;
padding:2px !important;
line-height:normal;
}
These layout style classes add padding around images in layout lists.
.wef_datalayout_list .clImagePadding5 img{padding:5px;}
.wef_datalayout_list .clImagePadding10 img{padding:10px;}
The text style classes match the existing sizes.
.wpfTitleText{font-weight:bold}
.wpfLabelText{font-weight:bold;padding-right:3px}
.wpfLargeTitleText, .wpfLargeText{font-weight:bold;font-size:1.2em}
.wpfItalicText{font-style:italic}
.wpfSmallText{font-weight:lighter;font-size:.8em}
.wpfSmallItalicText{font-style:italic;font-weight:lighter;font-size:.8em}
These layout style classes match existing layout classes.
.wpfPaddingRight{padding-right:3px}
.wpfSpaceAfter:after{content: '\00a0'} /* adds a non-breaking space */
This style class hides elements or containers. You can add a field value to a page so you can use javascript to add it but not displayed. On multiple column layouts you can hide an entire column. But these classes do not add space to other containers, if you want to do that you you would need to create your own style classes and set them to the appropriate containers or create your own container Layout that you reference, see example custom_container_layout model in the samples .
.hide{display:none}
These style classes hide different elements based on the portal column in which they reside. For example if you want to hide a column in a narrow section of a portal layout use the hideThemeThin class. But these classes do not add space to other containers, if you want to do that you you would need to create your own style classes and set them to the appropriate containers or create your own container Layout that you reference, see example custom_container_layout model in the samples . These classes are dependent on the portal responsive theme.
.wpthemeThin .hideThemeThin,.wpthemeNarrow .hideThemeNarrow,.wpthemeMedium .hideThemeMedium, .wpthemeWide .hideThemeWide{display:none}
These style classes are defined to allow you to hide values depending on the device that you are using. But these classes do not add space to other containers, if you want to do that you you would need to create your own style classes and set them to the appropriate containers or create your own container Layout that you reference, see example custom_container_layout model in the samples .
/* Phone (portrait) */
@media only screen and (max-width: 320px){
.hidePhonePortrait{display:none}
}
/* Phone (landscape) */
@media only screen and (min-width: 321px){
.hidePhoneLandscape{display:none}
}
/* tablet (landscape) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
.hideTabletPortrait{display:none}
}
/* tablet (portrait) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){
.hideTabletLandscape{display:none}
}
This style class ensures that a target utilizes space. For example you have a multi column list layout and you want a column/row to be blank without the cell bellow floating up to fill the space. Use this class. Using the existing data layout you can add a space to the target. From the user interface you cannot tell the difference between a space and a blank target.
.wpfFixed1EMItemHeight{min-height:1em;}
Data Layout descriptions
Thumbnail Multi-Line List (Feature Pack for 8.0)
This layout is used for lists that contain thumbnails. There are four base layouts that you select by selecting a style sheet. These style sheets control the size of the image and the height of the list item. The layout is designed to be responsive, when used on a phone in the portrait orientation the values in the right column are hidden and the center columns are expanded to use that space. The theme setting when using the new feature pack theme, will use a small thumbnail layout when on a phone and a medium thumbnail layout in all other cases. There are alternate layouts that you create by setting the container_layout style on the container layout.
The four base layouts for this data layout are based on Image size. The difference between this version of the layout and the previous version is that the size of the image is controlled by selecting a style sheet. In this way if the image is larger the other layout components are sized correctly to handle the size difference of the image. Another change from the previous version is that not all layouts are controlled by selecting a specific style sheet. In the earlier version you would select a different style sheet for functions such as specifying an arrow or setting the center container to be word wrapped. In this version we defined clStyles (content layout styles) that handle reducing the number of combinations that must be listed as different style sheet choices. This layout also handles having only a single row of data using one of these clStyles.
- clArrowContainer - This is used to display an arrow in the center of the right column, which indicates that selecting this item will navigate to a new page.
- clCenterWrapContainer - This is used to make the center middle item word wrap the data instead of truncating it.
- clSingleRowContainer - This is used to make the layout display only data in the middle row, making the layout appear as if it is a single row of data.
Here are examples of some of these container styles and layout combinations.
The sample models for these examples can be found here samples\layouts\thumbnaillist.
This is an example of the list using the multi-line thumbnail list template using the small thumbnail layout style sheet. In these examples, the wpfCtcImageContainerBorder style class is used on the image containers to make the images have a border like the images in the ctc content lists.
The following are examples of the multi-line thumbnail list template, the images at different sizes based on the style sheet that was selected.
Small Medium Large Extra Large
   
The following is an example of the multi-line thumbnail list template using a small thumbnail style sheet and setting the clArrowContainer container style. This adds an arrow to the middle of the right column to indicate there is more data.
The following is an example of the multi-line thumbnail list template using a medium thumbnail style sheet and setting the clCenterWrapContainer container style. This will cause the text in the center middle target to wrap.
The following is an example of the multi-line thumbnail list template using a small thumbnail style sheet and setting the clSingleRowContainer container style. This causes only the center row of the data layout to be displayed.
The following is an example of the multi-line thumbnail list template using a medium thumbnail style sheet and setting the clCenterWrapContainer and clArrowContainer container styles. You can use multiple container styles on your layouts and they will both be applied. You can also create your own container layouts in a style sheet and also combine them with our container styles.
The following is an example of the multi-line thumbnail list template using with a custom responsive style sheet added to model to enhance the base data layout styles. These styles were added to the head of the page which causes the thumbnail column to be hidden and the other columns to take over the space when placed in the portals narrow column in their responsive theme. This example can be found here samples\layouts\thumbnaillist\Thumbnail_custom_hide_themenarrow.model.
.wpthemeNarrow .fp80_ThumbnailList .wpfCenterContainer{width:auto !important} This makes the center container be as wide as needed.
.wpthemeNarrow .fp80_SmallThumbnailList .wpfCenter{max-width:250px} These styles make sure that the long description field will wrap at a reasonable width
.wpthemeNarrow .fp80_MediumThumbnailList .wpfCenter{max-width:225px}
.wpthemeNarrow .fp80_LargeThumbnailList .wpfCenter{max-width:210px}
.wpthemeNarrow .fp80_ExtraLargeThumbnailList .wpfCenter{max-width:190px}
.wpthemeNarrow .fp80_ThumbnailList .wpfLeft{display:none} This hides the thumbnail column
.wpthemeNarrow .fp80_ThumbnailList .wpfRightContainer{width:20%} This adds some space to the right hand column so more text will fit
wpthemeWide wpThemeNarrow
There are many way to use the data layout targets that end with _style to provide alternate layouts with this layout. You could hide any of the columns completely giving you a two column layout or for some responsive UI, you could hide columns for specific devices or portal theme columns. You could also vary which fields are displayed in specific columns using the hide styles to hide the value within the column not the entire column.
Multi-Line List (Feature Pack for 8.0)
This template generates a list in which each list item can contains three columns and three rows of data. You can use this layout to convert a grid table style to a list layout. There are eight base layouts that are set by selecting a style sheet. These include layouts that vary from 1-3 columns and specify different column sizes. The theme setting when using the new feature pack theme, will use the three column equal layout.
The sample models for these examples can be found here samples\layouts\multiline.
The eight base layouts for this data layout are designed for you to select a number of columns and the configurations of those columns. These layouts allow you to use this layout with one to three columns of data, layout the columns similar to portal page layouts and have 3X3 and 3X2 grid layouts of data. This layout has some support for images. This layout displays only targets that have data, so if you only set a value to the left top the center middle and the right bottom all data is display on the same row. The grid layouts are different in that they reserve space for all the targets so, for example, using the same targets in a grid style result in a layout with three rows of data and data displayed in three columns and rows. There is also a style you can set wpfFixed1EMItemHeightthat displays the target with a fixed height. If you want a different height you can set the targets style to a specific height using this type of syntax padding-right:1em;.
The following is an example of a 1 column multi-line list. The style class wpfWrapContainer is set to the left bottom style target to make the description wrap. Note that even thought the styles sheet limits the targets displayed to one column, but the targets for all columns are displayed in the list input.
The following is an example of a 2 column equal multi-line list. The style class wpfWrapContainer is set to the center middle style target to make the description wrap.
The following is an example of a 2 column left larger multi-line list. The style class wpfWrapContainer is set to the center middle style target to make the description wrap.
The following is an example of a 2 column right larger multi-line list. The style class wpfWrapContainer is set to the center middle style target to make the description wrap.
The following is an example of a 3 column equal multi-line list. In the second entry in the list, the middle top target is empty so the description floats to the top. The style class wpfWrapContainer is set to the center middle style target to make the description wrap.
The following is an example of a 3 column center multi-line list. The style class wpfWrapContainer is set to the center middle style target to make the description wrap.
The following is an example of a 3x2 grid multi-line list. In this case the space is reserved for every cell so no extra styles are needed to retain spaces.
The following is an example of a 3x3 grid multi-line list. In this case, space is reserved for every cell, so no styles are needed to retain spaces. If you want to remove the extra area at the bottom of an item, hide the left bottom target by setting the hide class to this target. This is because the height of the image in the left middle target makes this column longer than the center and right columns.
The following is an example of a 3 column center multi-line list. With images in the list. The clImagePadding5 container style was added to make sure that all images had padding around them. With the thumbnail list you are always limited to one image in the left column, the multi-line list allows you to put images in any of the targets. The standard settings for image sizes are also available as style choices.
There are many way to use the data layout targets that end with _style to provide alternate layouts with this layout. For some responsive UI, you could hide columns for specific devices or portal theme columns. You could also vary which fields are displayed in specific columns using the hide styles to hide the value within the column not the entire column.
Content Template Catalog Style List (Feature Pack for 8.0)
This layout is used for lists that look like index pages from the content template catalog. There are two base layouts that are set by selecting a style sheet. The ctc list with styles style sheet uses styles defined in our style sheets that match the original styles defined by ctc and can be used on portal pages or stand alone. The ctc list using styles from ctc style sheet has no styles defined in our style sheets. It needs the portlet to be placed on a portal page that has a ctc content index page on it, and it uses the styles defined in ctc. The theme setting when using the new feature pack theme, will use the CTC's styles by default.
The sample models for these examples can be found here samples\layouts\ctc.
The image borders for the ctc layouts are placed on the container of the image. This makes all the image frames a consistent size. If your images are not the size of the fame you could either set the width of the image container by setting a width on the image_column_styles target or set the image width which will cause the image to scale to fit to the desired size. Both of these work it depends on the images you are using and the look you want, will let you choose which method is better for you.
The following is an example of a CTC list with styles. Setting a style for the minimum image width is not necessary, but improves the overall look with these images.
The following is an example of a CTC list with out styles. This portlet must be placed on a portal page that has been created with a CTC layout. Setting a style for the minimum image width is not necessary, but improves the overall look with these images .
There are many way to use the data layout targets that end with _style to provide alternate layouts with this layout. You could hide the image column completely giving you a single column layout with just the text or for some responsive UI, you could hide the image column for specific devices or portal theme columns. You could also vary which fields are displayed in specific columns using the hide styles to hide the value within the column not the entire column.
This is an example of the CTC list layout with the image_column_styles target style set to hidden. The model can be found here samples\layouts\ctc\Ctc_with_hidden_image.model.
Image with overlaid text (Feature Pack for 8.0)
This layout is used for image gallery lists that look like ones from the content template catalog. There are two base layouts that are set by selecting a style sheet. The text with styles style sheet uses styles defined in our style sheets that match the original styles defined by ctc and can be used on portal pages or stand alone. The using ctc styles style sheet needs the portlet to be placed on a portal page that has the ctc style sheet on the page. The theme setting when using the new feature pack theme, will use the ctc's styles by default.
The sample models for these examples can be found here samples\layouts\Imagewithoverlaidtext.
The following is an example of a Image with overlaid text list using ctc styles. This portlet has to be paced on a portal page that has been created with a CTC layout. There are no style classes defined in any of our style sheets for this layout/ style sheet combination. In this example I also set a style for the minimum image width and height to 100%, this isn't necessary, but improves the overall look of this layout with these images.
The following is an example of a Image with overlaid text list with styles. With this layout/ style sheet combination you can use this on a portal page or stand alone. In this example I also set a style for the minimum image width and height to 100%, this isn't necessary, but improves the overall look of this layout with these images.
Responsive Thumbnails with Info (Feature Pack for 8.0)
This layout is used for horizontal lists of items that have an image and information text. The items are displayed horizontally until the item doesn't fit and it is then wrapped to the next line and continues until the items are all displayed. The layouts are either with the image above or the info on the left or the right. All the layouts Responsive Thumbnail with info list are designed to layout as a narrow list where the images are above the info when placed in a thin portal container. There are alternate container layouts that you can select by setting a clStyle the container layout. The alternate layouts allow 2, 3, 4 or 5 items per line. The theme setting when using the new feature pack theme, will use the layout that displays the image above the info.
The following is an example of a Responsive Thumbnail with info list takes a combination of images and information and display. The items are displayed horizontally with each item floating after the previous. if any of the items are not consistent in height the items will not wrap as complete rows to handle this you can set the height of the containers.
The sample models for these examples can be found here samples\layouts\responsivethumbnail.
The following is an example of a Responsive Thumbnail with info list using the thumbnail info style sheet. This causes the images to be displayed above the info. In this example styles were set on the images to make them all 220px by 220px. The info section also had it's height set to be 125px. This was done so the items will a uniform size that will cause them to be displayed as rows and columns. If this isn't so the images will "float " into an unknown pattern.
This is an example of a Responsive Thumbnail with info list using the thumbnail info right style sheet. This causes the images to be displayed to the left of the info. The style class wpfImageMedium was set on the images to make the images a consistent size. The info section was set to have a height of 50px and to made sure text that didn't fit would not be displayed by setting the overflow style to hidden. The link right style was also set to have a maximum width of 70px and to have text that didn't fit within the 70 px be hidden and followed by ellipses. These styles were set to make all items a uniform height so when the items were "floated: they would lay out like a grid.
The following is an example of a Responsive Thumbnail with info list using the thumbnail info left style sheet. The styles in this example are set to the same as the previous example.
The following is an example of a Responsive Thumbnail with info list using the thumbnail info right style sheet. Set the container layout style to cl3PerLin. The styles in this example are set to the same as the previous example.
The following is an example of a Responsive Thumbnail with info list using the thumbnail info right style sheet. Set the container layout style to cl4PerLine. The styles in this example are set to the same as the previous example.
The following is an example of a Responsive Thumbnail with info list using the thumbnail info right style sheet. Set the container layout style to cl5PerLine. The styles in this example are set to the same as the previous example.
The following is an example of a Responsive Thumbnail with info list using the thumbnail info right style sheet. Set the container layout style to clWidth300. The styles in this example are set to the same as the previous example.
The following is an example of a Responsive info list using the thumbnail info right style sheet. All the layouts Responsive Thumbnail with info list are designed to layout as a narrow list when placed in a thin portal container. The styles in this example are set to the same as the previous example.
Normal Layout Narrow Layout
There are many way to use the data layout targets that end with _style to provide alternate layouts with this layout. This layout includes some examples but you could easily use the same pattern to create you own layouts varying the image sizes and container positions depending on the device or portal theme column.
http://www-10.lotus.com/ldd/pfwiki.nsf/dx/List_Layout_UI_Patterns_
http://www-10.lotus.com/ldd/pfwiki.nsf/xpViewCategories.xsp?lookupName=Web%20Experience%20Factory%208%20Documentation |