I am trying to find the best way to implement a way for my client to upload and publish multiple images. My first iteration was to create two macros, GetImageOne and GetImageTwo. The first contained the following code: <xsl:if test="$currentPage/mediaItemOne"> <img src="{umbraco.library:GetMedia($currentPage/mediaItemOne, 'false')/umbracoFile}" alt=""/> </xsl:if>
the second contains: <xsl:if test="$currentPage/mediaItemTwo"> <img src="{umbraco.library:GetMedia($currentPage/mediaItemTwo, 'false')/umbracoFile}" alt=""/> </xsl:if>
Then my template has two media pickers that calls the macros separately. Now, I need to allow the ability to upload eight images so I'm wondering if I can condense everything into one macro instead of creating eight. I tried the following in one
but on the front end, the second image is rendered for both. Any ideas on how I can have one macro that will allow multiple media pickers to render an img tag? Thanks for any insight in advance!
Do you by "uploading" mean "fetch" images? Because what you're doing in the XSLT is to fetch the images from the media archive, which has already been uploaded :-)
If you need to get hold of 8 images I suggest that you instead of having multiple fields containing a property of media picker, instead just create one called "media" for instance and then just select a folder on the document type.
Then you can fetch all the images from the folder instead using either a for-each loop or a template matching the media XML. If there have been uploaded more than 8 images into the folder you can limit it to display the 8 newest images in the folder for instance.
I hope these pointers make sense and that they help you out. If you have further questions or needs an code example please let us know.
/Jan
PS: You might want to throw a look at the Media Iterator package
Thanks for the suggestion, it makes a lot of sense. My problem now is trying to iterate through the images in the folder. It doesn't seem like it should be hard, but I'm not able to get at what I want... Here's what I have:
Changing the xsl:copy-of to <xsl:copy-of select="umbraco.library:GetMedia($currentPage/mediaFolder, 'false')/contents" />: <contents></contents>
Not sure why though. Ideally this is what I want at the end of the day: <li><img src="/media/804/plugout_products_ellipticalthumb1.jpg" /></li> <li><img src="/media/804/plugout_products_ellipticalthumb2.jpg" /></li> <li><img src="/media/804/plugout_products_ellipticalthumb3.jpg" /></li> <li><img src="/media/804/plugout_products_ellipticalthumb4.jpg" /></li>
PS: I installed the Media Iterator package, but not sure what to do with it at this point.
Just a note - when using the GetMedia extension, the second parameter must be a boolean. You can use either 0/1 or true()/false() - when it looks like you have written below the string is acutally interpreted as "true". when using '', you can write anything inside it and it will return true. So if you write 'howdy' it would also return true.
<xsl:copy-of select="umbraco.library:GetMedia($currentPage/mediaFolder, 1)" /> (This returns the same XML as you have posted above. Setting it to 0 or false() only returns the folder XML - No images XML).
So I got it partially working! Here's what I have: <xsl:if test="$currentPage/mediaFolder"> <xsl:for-each select="umbraco.library:GetMedia($currentPage/mediaFolder, 1)//umbracoFile"> <li class="left"> <img src="{umbraco.library:GetMedia($currentPage/mediaFolder, 1)//umbracoFile}" alt=""/> </li> </xsl:for-each> </xsl:if>
It's weird that there's a case-sensitivity issue... Anyway, now the problem is that the macro is rendering the first image in the folder four times, as opposed to the four images once each. My xslt isn't very strong (clearly). Any ideas?
Yes, if you look at the original output I posted, the xml doesn't seem well-formed at all -- there are tags with <img id="" version="" ...> but no </img>. Very strange indeed.
In any case, that didn't work, BUT you gave me a great idea to use the xslt current() call, so now, it works like a champ! Here's the complete code for the macro:
If you want to select multiple images I have a good alternative for you. I'm working on a media picker which can store multiple media items in one single picker and the output can be id's or the xml of the media items. If you're interessted I can send you a Release Candidate, but the final version 1.0 should probably be released next week. If you're interested give me your e-mail.
You're very much welcome and I'm Glad you got it solved. I think I will play a bit more around with the XML genrated from the media section since we have just disvocered that is buggy. This should be reported on codeplex if it has not been done so already.
If there is not an existing ticket for this I will make one.
I have been looking at the documentation as well as videos for your the package, but possibly foresee a problem. Since my data is seemingly formed differently, I don't think the advanced media picker will work. In the video, your umbraco.config file is thusly:
Unfortunately for me, my umbraco.config isn't anything like that:
<mediaItem>1087</mediaItem>
which is probably why I had so much trouble with the xslt and macro in the first place. Do you think this will be a problem? The image paths are nowhere to be found in my umbraco.config file.
Are you using the DAMP - New datatype? If your code in the umbraco.config file only shows the id your probably using the DAMP - Classic datatype.
If you're using the DAMP - Classic datatype you can use this XSLT sample:
<!--In "classic" only 1 id can be stored.-->
Classic:<br/><br/>
<img src="{umbraco.library:GetMedia($currentPage/classic, 0)/umbracoFile}" height="150px;" />
<br/><br/>
If your using the DAMP - New datatype you can use this XSLT sample:
<!--In "new" multiple media items can be stored with the full media xml.-->
New:<br/><br/>
<xsl:for-each select="$currentPage/new/DAMP[@fullMedia]/mediaItem/Image">
<img src="{umbracoFile}" height="150px;"/>
<br/>
<br/>
</xsl:for-each>
Best way to implement multiple media pickers
Hi
I am trying to find the best way to implement a way for my client to upload and publish multiple images. My first iteration was to create two macros, GetImageOne and GetImageTwo. The first contained the following code:
<xsl:if test="$currentPage/mediaItemOne">
<img src="{umbraco.library:GetMedia($currentPage/mediaItemOne, 'false')/umbracoFile}" alt=""/>
</xsl:if>
the second contains:
<xsl:if test="$currentPage/mediaItemTwo">
<img src="{umbraco.library:GetMedia($currentPage/mediaItemTwo, 'false')/umbracoFile}" alt=""/>
</xsl:if>
Then my template has two media pickers that calls the macros separately. Now, I need to allow the ability to upload eight images so I'm wondering if I can condense everything into one macro instead of creating eight. I tried the following in one
<xsl:choose>
<xsl:when test="$currentPage/mediaItemOne">
<img src="{umbraco.library:GetMedia($currentPage/mediaItemOne, 'false')/umbracoFile}" alt=""/>
</xsl:when>
<xsl:when test="$currentPage/mediaItemTwo">
<img src="{umbraco.library:GetMedia($currentPage/mediaItemTwo, 'false')/umbracoFile}" alt=""/>
</xsl:when>
</xsl:choose>
but on the front end, the second image is rendered for both. Any ideas on how I can have one macro that will allow multiple media pickers to render an img tag? Thanks for any insight in advance!
Phil
Hi Phillip
Do you by "uploading" mean "fetch" images? Because what you're doing in the XSLT is to fetch the images from the media archive, which has already been uploaded :-)
If you need to get hold of 8 images I suggest that you instead of having multiple fields containing a property of media picker, instead just create one called "media" for instance and then just select a folder on the document type.
Then you can fetch all the images from the folder instead using either a for-each loop or a template matching the media XML. If there have been uploaded more than 8 images into the folder you can limit it to display the 8 newest images in the folder for instance.
I hope these pointers make sense and that they help you out. If you have further questions or needs an code example please let us know.
/Jan
PS: You might want to throw a look at the Media Iterator package
Hi Jan
Thanks for the suggestion, it makes a lot of sense. My problem now is trying to iterate through the images in the folder. It doesn't seem like it should be hard, but I'm not able to get at what I want... Here's what I have:
Macro:
<xsl:if test="$currentPage/mediaFolder">
<xsl:copy-of select="umbraco.library:GetMedia($currentPage/mediaFolder, 'false')" />
<!--<li>
<img src="{umbraco.library:GetMedia($currentPage/mediaFolder, 'false')/contents}" alt=""/>
</li>-->
</xsl:if>
Visualizing the output of the xsl:copy-of yields:
<folder id="1091" version="d4a600fa-bc5f-4cff-a3c1-ad99a74fa141" parentid="-1" level="1" writerid="0" nodetype="1031" template="0" sortorder="53" createdate="2011-01-28T16:36:26" updatedate="2011-01-28T16:36:27" nodename="F25 Elliptical" urlname="f25elliptical" writername="Administrator" nodetypealias="Folder" path="-1,1091"><contents><img id="1092" version="728b1187-34cf-4714-91d0-663e83ac0603" parentid="1091" level="2" writerid="0" nodetype="1032" template="0" sortorder="1" createdate="2011-01-28T16:37:22" updatedate="2011-01-28T16:37:22" nodename="Elliptical Thumb 1" urlname="ellipticalthumb1" writername="Administrator" nodetypealias="Image" path="-1,1091,1092"><umbracofile>/media/804/plugout_products_ellipticalthumb1.jpg</umbracofile><umbracowidth>89</umbracowidth><umbracoheight>90</umbracoheight><umbracobytes>4494</umbracobytes><umbracoextension>jpg</umbracoextension><img id="1093" version="f9719059-b815-406c-915d-3b70891e0f7f" parentid="1091" level="2" writerid="0" nodetype="1032" template="0" sortorder="2" createdate="2011-01-28T16:37:52" updatedate="2011-01-28T16:37:52" nodename="Elliptical Thumb 2" urlname="ellipticalthumb2" writername="Administrator" nodetypealias="Image" path="-1,1091,1093"><umbracofile>/media/809/plugout_products_ellipticalthumb2.jpg</umbracofile><umbracowidth>89</umbracowidth><umbracoheight>88</umbracoheight><umbracobytes>5027</umbracobytes><umbracoextension>jpg</umbracoextension><img id="1094" version="a97a15b6-1b2d-4101-a6e6-888f89309db3" parentid="1091" level="2" writerid="0" nodetype="1032" template="0" sortorder="3" createdate="2011-01-28T16:38:21" updatedate="2011-01-28T16:38:22" nodename="Elliptical Thumb 2" urlname="ellipticalthumb2" writername="Administrator" nodetypealias="Image" path="-1,1091,1094"><umbracofile>/media/814/plugout_products_ellipticalthumb3.jpg</umbracofile><umbracowidth>88</umbracowidth><umbracoheight>88</umbracoheight><umbracobytes>4312</umbracobytes><umbracoextension>jpg</umbracoextension><img id="1095" version="bba5ac1a-d4da-4313-b13d-1f8d5fb21e48" parentid="1091" level="2" writerid="0" nodetype="1032" template="0" sortorder="4" createdate="2011-01-28T16:38:58" updatedate="2011-01-28T16:38:59" nodename="Elliptical Thumb 4" urlname="ellipticalthumb4" writername="Administrator" nodetypealias="Image" path="-1,1091,1095"><umbracofile>/media/819/plugout_products_ellipticalthumb4.jpg</umbracofile><umbracowidth>89</umbracowidth><umbracoheight>88</umbracoheight><umbracobytes>4326</umbracobytes><umbracoextension>jpg</umbracoextension></contents></folder>
Changing the xsl:copy-of to <xsl:copy-of select="umbraco.library:GetMedia($currentPage/mediaFolder, 'false')/contents" />:
<contents></contents>
Not sure why though. Ideally this is what I want at the end of the day:
<li><img src="/media/804/plugout_products_ellipticalthumb1.jpg" /></li>
<li><img src="/media/804/plugout_products_ellipticalthumb2.jpg" /></li>
<li><img src="/media/804/plugout_products_ellipticalthumb3.jpg" /></li>
<li><img src="/media/804/plugout_products_ellipticalthumb4.jpg" /></li>
PS: I installed the Media Iterator package, but not sure what to do with it at this point.
Thank you!!!
Hi Phillip
Just a note - when using the GetMedia extension, the second parameter must be a boolean. You can use either 0/1 or true()/false() - when it looks like you have written below the string is acutally interpreted as "true". when using '', you can write anything inside it and it will return true. So if you write 'howdy' it would also return true.
<xsl:copy-of select="umbraco.library:GetMedia($currentPage/mediaFolder, 'false')" />
So you should really write
<xsl:copy-of select="umbraco.library:GetMedia($currentPage/mediaFolder, 1)" /> (This returns the same XML as you have posted above. Setting it to 0 or false() only returns the folder XML - No images XML).
try writing this: <xsl:copy-of select="umbraco.library:GetMedia($currentPage/mediaFolder, 'false')//img" />
Does this return anything?
/Jan
So I got it partially working! Here's what I have:
<xsl:if test="$currentPage/mediaFolder">
<xsl:for-each select="umbraco.library:GetMedia($currentPage/mediaFolder, 1)//umbracoFile">
<li class="left">
<img src="{umbraco.library:GetMedia($currentPage/mediaFolder, 1)//umbracoFile}" alt=""/>
</li>
</xsl:for-each>
</xsl:if>
It's weird that there's a case-sensitivity issue... Anyway, now the problem is that the macro is rendering the first image in the folder four times, as opposed to the four images once each. My xslt isn't very strong (clearly). Any ideas?
Hi Phillip try this
<xsl:if test="$currentPage/mediaFolder">
<xsl:for-each select="umbraco.library:GetMedia($currentPage/mediaFolder, 1)//img">
<li class="left">
<img src="{umbracoFile}" alt=""/>
</li>
</xsl:for-each>
</xsl:if>
/Jan
No luck, probably because "umbraco.library:GetMedia($currentPage/mediaFolder, 1)//img" doesn't generate anything.
Hi Phillip
Yeah, the XML does not look like it's wellformed...this could be a bug....BUT!
Come to think about it I think that the code you posted before might just need to be altered to this
<xsl:if test="$currentPage/mediaFolder">
<xsl:for-each select="umbraco.library:GetMedia($currentPage/mediaFolder, 1)//umbracoFile">
<li class="left">
<img src="." alt=""/>
</li>
</xsl:for-each>
</xsl:if>
By using the . (dot) you're reffering to the context node, which in this case should <umbracoFile> if I remember correctly.
Hope this helps.
/Jan
Jan
Yes, if you look at the original output I posted, the xml doesn't seem well-formed at all -- there are tags with <img id="" version="" ...> but no </img>. Very strange indeed.
In any case, that didn't work, BUT you gave me a great idea to use the xslt current() call, so now, it works like a champ! Here's the complete code for the macro:
<xsl:if test="$currentPage/mediaFolder">
<xsl:for-each select="umbraco.library:GetMedia($currentPage/mediaFolder, 1)//umbracoFile">
<li class="left">
<img src="{current()}" alt=""/>
</li>
</xsl:for-each>
</xsl:if>
Thanks for your quick responses and all your help Jan!
Hi Philip,
If you want to select multiple images I have a good alternative for you. I'm working on a media picker which can store multiple media items in one single picker and the output can be id's or the xml of the media items. If you're interessted I can send you a Release Candidate, but the final version 1.0 should probably be released next week. If you're interested give me your e-mail.
Jeroen
Hi Phillip
You're very much welcome and I'm Glad you got it solved. I think I will play a bit more around with the XML genrated from the media section since we have just disvocered that is buggy. This should be reported on codeplex if it has not been done so already.
If there is not an existing ticket for this I will make one.
/Jan
PS: Remember to mark the post as solved :-)
@Jeroen: Sure, I'd love to check it out. You can reach me at phil [at] bonsaimediagroup [dot] com.
@Jan: Sure, I will try to open a new issue ticket, though you may want to check if I did it correctly, considering it's my first time posting there...
Thanks!
Hi Philip,
I've just released the Digibiz Advanced Media Picker 1.0: http://our.umbraco.org/projects/backoffice-extensions/digibiz-advanced-media-picker.
Jeroen
I have been looking at the documentation as well as videos for your the package, but possibly foresee a problem. Since my data is seemingly formed differently, I don't think the advanced media picker will work. In the video, your umbraco.config file is thusly:
<mediaItem>
<Image>
<umbracoFile>...</umbracoFile>
...
</Image>
</mediaItem
Unfortunately for me, my umbraco.config isn't anything like that:
<mediaItem>1087</mediaItem>
which is probably why I had so much trouble with the xslt and macro in the first place. Do you think this will be a problem? The image paths are nowhere to be found in my umbraco.config file.
Hi Philip,
Are you using the DAMP - New datatype? If your code in the umbraco.config file only shows the id your probably using the DAMP - Classic datatype.
If you're using the DAMP - Classic datatype you can use this XSLT sample:
<!--In "classic" only 1 id can be stored.--> Classic:<br/><br/> <img src="{umbraco.library:GetMedia($currentPage/classic, 0)/umbracoFile}" height="150px;" /> <br/><br/>If your using the DAMP - New datatype you can use this XSLT sample:
<!--In "new" multiple media items can be stored with the full media xml.--> New:<br/><br/> <xsl:for-each select="$currentPage/new/DAMP[@fullMedia]/mediaItem/Image"> <img src="{umbracoFile}" height="150px;"/> <br/> <br/> </xsl:for-each>Jeroen
Regarding the case-sensitivity issues:
When you're using the Visualizer you have to copy into a textarea, like this:
Otherwise, there's some nasty TIDY'ing going on (lowercase etc.).
/Chriztian
is working on a reply...