Making a gallery page Options
sornsen
Posted: Thursday, February 07, 2008 7:56:49 PM

Rank: Enthusiast

Joined: 10/28/2007
Posts: 17
Location: Roskilde, Denmark
I have uploaded some pictures in several folders via the Media page in the admin module.
The structure is like the one showed below:
Brand 1
Type 1
(Several pictures)
Type 2
(Several pictures)

I have about five different brands.
So what I wan't to do is to make five pages each pointing to one of the brands.
The system should then be able show first a page with the different types and after pressing a type all the pictures under the type should be showed.

But how do I do this I have no idea.

Thanks.

Martin
Dirk
Posted: Thursday, February 07, 2008 10:08:44 PM

Rank: Fanatic

Joined: 9/27/2007
Posts: 498
Location: Belgium
Hi Martin,

You should definitely check out creative website package by Warren Buckley, which includes a 'simple' photo gallery. It should get you jumpstarted on this subject.

For listing sub nodes of a specific node, I think you may be able to use one of the standard macro's or xslt files available from the dropdown.

Shoot if you have more questions.

Grtz,
Dirk




level 1 certified - umbraco blog at netaddicts.be
sornsen
Posted: Sunday, February 10, 2008 3:59:43 PM

Rank: Enthusiast

Joined: 10/28/2007
Posts: 17
Location: Roskilde, Denmark
Hi again,

The package you reefer to is where you upload the picture to this particular page.
I would like to choose a folder with for example the “media picker” data type.
Then the system should show the picture in this folder.
bootnumlock
Posted: Sunday, February 10, 2008 5:51:20 PM

Rank: Fanatic

Joined: 10/9/2006
Posts: 355
martin, here is the approach i take...

i use two docTypes:
a gallery category [for listing sub galleries]
and a gallery [that lists all the pictures]

i use the drag and drop multi media picker from lefteris
http://forum.umbraco.org/14886#post-14886

and imageGen...

then add a little bit of xlst...
here is the xslt i use to list the galleries...
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<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"
    exclude-result-prefixes="msxml umbraco.library">


<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">

<!-- start writing XSLT -->
<xsl:for-each select="$currentPage/node [string(data [@alias='umbracoNaviHide']) != '1']">
    
        <xsl:variable name="picFile" select="./data[@alias='mainGalleryIMG']"/>
        <xsl:variable name="galImage" select="umbraco.library:GetMedia($picFile,0)/data[@alias='umbracoFile']"/>
        <a href="{umbraco.library:NiceUrl(@id)}">
        <img>
            <xsl:attribute name="src">/umbraco/imageGen.aspx?image=<xsl:value-of select="$galImage"/>&amp;width=200&amp;height=100&amp;constrain=true</xsl:attribute>
            <xsl:attribute name="class">reflect rheight25 ropacity35</xsl:attribute>
            <xsl:attribute name ="style">float:left;margin:0 15px 20px 0;</xsl:attribute>
        </img>
        </a>

    
</xsl:for-each>

</xsl:template>

</xsl:stylesheet>


and here is the xslt i use for listing out the pictures:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
    version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
xmlns:msxsl="urn:schemas-microsoft-com:xslt" 
xmlns:umbraco.library="urn:umbraco.library" 
xmlns:StarRating="urn:StarRating" 
exclude-result-prefixes="umbraco.library StarRating"> 



<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">

<!-- start writing XSLT -->
<xsl:if test="($currentPage/data[@alias='galImages']/descendant::node!='')">
 
