working with images newbei - UI Questions

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Uros Sankovic 107 posts 134 karma points

Jul 23, 2010 @ 21:05

0

working with images - newbei

UI Questions

Hi,

this is what I want. I have 4 subpages, each should have three properties: title, content and image. I've created XSLT, which reads these subpages and I use that macro on my homepage. It's working with the title and content, but I can't get the images. I'm using a simple upload datatype in documentype. Is that ok? Or should I use mediapicker?

It should look like this:

title 1

content 1 image1

title 2

content 2 image 2

.....

THX for your help.

Uros

Copy Link
Stefan Kip 1614 posts 4131 karma points c-trib

Jul 23, 2010 @ 21:34

0

It would be easy if you post the content of the XSLT too... ;-)

Also tell us what the current output is.

Copy Link
Uros Sankovic 107 posts 134 karma points

Jul 23, 2010 @ 21:40

0

Yes, you are right:

<?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"

exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

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

<xsl:param name="currentPage"/>

<xsl:template match="/">

<div id="content no_js">

<xsl:for-each select="$currentPage/ancestor-or-self::node[@level=1]/descendant::node[@level=2]">

<xsl:if test="@nodeName = 'Storitve' ">

<div>

<xsl:attribute name="class">

   <xsl:value-of select="@nodeName"/>

   </xsl:attribute>

<xsl:for-each select="node[@nodeTypeAlias = 'textImagePage']">

<div class="contentBox">

<div class="title">

<xsl:value-of select="data [@alias = 'NaslovPodstraniImage']" disable-output-escaping="yes"/>

</div>

<div class="icon">

<img alt="">

<xsl:attribute name="src">

<xsl:copy-of select="$currentPage/data [@alias='imagePodstrani']"/>

  </xsl:attribute>

</img>

</div>

<div class="content">

<xsl:value-of select="data [@alias = 'VsebinaPodstraniImage']" disable-output-escaping="yes"/>

</div>

</div>

</xsl:for-each>

</div>

</xsl:if>

</xsl:for-each>

</div>

</xsl:template>

</xsl:stylesheet>

Copy Link
Stefan Kip 1614 posts 4131 karma points c-trib

Jul 23, 2010 @ 21:44
0
Well, to get the image src for a property, you should use this:
```
<img>
    <xsl:attribute name="src">
        <xsl:value-of select="umbraco.library:GetMedia(<<<YOUR_IMAGE_PICKER_PROPERTY_ALIAS>>>, 0)/data [@alias = 'umbracoFile']" />
    </xsl:attribute>
</img>
```
Where you should replace "<<<YOUR_IMAGE_PICKER_PROPERTY_ALIAS>>>" with something like "data [@alias = 'imageAlias']" (NaslovPodstraniImage)
Copy Link
Dimitris Tsoukakis 33 posts 59 karma points

Jul 23, 2010 @ 22:09
0
If you have a simple upload datatype this should work.
```
<img src="{$currentPage/data[@alias='imagePodstrani']}" /> 
```
I think the problem with your code is that you are using copy-of instead of value-of.
Copy Link
Stefan Kip 1614 posts 4131 karma points c-trib

Jul 23, 2010 @ 22:12

0

@Dimitris

I have never used an upload datatype before (always advanced media pickers).
But doesn't the upload control create media items? If it does, you'll have to use umbraco.library:GetMedia()...

Copy Link
Dimitris Tsoukakis 33 posts 59 karma points

Jul 23, 2010 @ 22:27

0

The files uploaded with the upload datatype are saved in the media folder (file system) but are not accessible through GetMedia(), neither are visible in the media section of the Umbraco admin.

The upload data type is useful when you want to use a file or image just one time in a single page. If you plan to use a file or image in many pages or you want to render a variable number of files or images in a page then the media picker is the way to go.

Not to forget. The media section is also accessible through tinyMCE in case that content editors need to include an existing image in their documents.

Copy Link
Stefan Kip 1614 posts 4131 karma points c-trib

Jul 23, 2010 @ 22:42

0

I really prefer the media section (/advanced media picker) for every type of media upload...

You never know if you're going to use it more than once and you've got all media managable in the same place ;-)

Copy Link
Uros Sankovic 107 posts 134 karma points

Jul 24, 2010 @ 17:22

0

Hi

THX for all replies. Here's the code so far:

<?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"

exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

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

<xsl:param name="currentPage"/>

<xsl:template match="/">

<div id="content no_js">

<xsl:for-each select="$currentPage/ancestor-or-self::node[@level=1]/descendant::node[@level=2]">

<xsl:if test="@nodeName = 'Storitve' ">

<div>

<xsl:attribute name="class">

   <xsl:value-of select="@nodeName"/>

   </xsl:attribute>

