I currently have a gallery portfollio set up like so:
-Portfolio
-Portfolio Post 1
-Portfolio Post 2
-Portfolio Post 3
-etc. etc.
This portfolio displays all of the portfolio posts in a gallery which is working great at the moment. However there is no way of filtering each of the posts by category.
Would there be a way on the portfolio page to have three category links - All | Logos | Websites, and the user to be able to select one of the links and the relevant gallery posts to show for that link? It's similar to how this site, for example, has their categories for All | Videos | Audio | Interviews | News http://sbtv.co.uk/.
I'm still a bit of a beginner with XSLT so I'm quite lost at the moment. I've added a property to my post items doc type called 'Category' with alias 'category' so that when an item is about to be posted I can add the category name to it such as 'Logos'? Is that what you meant? Should I also structure my pages like this:
-Portfolio
-Websites
-Website Post 1
-Website Post 2
-Logos
-Logo Post 1
-Logo Post 2
Surely there's no point of structuring the pages like this if you have to manually enter the category name each time an item has been posted? Is there a better way around this so that the XSLT can simply select the posts from the child pages of the Website and Logo parent pages once one of the links has been selected by the user?
You're right; If you've structured them like that, there's no need for a category property.
Now you can just create a macro based on the "List Subpages by Level" template that Umbraco offers when creating a new XSLT file, and specify the level at which the "Websites" and "Logos" are situated. That will generate links to their pages - on the template for those pages you can put a "List Subpages from Current Page" macro and use that as a starter for listing the individual posts.
That's a great suggestion and it works brilliantly!
On my the Portfolio Page I've used a macro which displays the categorys as links 'Websites' and 'Logos' and I've inluded a link called 'All' which links back to the portfolio page and displays all of the websites and logos through the use of this for-each:
<xsl:for-each select="$currentPage/*/* [@isDoc and string(umbracoNaviHide) != '1']">
It finds the graphics and logos pages, grabs all of the posts from them and displays them on the current page (Portfolio).
How to filter gallery images by category - XSLT
Hi guys,
I currently have a gallery portfollio set up like so:
-Portfolio
-Portfolio Post 1
-Portfolio Post 2
-Portfolio Post 3
-etc. etc.
This portfolio displays all of the portfolio posts in a gallery which is working great at the moment. However there is no way of filtering each of the posts by category.
Here is the current XSLT:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:umbraco.contour="urn:umbraco.contour" xmlns:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets umbraco.contour tagsLib BlogLibrary ">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:variable name="excerptLength">
<xsl:choose>
<xsl:when test="string(/macro/excerptLength) != ''">
<xsl:value-of select="/macro/excerptLength"/>
</xsl:when>
<xsl:otherwise>100</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="Width" select="number(260)" />
<xsl:variable name="Height" select="number(173)" />
<xsl:template match="/">
<!-- The fun starts here -->
<xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">
<xsl:sort select="@updateDate" order="descending" />
<div class="thumb">
<a href="{umbraco.library:NiceUrl(@id)}" Title="{@nodeName}">
<img src="/imageGen.ashx?image={umbraco.library:UrlEncode(umbracoFile)}&width={$Width}&
height={$Height}" class="social" width="{$Width}" height="{$Height}" alt="{@nodeName}" title="{@nodeName}"/>
</a>
<div class="phototitle">
<h1 class="portfolio-h1"><xsl:value-of select="@nodeName"/></h1>
<p class="portfolio-p"><xsl:value-of
select="umbraco.library:TruncateString(umbraco.library:StripHtml(introduction),
number($excerptLength), '...')" disable-output-escaping="yes"/>
<a href="{umbraco.library:NiceUrl(@id)}" Title="More Info">more info.</a></p>
<p class="portfolio-p-date">Posted: <xsl:value-of select="umbraco.library:LongDate(@updateDate, true(), ' - ')"/>
</p>
</div>
</div>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
I was planning on the structure to be:
-Portfolio
-Websites
-Website Post 1
-Website Post 2
-Logos
-Logo Post 1
-Logo Post 2
Would there be a way on the portfolio page to have three category links - All | Logos | Websites, and the user to be able to select one of the links and the relevant gallery posts to show for that link? It's similar to how this site, for example, has their categories for All | Videos | Audio | Interviews | News http://sbtv.co.uk/.
Thanks for your help,
Dan
Hi Dan,
I'm guessing you've got a property on the Post items that's called "category" or something like that?
You just need to build links including that (e.g., "?cat=Websites") - then grab that using the umbraco.library:RequestQueryString() function:
<xsl:variable name="category" select="umbraco.library:RequestQueryString('cat')" />Next, you include the picked category in your for-each, e.g.:
Does that make sense?
/Chriztian
Thanks for the reply Chriztian,
I'm still a bit of a beginner with XSLT so I'm quite lost at the moment. I've added a property to my post items doc type called 'Category' with alias 'category' so that when an item is about to be posted I can add the category name to it such as 'Logos'? Is that what you meant? Should I also structure my pages like this:
-Portfolio
-Websites
-Website Post 1
-Website Post 2
-Logos
-Logo Post 1
-Logo Post 2
Surely there's no point of structuring the pages like this if you have to manually enter the category name each time an item has been posted? Is there a better way around this so that the XSLT can simply select the posts from the child pages of the Website and Logo parent pages once one of the links has been selected by the user?
Thanks,
Dan
You're right; If you've structured them like that, there's no need for a category property.
Now you can just create a macro based on the "List Subpages by Level" template that Umbraco offers when creating a new XSLT file, and specify the level at which the "Websites" and "Logos" are situated. That will generate links to their pages - on the template for those pages you can put a "List Subpages from Current Page" macro and use that as a starter for listing the individual posts.
Let's hear how it works out,
/Chriztian
That's a great suggestion and it works brilliantly!
On my the Portfolio Page I've used a macro which displays the categorys as links 'Websites' and 'Logos' and I've inluded a link called 'All' which links back to the portfolio page and displays all of the websites and logos through the use of this for-each:
<xsl:for-each select="$currentPage/*/* [@isDoc and string(umbracoNaviHide) != '1']">
It finds the graphics and logos pages, grabs all of the posts from them and displays them on the current page (Portfolio).
The rest is really self explanatory!
Thanks a lot, nice work Chriztian!
Cheers,
Dan
is working on a reply...