<xsl:variable name="images" select="$currentPage/data[@alias='galImages']"/> 
<xsl:for-each select="$images/descendant::node">
<div class="picHolder">
    
    <xsl:variable name="theNode" select="."/>
    <xsl:variable name="picFile" select="umbraco.library:GetMedia(.,0)/data[@alias='umbracoFile']"/>
        <div class="galPic">
        <a href="{$picFile}" rel='lightbox' title='Rate this image:
                &lt;span class=&apos;inline-rating&apos;&gt;&lt;ul class=&apos;star-rating small-star&apos;&gt; &lt;li class=&apos;current-rating&apos; style=&apos;width:{StarRating:getPercentage($theNode)}%;&apos; id=&apos;{$theNode}&apos;&gt;&nbsp;&lt;/li&gt;&lt;li&gt;&lt;a href=&apos;javascript:updateStarRatingBar(&quot;{$theNode}&quot;,1,0,&quot;&quot;,&quot;&quot;)&apos; class=&apos;one-star&apos;&gt;1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&apos;javascript:updateStarRatingBar(&quot;{$theNode}&quot;,2,0,&quot;&quot;,&quot;&quot;)&apos; class=&apos;two-stars&apos;&gt;2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&apos;javascript:updateStarRatingBar(&quot;{$theNode}&quot;,3,0,&quot;&quot;,&quot;&quot;)&apos; class=&apos;three-stars&apos;&gt;3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&apos;javascript:updateStarRatingBar(&quot;{$theNode}&quot;,4,0,&quot;&quot;,&quot;&quot;)&apos; class=&apos;four-stars&apos;&gt;4&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&apos;javascript:updateStarRatingBar(&quot;{$theNode}&quot;,5,0,&quot;&quot;,&quot;&quot;)&apos; class=&apos;five-stars&apos;&gt;5&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/span&gt;'>
            <img>
                <xsl:attribute name="src">
/umbraco/imageGen.aspx?image=<xsl:value-of select="$picFile"/>&amp;width=200&amp;height=100&amp;constrain=true
                </xsl:attribute>
                <xsl:attribute name ="style">float:left;margin:0 15px 3px 0;</xsl:attribute>
            </img>
        </a>
        </div>
        <div class="rateBlock">
            Rate this image:
                <span class='inline-rating'><ul class='star-rating small-star'> <li class='current-rating' style='width:{StarRating:getPercentage($theNode)}%;' id='{$theNode}'>&nbsp;</li><li><a href='javascript:updateStarRatingBar("{$theNode}",1,0,"","")' class='one-star'>1</a></li><li><a href='javascript:updateStarRatingBar("{$theNode}",2,0,"","")' class='two-stars'>2</a></li><li><a href='javascript:updateStarRatingBar("{$theNode}",3,0,"","")' class='three-stars'>3</a></li><li><a href='javascript:updateStarRatingBar("{$theNode}",4,0,"","")' class='four-stars'>4</a></li><li><a href='javascript:updateStarRatingBar("{$theNode}",5,0,"","")' class='five-stars'>5</a></li></ul> </span>
</div>
</div>
</xsl:for-each> 
</xsl:if> 

</xsl:template>

</xsl:stylesheet>


now as you can see... i have not scrubbed this xslt and i am also using a star rating package from Tim G...

for my gallery, i also use jqueryLightbox... but it is not necessary...

with it all put together, it looks like this....
http://www.baty-barr.com/pics.aspx

i hope this sheds some light on what you can do with galleries...