<xsl:for-each select="node[@nodeTypeAlias = 'textImagePage']">

<div class="contentBox">

<div class="title">

<xsl:value-of select="data [@alias = 'NaslovPodstraniImage']" disable-output-escaping="yes"/>

</div>

<div class="icon">

<xsl:if test="$currentPage/ancestor-or-self::node[@level=1]/descendant::node[@level=3]/data [@alias='ImagePodstrani'] != ''">

   <img alt="">

   <xsl:attribute name="src">

   <xsl:value-of select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node[@level=1]/descendant::node[@level=3]/data [@alias='ImagePodstrani'], 'false')/data [@alias = 'umbracoFile']" />

   </xsl:attribute>

   </img>

   </xsl:if>

</div>

<div class="content">

<xsl:value-of select="data [@alias = 'VsebinaPodstraniImage']" disable-output-escaping="yes"/>

</div>

</div>

</xsl:for-each>

</div>

</xsl:if>

</xsl:for-each>

</div>

</xsl:template>

</xsl:stylesheet>

One question.How can I add images in Media folder? When I click on Choose in Content (I+m using media picker), the media folder is empty.Do I just copy the images in that folder? Sorry if you find my question stupid :(

Copy Link
Uros Sankovic 107 posts 134 karma points

Jul 24, 2010 @ 17:41

0

guys, could some of you be so nice and explain in a few words how to use media picker or how do you do when you want xslt to get your images?THX a lot.

Copy Link
Uros Sankovic 107 posts 134 karma points

Jul 24, 2010 @ 18:08

0

Ok. If I create new image in Media section for each image, I want it to to shown, and then in Content section Choose from list the proper media picker, I get just one, the first image in all cases. How come?

Here's the 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"

exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

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

<xsl:param name="currentPage"/>

<xsl:template match="/">

<div id="content no_js">

<xsl:for-each select="$currentPage/ancestor-or-self::node[@level=1]/descendant::node[@level=2]">

<xsl:if test="@nodeName = 'Storitve' ">

<div>

<xsl:attribute name="class">

   <xsl:value-of select="@nodeName"/>

   </xsl:attribute>

<xsl:for-each select="node[@nodeTypeAlias = 'textImagePage']">

<div class="contentBox">

<div class="title">

<xsl:value-of select="data [@alias = 'NaslovPodstraniImage']" disable-output-escaping="yes"/>

</div>

<div class="icon">

<xsl:if test="$currentPage/ancestor-or-self::node[@level=1]/descendant::node[@level=3]/data [@alias='ImagePodstrani'] != ''">

<img alt="">

   <xsl:attribute name="src">

   <xsl:value-of select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node[@level=1]/descendant::node[@level=3]/data [@alias='ImagePodstrani'], 'false')/data [@alias = 'umbracoFile']" />

   </xsl:attribute>

   </img>

</xsl:if>

</div>

<div class="content">

<xsl:value-of select="data [@alias = 'VsebinaPodstraniImage']" disable-output-escaping="yes"/>

</div>

</div>

</xsl:for-each>

</div>

</xsl:if>

</xsl:for-each>

</div>

</xsl:template>

</xsl:stylesheet>

Somehow I must tell XSLT which image comes with certain subpage! How?

Copy Link
Uros Sankovic 107 posts 134 karma points

Jul 24, 2010 @ 18:33

0

And if I delete the image in first subpage in a Content section, I get an XSLT reading error. Any ideas? THX

Copy Link

wolulcmit 357 posts 693 karma points

Jul 25, 2010 @ 12:47

this blog post might help you: http://blog.leekelleher.com/2009/11/30/how-to-use-umbraco-library-getmedia-in-xslt/

if you want to select more than one image you'll have to use an ultimate picker:
the ultimate picker just returns you id's which you then have to use

umbraco.library:GetXmlNodeById(yourId)

here's some basic xslt to do that:



<xsl:variable name="relItems" select="$currentPage/ancestor-or-self::node/data[@alias='your-ultimate-picker-alias']" />
<xsl:variable name="relSplit" select="umbraco.library:Split($relItems, ',')" />

<xsl:for-each select="$relSplit/value">
   <xsl:variable name="currentItem" select="umbraco.library:GetXmlNodeById(.)"/>
   <img>
       <xsl:attribute name="src">
       <xsl:value-of select="umbraco.library:GetMedia($currentItem,'false')/data [@alias = 'umbracoFile']" />
       </xsl:attribute>
       <xsl:attribute name="alt">
       <xsl:value-of select="umbraco.library:GetMedia($currentItem,'false')/@nodeName" />
       </xsl:attribute>
   </img>     

</xsl:for-each>

Hope that helps!

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

working with images - newbei