How to List the content of 2 media folders in sync - has anyone done this?
I'm about to create an image gallery from media folder, but the client wants the thumbnails to be custom images, not automatically resized versions of the large images. I think I'd like to do this with a macro pointed at 2 media folders and retreive the contents of both at the same time.
I've already got an xslt script I use for listing media items, I just can't think how I'll access the corresponding item in the second folder. The structure I'm aiming at is to have each image from folder1, with a link from it to the corresponding image in folder2, then I'll use a jQuery lightbox to create the gallery effect. Images will be sorted so they are in order, and I think this'll involve using position(), but not sure if I can use that to access the item in the second folder.
The callenge is the number of images that have to be uploaded. With 2 folders, I can just do 2 zip uploads. 1 for each folder. There's about 122 gallery pages with 12 images on each gallery. 244 zip uloads is manageable, but uploading them individually would drive me insane. I wish it could have been with auto generated thumbnails, but that's not an option. I might look at traversing the media nodes in a usercontrol, read the 2 sets of node ids into arrays and then loop through the arrays to write out my html.
I realised since my previous post that this would be an ideal scenario for Razor, so I'm going to do it in Razor, and I'll post my macro here. I'll probably set it up that either they are listed in the order they are in the media folder, or I might also have the option to have them auto sorted each time. The latter will assume the file names are the same, where the first option will allow them to be different.
Each gallery will have a maximum of 16 images, so the client will have to make sure they are in sync. He ha manged to supply them named consistently, so I don't think synchronisation will be an issue.
Here's what I'm going to use in Razor in v4.7. I think it's a good example of where Razor makes something that could be tricky in XSLT, but is very simple in Razor.
@* This macro creates a list of images from a media picker property thumbnailFolder, with links to images from a media picker property imageFolder This makes it suitable for use in an image gallery where the thumbnails images have been created manually (allowing the choice of size and crop of the thumbnails) for example using jQuery Lightbox. I've added and extra property to the image media element with an alias of 'altText' which I use for the alt text of the image and also for the title of the link (so it can be used by the lightbox). The image folders must be in sync (i.e. same number of images and in the same order, which may be achieved by sorting them) I've included a check for the number of items in each folder being different and use the smallest number to avoid index out of range errors The code may not be 100% robust (for example if an image has been created, but no file uploaded, it will create an img with an empty src or a link with empty href This code was created for use in my own project, but is shared as-is in case it's useful to anyone v1.0 created byTom Madden, Quix Ltd, may be used/abused as you see fit. I'll link to the site where I'm using it once the site is populated *@
@inherits umbraco.MacroEngines.DynamicNodeContext @if (Model.HasProperty("thumbnailFolder") && Model.ThumbnailFolder != 0 && Model.HasProperty("imageFolder") && Model.ImageFolder != 0) { var thumbnails = @Model.Media("thumbnailFolder").Children; var images = @Model.Media("imageFolder").Children; <ul> @for (int i = 0; i < (thumbnails.Items.Count < images.Items.Count ? thumbnails.Items.Count : images.Items.Count); i++) { <li> <ahref="@images.Items[i].UmbracoFile"title="@(thumbnails.Items[i].altText!=""?thumbnails.Items[i].altText : thumbnails.Items[i].Name)"> <imgsrc="@thumbnails.Items[i].UmbracoFile"alt="@(thumbnails.Items[i].altText!=""?thumbnails.Items[i].altText : thumbnails.Items[i].Name)"/> a> li> } ul> } else { <p> No 'thumbnailFolder' and 'imageFolder' selected on this page p> }
When I posted the initial question, this is exactly what I was hoping for. I had tried to do somethig like this, but got stuck when trying to use position as in index into the second folder, but without assigning it to a variable, and that's where I fell down, trying to use XSLT like it was a programming language like c#.
I think there will be interesting times ahead and many discussions of the relative merits of Razor and XSLT. I think lots of new people will gravitate towards Razor as feeling more natural, and also because it's used in MVC3. I think that's a good thing because it will bring more devs to Umrbaco who had been put of by XSLT. I am left wondering how the performance of XSLT and Razor compare?
I tested your code and confirm it works (changing one small thing, I'm using imageFolder, rather than imagesFolder)
Are you going to CodeGarden? I think a lot of people would be interested in your XSLT session that you did last year. I missed it because of a clash with something else.
How to List the content of 2 media folders in sync - has anyone done this?
I'm about to create an image gallery from media folder, but the client wants the thumbnails to be custom images, not automatically resized versions of the large images. I think I'd like to do this with a macro pointed at 2 media folders and retreive the contents of both at the same time.
I've already got an xslt script I use for listing media items, I just can't think how I'll access the corresponding item in the second folder. The structure I'm aiming at is to have each image from folder1, with a link from it to the corresponding image in folder2, then I'll use a jQuery lightbox to create the gallery effect. Images will be sorted so they are in order, and I think this'll involve using position(), but not sure if I can use that to access the item in the second folder.
Any thought?
Hi
I suggest you to create new media type, so user will upload both image in a single media node.
Was about to suggest the same thing of either creating a new media type or adding an additional upload data type to the image media type.
Having two separate folders stay in sync well enough to match the images would be at best a good guess.
-C
The callenge is the number of images that have to be uploaded. With 2 folders, I can just do 2 zip uploads. 1 for each folder. There's about 122 gallery pages with 12 images on each gallery. 244 zip uloads is manageable, but uploading them individually would drive me insane. I wish it could have been with auto generated thumbnails, but that's not an option. I might look at traversing the media nodes in a usercontrol, read the 2 sets of node ids into arrays and then loop through the arrays to write out my html.
You can definitely do it in a user control or in xslt. The trick is matching them up.. Will they have the same file names?
Only problem I see is the possibility of things to get out of sync.
I realised since my previous post that this would be an ideal scenario for Razor, so I'm going to do it in Razor, and I'll post my macro here. I'll probably set it up that either they are listed in the order they are in the media folder, or I might also have the option to have them auto sorted each time. The latter will assume the file names are the same, where the first option will allow them to be different.
Each gallery will have a maximum of 16 images, so the client will have to make sure they are in sync. He ha manged to supply them named consistently, so I don't think synchronisation will be an issue.
Here's what I'm going to use in Razor in v4.7. I think it's a good example of where Razor makes something that could be tricky in XSLT, but is very simple in Razor.
Hi,
Here's an XSLT version - I don't see it any more difficult than the Razor version, though...
<xsl:template match="/"> <xsl:if test="normalize-space($currentPage/imagesFolder) and normalize-space($currentPage/thumbnailFolder)"> <xsl:variable name="images" select="umbraco.library:GetMedia($currentPage/imagesFolder, true())" /> <xsl:variable name="thumbs" select="umbraco.library:GetMedia($currentPage/thumbnailFolder, true())" /> <ul> <xsl:for-each select="$images/Image"> <xsl:variable name="pos" select="position()" /> <xsl:variable name="thumb" select="$thumbs/Image[$pos]" /> <li> <a href="{umbracoFile}" title="{($thumb/altText | @nodeName[not($thumb/altText)])[1]}"> <xsl:apply-templates select="$thumb" /> </a> </li> </xsl:for-each> </ul> </xsl:if> </xsl:template> <xsl:template match="Image"> <img src="{umbracoFile}" width="{umbracoWidth}" height="{umbracoHeight}" alt="{(altText | @nodeName[not(../altText)])[1]}" /> </xsl:template>/Chriztian
Chriztian,
H5YR!
When I posted the initial question, this is exactly what I was hoping for. I had tried to do somethig like this, but got stuck when trying to use position as in index into the second folder, but without assigning it to a variable, and that's where I fell down, trying to use XSLT like it was a programming language like c#.
I think there will be interesting times ahead and many discussions of the relative merits of Razor and XSLT. I think lots of new people will gravitate towards Razor as feeling more natural, and also because it's used in MVC3. I think that's a good thing because it will bring more devs to Umrbaco who had been put of by XSLT. I am left wondering how the performance of XSLT and Razor compare?
I tested your code and confirm it works (changing one small thing, I'm using imageFolder, rather than imagesFolder)
Are you going to CodeGarden? I think a lot of people would be interested in your XSLT session that you did last year. I missed it because of a clash with something else.
Thanks
Tom
is working on a reply...