How do display a CMS collection in an ASP.net page using an XSLT file


Tags: css,asp.net,xml,xslt,ektron

Problem :

articleDisplayThumb XSLT file (Use the DynamicParameter ID to go through the collection):

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="homeArticleThumb" match="/">
  <xsl:for-each select="Collection/Content">
    <div class="col span_1_of_3" style="height: 150px; border: 1px solid black;">
      <div class="test2">
        <div style="float: left; width: 28% padding-right: 2%; height: 100%;">
          {DISPLAY THE IMAGE HERE AND MAKE IT LINK TO THE ARTICLE} --> artThumbImg

        </div>
        <div style="float: left; width: 58%; height: 100%;">
          <div style="width: 100%; height: 48%; padding-bottom: 2%;">
            {DISPLAY THE TITLE AND LINK HERE} --> artTitle

          </div>
          <div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap;">
            {DISPLAY THE TEXT WITH "..." Here} --> partial artText (a Teaser...)

          </div>
        </div>
      </div>
    </div>
  </xsl:for-each>
</xsl:template>
</xsl:stylesheet>

The CSS for the classes above (I am trying to make it responsive to screen size, using this example: http://jsfiddle.net/Lry4z15m/2/):

/*  COLUMN SETUP  */
.col {
    display: block;
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}


/*  GROUPING  */
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .span_3_of_3 {
        width: 100%; 
    }
    .span_2_of_3 {
        width: 100%; 
    }
    .span_1_of_3 {
        width: 98%;
    }
}

I am calling the above from my ASP.net page like this:

<CMS:ContentBlock ID="CB" runat="server" DynamicParameter="127" CssClass="setP" DisplayXslt="Workarea/CustomFiles/articleDisplayThumb.xsl" />

The collection with ID 127 looks like this (The link for the title will have to be something like this: mypage?linkit={ID} where the ID is for each article when clicked):

enter image description here

What I would like it to end up, like this (The image on the left is artThumb, the blue is the artTitle and the black is the artText):

enter image description here

The XPaths:

enter image description here

How can I complete the XSLT, so I can achieve the end result, with the same style as the one used in JSFiddle?

UPDATE:

Did this so far...

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="homeArticleThumb" match="/">
  <xsl:for-each select="Collection/Content">
    <div class="col span_1_of_3" style="height: 150px; border: 1px solid black;">
      <div class="test2">
        <div style="float: left; width: 28% padding-right: 2%; height: 100%;">
          <xsl-copy-of select="/root/NewArticle/artThumb" />
        </div>
        <div style="float: left; width: 58%; height: 100%;">
          <div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;">
            <a href=""><xsl:value-of select="/root/NewArticle/artTitle" /></a>

          </div>
          <div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left">
            <xsl:value-of select="/root/NewArticle/artText" />

          </div>
        </div>
      </div>
    </div>
  </xsl:for-each>
</xsl:template>
</xsl:stylesheet>


Solution :

I would actually recommend against the collection control and opt for the the content view templated control which allows for filtering on collections as well. This should work in versions 8.6 and up and is much easier to style than using an xslt as it uses standard asp.net and c# markup.

Documentation on this control can be found here. http://documentation.ektron.com/cms400/edr/web/edr.htm#Templated_Server_Controls/Content.htm%3FTocPath%3DTemplated%2520Server%2520Controls%7C_____2


    CSS Howto..

    how to use {{$variable}} in css , Laravel 5.1 [closed]

    How to change default theme color teal to blue without using custom CSS in materilaize

    How does one create a div that extends to the bottom of the page?

    How do I center a button in an angular-ui-grid cell?

    How to make a 3 column layout fill 100% width using pixel metric on 2 columns?

    How to display text left side and icon on right side in html css?

    How to get menu text vertically aligned with inherited height

    How would i change the colour dynamically depending on the width

    How to make bootstrap 3 navbar not wrap

    css - How to set fixed width of div that is display:inline

    Showing responsive menu link that is not shown in regular navigation menu

    How to insert a comma in the following code

    How do you vertically align the body tag of an HTML document?

    How to set width and text-align for button with CSS

    How do you align left / right a div without using float?

    How to include child div into parent div automatically?

    How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size

    How to display an image using an img tag and css and class instead of src attribute

    How to detect if html contains block level elements using jQuery?

    How can I make a split-text input placeholder?

    How to show red border at Invalid Input Box after clicking Submit button with angularjs

    How to change the css class name dynamically in angular 2

    How to turn off spell checking WebStorm of css?

    How to apply same CSS property without overriding and multiple times using jquery?

    How can I automatically change the CSS min-height value of a div when a JavaScript is performed?

    How can I change Bootstrap table-striped in a less specific way?

    How do I resize images on Android?

    How can I modify footer color dynamically when I switch to another page in html and css

    How to add hover class to jQuery click(function() accordian divs?

    How to display text in the middle?