bootnumlock - aka bob baty-barr [http://www.baty-barr.com]
Level 1 Certified!
mortenbock
Posted: Sunday, February 10, 2008 7:10:10 PM

Rank: Addict

Joined: 7/19/2006
Posts: 739
Location: Århus, Denmark
You can also do what you want. Just select a folder and them loop through the media in that folder using getmedia in xslt.

Here is an example (I'm also using imagegen, but I hope this makes sense anyways):

Code:

          <xsl:variable name="propimages" select="umbraco.library:GetMedia($prop/data[@alias = 'allPhotosFolder'], 1)" />
          <div id="mediadata">
            <h2>Photos</h2>
            <!-- Check if there are images in the selected folder -->
            <xsl:if test="count($propimages/node) &gt; 0">
              <ul>
                <xsl:for-each select="$propimages/node">
                  <li>
                    <a href="/umbraco/ImageGen.aspx?image={./data[@alias = 'umbracoFile']}&amp;width=400&amp;height=300&amp;text=Immerimmobilien.de&amp;fontsize=15&amp;FontStyle=bold&amp;align=right&amp;valign=bottom&amp;fontcolor=BBD3E2" title="{./@nodeName}" target="_blank">
                      <xsl:value-of select="@nodeName"/>
                    </a>
                  </li>
                </xsl:for-each>
              </ul>
            </xsl:if>
          </div>
          <div id="mediastage">
            <img src="/umbraco/ImageGen.aspx?image={$propimages/node[1]/data[@alias = 'umbracoFile']}&amp;width=400&amp;height=300&amp;text=Immerimmobilien.de&amp;fontsize=15&amp;FontStyle=bold&amp;align=right&amp;valign=bottom&amp;fontcolor=BBD3E2" alt="{$propTitle}" />
          </div>




Morten Bock - Level 2 certified - MVP 2008/2009 - My danish blog with a few english posts

mullog
Posted: Monday, February 11, 2008 1:36:21 PM

Rank: Devotee

Joined: 7/20/2006
Posts: 75
hey I was wondering if you can also list out the media items using a python script. And how you could do that.

Does anyone know what would be faster? using xslt or python (given you can do that)

Gísli

"We come from the land of the ice and snow, From the midnight sun where the hot springs blow"
sornsen
Posted: Tuesday, February 12, 2008 9:00:32 PM

Rank: Enthusiast

Joined: 10/28/2007
Posts: 17
Location: Roskilde, Denmark
Hi Morten,

How is this variable $prop defined?

<xsl:variable name="propimages" select="umbraco.library:GetMedia($prop/data[@alias = 'PictureFolder'], 1)" />

I'm getting an error on this.

Thanks

Martin
mortenbock
Posted: Tuesday, February 12, 2008 9:07:17 PM

Rank: Addict

Joined: 7/19/2006
Posts: 739
Location: Århus, Denmark
Ahh.. this is part of a large xslt file that gets info from a property (like a house), so therefore the $prop variable...

But you can just substitute this $prop/data[@alias = 'PictureFolder'] with the ID of the folder that contains the images/files that you want to loop through... $prop just contains a regular node, so you could go with $currentPage/data[@alias = 'YourOwnPropertyAlias'] if that fits your needs...

Morten Bock - Level 2 certified - MVP 2008/2009 - My danish blog with a few english posts

sornsen
Posted: Wednesday, February 13, 2008 7:50:28 PM

Rank: Enthusiast

Joined: 10/28/2007
Posts: 17
Location: Roskilde, Denmark
I'm really not good at xslt. I might have to buy a book about this because I'm having diffulties understanding how to program this.
When I use the code below I get the following error.
System.Xml.XPath.XPathException: Function 'umbraco.library:GetMedia()' has failed. ---> System.OverflowException: Value was either too large or too small for an Int32.


[code=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"
exclude-result-prefixes="msxml umbraco.library">

<xsl:output method="xml" omit-xml-declaration="yes" indent="yes"/>

<xsl:param name="currentPage"/>

<xsl:variable name="propimages" select="umbraco.library:GetMedia($currentPage/data[@alias = 'allPhotosFolder'], 1)" />

<xsl:template match="/">
<h2>Photos</h2>
<!-- Check if there are images in the selected folder -->
<xsl:if test="count($propimages/node) &gt; 0">
<ul>
<xsl:for-each select="$propimages/node">
<li>
<a href="/umbraco/ImageGen.aspx?image={./data[@alias = 'umbracoFile']}&amp;width=400&amp;height=300&amp;text=Billede&amp;fontsize=15&amp;FontStyle=bold&amp;align=right&amp;valign=bottom&amp;fontcolor=BBD3E2" title="{./@nodeName}" target="_blank">
<xsl:value-of select="@nodeName"/>
</a>
</li>
</xsl:for-each>
</ul>
</xsl:if>
<br/>
<img src="/umbraco/ImageGen.aspx?image={$propimages/node[1]/data[@alias = 'umbracoFile']}&amp;width=400&amp;height=300&amp;text=Billede&amp;fontsize=15&amp;FontStyle=bold&amp;align=right&amp;valign=bottom&amp;fontcolor=BBD3E2" alt="{$propTitle}" />

</xsl:template>
</xsl:stylesheet>

[/code=xslt]

Thanks
PeterD
Posted: Wednesday, February 13, 2008 8:39:25 PM

Rank: Fanatic

Joined: 7/20/2006
Posts: 453
Location: NL
I've seen this behaviour on v3 of umbraco. I think it fails somewhere in the pre-compilation of the xslt.

Try this instead:

Code:

<xsl:variable name="propimages">
<xsl:choose>
<xsl:when test="$currentPage/data[@alias = 'allPhotosFolder'] != ''">
<xsl:value-of select="umbraco.library:GetMedia($currentPage/data[@alias = 'allPhotosFolder'], 1)" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="umbraco.library:GetMedia(SOME_OTHER_DEFAULT_NUMERIC_VALUE_OF_ALBUM_THAT_EXISTS, 1)" />
</xsl:otherwise>
</xsl:choose>
</xsl:variable>


HTH,
PeterD

Working on an events-calendar with recursion. Post requests on my blog!
sornsen
Posted: Wednesday, February 20, 2008 8:47:45 PM

Rank: Enthusiast

Joined: 10/28/2007
Posts: 17
Location: Roskilde, Denmark
I'm still not able to save this I get the following error message:

Error occured
System.Xml.XPath.XPathException: Expression must evaluate to a node-set.
at MS.Internal.Xml.XPath.ExtensionQuery.Advance()
at MS.Internal.Xml.XPath.ChildrenQuery.Advance()
at MS.Internal.Xml.XPath.NodeFunctions.Evaluate(XPathNodeIterator context)
at MS.Internal.Xml.XPath.LogicalExpr.Evaluate(XPathNodeIterator nodeIterator)
at MS.Internal.Xml.XPath.BooleanFunctions.toBoolean(XPathNodeIterator nodeIterator)
at MS.Internal.Xml.XPath.BooleanFunctions.Evaluate(XPathNodeIterator nodeIterator)
at System.Xml.Xsl.XsltOld.Processor.EvaluateBoolean(ActionFrame context, Int32 key)
at System.Xml.Xsl.XsltOld.IfAction.Execute(Processor processor, ActionFrame frame)
at System.Xml.Xsl.XsltOld.ActionFrame.Execute(Processor processor)
at System.Xml.Xsl.XsltOld.Processor.Execute()
at System.Xml.Xsl.XsltOld.Processor.Execute(TextWriter writer)
at System.Xml.Xsl.XslTransform.Transform(XPathNavigator input, XsltArgumentList args, TextWriter output, XmlResolver resolver)
at System.Xml.Xsl.XslTransform.Transform(IXPathNavigable input, XsltArgumentList args, TextWriter output, XmlResolver resolver)
at umbraco.presentation.webservices.codeEditorSave.SaveXslt(String fileName, String fileContents, Boolean ignoreDebugging)


I don't know about this node-set on how this works.

What is wrong in the code? Thanks


Code:

<?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"
       exclude-result-prefixes="msxml umbraco.library">

  <xsl:output method="xml" omit-xml-declaration="yes" indent="yes"/>

  <xsl:param name="currentPage"/>

    <xsl:variable name="propimages">
      <xsl:choose>
        <xsl:when test="$currentPage/data[@alias = 'BilledeMappe'] != ''">
          <xsl:value-of select="umbraco.library:GetMedia($currentPage/data[@alias = 'BilledeMappe'], 1)" />
        </xsl:when>
        <xsl:otherwise>
          <xsl:value-of select="umbraco.library:GetMedia(1097, 1)" />
        </xsl:otherwise>
      </xsl:choose>
    </xsl:variable>

  <xsl:template match="/">
    <center>
      <h3>
        Billeder
      </h3>
    </center>
    
    <!-- Check if there are images in the selected folder -->
    <xsl:if test="count($propimages/node) &gt; 0">
      <ul>
        <xsl:for-each select="$propimages/node">
          <li>
            <a href="/umbraco/ImageGen.aspx?image={./data[@alias = 'umbracoFile']}&amp;width=400&amp;height=300&amp;text=Immerimmobilien.de&amp;fontsize=15&amp;FontStyle=bold&amp;align=right&amp;valign=bottom&amp;fontcolor=BBD3E2" title="{./@nodeName}" target="_blank">      
              <xsl:value-of select="@nodeName"/>
            </a>
          </li>
        </xsl:for-each>
      </ul>
    </xsl:if>


    <img src="/umbraco/ImageGen.aspx?image={$propimages/node[1]/data[@alias = 'umbracoFile']}&amp;width=400&amp;height=300&amp;text=Immerimmobilien.de&amp;fontsize=15&amp;FontStyle=bold&amp;align=right&amp;valign=bottom&amp;fontcolor=BBD3E2" />

  </xsl:template>
</xsl:stylesheet>
sornsen
Posted: Saturday, March 29, 2008 1:43:58 PM

Rank: Enthusiast

Joined: 10/28/2007
Posts: 17
Location: Roskilde, Denmark
It's been a while since I have been working on this.
The problem seems to be the combination of "$propimages/node"
I'm not allowed to put /node like this.

So this line is making some problems for me:
<xsl:for-each select="$propimages/node">

How do I get it to run through the nodes.
I can for instances get the following information from $propimages
/media/1216/billede 252.jpg1000750544534jpg/media/1221/billede 254.jpg1000750761608jpg/media/1226/billede 255.jpg1000750730651jpg/media/1231/billede 256.jpg1000750612077jpg/media/1236/billede 258.jpg1000750576276jpg/media/1241/billede 259.jpg1000750587591jpg/media/1246/billede 261.jpg1000750691745jpg/media/1251/billede 262.jpg1000750728697jpg/media/1256/billede 264.jpg1000750283585jpg/media/1261/billede 267.jpg1000750746842jpg/media/1266/billede 268.jpg1000750612567jpg/media/1271/billede 269.jpg1000750745063jpg
imayat12
Posted: Tuesday, April 01, 2008 1:45:12 PM

Rank: Addict

Joined: 7/19/2006
Posts: 599
Location: Preston, UK
Sornsen,

The issue is here

Code:


    <xsl:variable name="propimages">
      <xsl:choose>
        <xsl:when test="$currentPage/data[@alias = 'BilledeMappe'] != ''">
          <xsl:value-of select="umbraco.library:GetMedia($currentPage/data[@alias = 'BilledeMappe'], 1)" />
        </xsl:when>
        <xsl:otherwise>
          <xsl:value-of select="umbraco.library:GetMedia(1097, 1)" />
        </xsl:otherwise>
      </xsl:choose>
    </xsl:variable>



you need to make the propimages into a node set using msxml-nodeset. There is a post i did about it forums somewhere. Another way round this is where you have your code in loop move it into its own template



Code:

<xsl:template match="node">

          <li>
            <a href="/umbraco/ImageGen.aspx?image={./data[@alias = 'umbracoFile']}&amp;width=400&amp;height=300&amp;text=Immerimmobilien.de&amp;fontsize=15&amp;FontStyle=bold&amp;align=right&amp;valign=bottom&amp;fontcolor=BBD3E2" title="{./@nodeName}" target="_blank">     
              <xsl:value-of select="@nodeName"/>
            </a>
          </li>


</xsl:template>


then call it in this way



Code:


<xsl:choose>
        <xsl:when test="$currentPage/data[@alias = 'BilledeMappe'] != ''">
          <xsl:apply-templates select="umbraco.library:GetMedia($currentPage/data[@alias = 'BilledeMappe'], 1)" />
        </xsl:when>
        <xsl:otherwise>
                    <xsl:apply-templates select="umbraco.library:GetMedia(1097, 1)" />
        </xsl:otherwise>
      </xsl:choose>




this way you are conditionally passing a node set.

Level 2 certified. If it aint broke dont fix.
Users browsing this topic
Guest


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.