Differences

This shows you the differences between two versions of the page.

--- en:user:expanding_on_gs3_customisation_tutorials [2020/09/04 00:17] – anupama
+++ en:user:expanding_on_gs3_customisation_tutorials [2023/03/13 01:46] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
 ======Expanding on the GS3 Customisation tutorials======
@@ Line 104: / Line 107: @@
 . Save and close the file.\\
 Any changes to ''groupConfig.xml'' would need a server restart to take effect. However, if you already restarted after editing ''groupConfig.xml'', then you only need to refresh your browser to see the changes to ''home.xsl'' above in action.
+==== Advanced: if laying out groups column-wise in table cells of an html table ====
+There is some complexity if you want every 2 groups (or collections) appearing in a separate ''<div>'' or other element.
+The following modifications to ''home.xsl'' will produce groups in a 2 rows by 3 column table, but laid out column-wise: the 1st column first, then 2nd column, then 3rd column, etc.
+These modifications also optionally provide support for an additional column of standalone collections.
+First follow the steps in the section Displaying Collection Groups above, then, edit ''web/interfaces/perrin/transform/pages/home.xsl'' as follows:
+. Locate:
+<code><xsl:call-template name="collectionAndGroupLinks"/></code>
+Replace with:
+<code>
+  <!-- <xsl:call-template name="collectionAndGroupLinks"/> -->
+  <!-- output the groups, the following outputs them column wise -->
+  <xsl:apply-templates select="groupList/group" mode="displayGroupInfo" />
+  <!-- then output the collectionList in a final column -->
+  <xsl:apply-templates select="collectionList/collection" mode="displayCollInfo" />
+</code>
+. Locate:
+<code><xsl:template name="collDescription"></code>
+Replace with:
+<code>
+ <!--
+   Template has match and name attributes allowing this to be called with both
+   apply-templates and call-template.
+   https://stackoverflow.com/questions/6478163/can-an-xslt-template-carry-both-name-and-match-attributes
+ -->
+ <xsl:template match="collection" name="collDescription" mode="displayColl">
+</code>
+. Locate:
+<code><xsl:template name="customGroupDescription"></code>
+Replace with:
+<code>
+ <!--
+ Template has match and name attributes allowing this to be called with both
+ apply-templates and call-template.
+ https://stackoverflow.com/questions/6478163/can-an-xslt-template-carry-both-name-and-match-attributes
+ -->
+ <xsl:template match="group" name="customGroupDescription">
+</code>
+. Before the ''customGroupDescription'' template, now insert the following:
+<code>
+	<!-- To organise table cells, <td>, one column at a time:
+        https://stackoverflow.com/questions/93511/counter-inside-xslfor-each-loop
+	will not work, since we have an if-statement inside the for loop to filter for groups.
+	Instead, counting only the groups using Borodin's solution (still xslt 1.0) from
+	https://stackoverflow.com/questions/16504727/increment-counter-in-xslt-1-0 works.
+	While that gives us a proper counter not dependent on position(), it doesn't solve
+	that we need to open a tag (td) on odd count and close it on even.
+	For that, the solution is at:
+	https://stackoverflow.com/questions/17992481/xsl-wrap-every-2-items-in-the-for-each-with-a-div
+	General: https://stackoverflow.com/questions/4478045/what-are-the-differences-between-call-template-and-apply-templates-in-xsl
+	-->
+	<xsl:template match="group" mode="displayGroupInfo">
+	  <xsl:variable name="counter"><xsl:value-of select="1+count(preceding-sibling::group)])"/></xsl:variable>
+	  <xsl:if test="($counter mod 2) = 1">
+	    <td style="width:33.333333333333%; padding:0 15px;">
+	      <xsl:apply-templates select=". |  following-sibling::group[1]" />
+	      <!-- calls the template match="group" without mode this time -->
+	    </td>
+	  </xsl:if>
+	</xsl:template>
+	<!-- We want collections to appear in a separate and single column.
+	     So we don't do even odd columns here. -->
+	<xsl:template match="collection" mode="displayCollInfo">
+	  <td style="width:33.333333333333%; padding:0 15px;">
+	    <xsl:apply-templates select="." mode="displayColl"/>
+	    <!-- why does calling the template match="collection" without some mode
+	         attr this time NOT work? -->
+	  </td>
+	</xsl:template>
+</code>
+If yo were to set a ''class'' attribute on the ''<td>'' cells above, you could move the styling for the ''<td>'' cells into a css file where you can also add additional styling to them.