properties type upload rendering path instead of image
Hello.
I am new to Umbraco and have istalled version 4.7.1 via webmatrix.
I have been following the video tuts on Umbraco TV and have run into an issue when using the properties type upload. In my document types I created a simplePage, on that page I want to show an image. As showed in the tuts that I followed, all that needs to be done is to add a property of type upload.
Next in the template I insert the Umbraco page field. <umbraco:Item field="testImage" runat="server" />
That done, great, when I go to the content section and open my simplePage I am in effect able to upload an image that will be used in the page.
Upload process works pretty good. The image I want is uploaded into the file /media/166/img_05.jpg
The problem is when I view the site in my browser and go to simplePage where I should see my image all I see is the image path written on the page (/media/166/img_05.jpg).
I aslo tryed to use the type: media picker to upload an image nearly the same problem only difference is instead of the path I get what seems to be the ID of the image.
In both casses the image that needs to be rendered on the page isn't showing.
I then tryed the good old fashon way (simple html) to show the image and it works. So its not a problem of findig or accessing the image file.
Below is the output of the page when I view the source of the page that uses the Umbraco page field and the simple html variants.
<p>Page <strong>d'accueil</strong> du site Cosyfood</p>
/media/166/img_05.jpg <-- (this is what the Umbraco page field renders, instead of the image)
The behaviour you're seeing is completely correct. The upload property should only return the path. In order to get an image rendered you need to put the path in the <img> tag yourself. Keep in mind that the upload field can contain any kind of file and it's not sure you want to render a image everytime - in som cases you just want to render a link to the image.
So in order to render the image you will need to do the following in your template.
However I don't feel this is the right way to do it, since it's a bit ugyly and a bit hackish
You should consider using XSLT or Razor macroes to render the output.
You can also use an inline xslt rendering like this: <umbraco:Item runat="server" field="testImage" xslt="concat('<img src="',umbraco.library:GetMedia({0}, true())/umbracoFile, '" />')" xsltDisableEscaping="true"/>
I will also recommend that you install the CWS (Creative Website stater) package, which you can play around with and figure out how Umbraco is working.
properties type upload rendering path instead of image
Hello.
I am new to Umbraco and have istalled version 4.7.1 via webmatrix.
I have been following the video tuts on Umbraco TV and have run into an issue when using the properties type upload. In my document types I created a simplePage, on that page I want to show an image. As showed in the tuts that I followed, all that needs to be done is to add a property of type upload.
Next in the template I insert the Umbraco page field. <umbraco:Item field="testImage" runat="server" />
That done, great, when I go to the content section and open my simplePage I am in effect able to upload an image that will be used in the page.
Upload process works pretty good. The image I want is uploaded into the file /media/166/img_05.jpg
The problem is when I view the site in my browser and go to simplePage where I should see my image all I see is the image path written on the page (/media/166/img_05.jpg).
I aslo tryed to use the type: media picker to upload an image nearly the same problem only difference is instead of the path I get what seems to be the ID of the image.
In both casses the image that needs to be rendered on the page isn't showing.
I then tryed the good old fashon way (simple html) to show the image and it works. So its not a problem of findig or accessing the image file.
Below is the output of the page when I view the source of the page that uses the Umbraco page field and the simple html variants.
<p>Page <strong>d'accueil</strong> du site Cosyfood</p>
/media/166/img_05.jpg <-- (this is what the Umbraco page field renders, instead of the image)
<div>
<img src="/media/166/img_05.jpg" alt="cosyfood" />
</div>
Thanks in advance for any help on this one.
Regards
Hi Larry and welcome to our :)
The behaviour you're seeing is completely correct. The upload property should only return the path. In order to get an image rendered you need to put the path in the <img> tag yourself. Keep in mind that the upload field can contain any kind of file and it's not sure you want to render a image everytime - in som cases you just want to render a link to the image.
So in order to render the image you will need to do the following in your template.
<div>
<umbraco:Item field="testImage" insertTextBefore="<img src="" insertTextAfter="" alt="" >" runat="server" />
</div>
However I don't feel this is the right way to do it, since it's a bit ugyly and a bit hackish
You should consider using XSLT or Razor macroes to render the output.
You can also use an inline xslt rendering like this:
<umbraco:Item runat="server" field="testImage" xslt="concat('<img src="',umbraco.library:GetMedia({0}, true())/umbracoFile, '" />')" xsltDisableEscaping="true"/>
You can read more about inline XSLT renderings here http://our.umbraco.org/wiki/reference/templates/umbracoitem-element/inline-xslt
I will also recommend that you install the CWS (Creative Website stater) package, which you can play around with and figure out how Umbraco is working.
Hope this helps you.
/Jan
is working on a reply...