Transformation strategy for magazine styled tile layout

Yang Wen asked on June 24, 2016 01:06

What is the best method to render this type of layout using a repeater? link text Assuming I've developed this tiled layout via HTML + CSS - The challenge I'm faced here is how to assign each outputted page record to a different CSS class, so they arrange as indicated in the screenshot?

Do I have to do some index-based logic to correlate page index to css class name?

Image Text

transformation

Correct Answer

Brenden Kehren answered on June 24, 2016 04:43

They won't have to select a physical class, make the dropdown more informative and have your display value show "Small", "Medium", "Large", etc. while the values are your css classes.

If you want them specific and don't want to allow that selection then you're essentially hard coding the transformation to state:

<%# IfTrue(DataItemIndex == 0, "sm-tile") %><%# IfTrue(DataItemIndex == 1, "md-tile") %>

0 votesVote for this answer Unmark Correct answer

Recent Answers

Brenden Kehren answered on June 24, 2016 01:12

Use a custom page type and add those properties to it so the user can select it. Then use a repeater to display those items. In the transformation render those field values into their proper places. i.e.: class='<%# Eval("FieldName") %>'

0 votesVote for this answer Mark as a Correct answer

Yang Wen answered on June 24, 2016 01:16 (last edited on June 24, 2016 01:23)

I should also mention that I don't want to force the content editor to make decision on which CSS classes to use for a given page.

Say my layout has 6 tiles arranged in this fashion. I only wish for the top 6 pages returned by the repeater/viewer to be displayed in this tile layout. Say I have a set of CSS classes to provide this layout: sm-tile, md-tile, lg-tile. 1st page get assigned class="sm-tile", 2nd page gets assigned class="lg-tile", and so on...

The transformation logic then will assigned the css class during page generation, based on the index position of the page.... Is this the best way of doing this?

0 votesVote for this answer Mark as a Correct answer

Yang Wen answered on June 24, 2016 15:44

Ahh! DataItemIndex That's the variable I need. Thanks!

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on June 24, 2016 16:00

When you are creating a transformation or editing one, there is a link just outside the code box, click it. It takes you to this documentation about transformation methods which are already built into Kentico.

1 votesVote for this answer Mark as a Correct answer