Search code examples
cssasp.netxmlxsltektron

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

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