Hi all I am very new to Umbraco and web development as well. I think what I am asking is a relativley easy question but I am afarid I do not know if it has an easy answer.
Quite simply I was wondering if it at all possible to upload a picture from my local machine, and have it appear on my web page. For example if I have a picture of a dog on my computer that I want to appear on my web page, is there a simple way to do that without using the Rich Text Editor of hardcoding the file location in HTML or CSS.
For the most part you have two options for uploading/storing the images, one is the Upload datatype and one is the Media Picker datatype. You could add either of these datatypes (or both) to your document type to use them.
Media Picker - allows you to select an image/file from the Media Library, and/or upload one to the media library and select it. Once an image is in the media library it can be selected from any media picker on any document. (Note, you can enable previews & image uploading in the datatype settings - Developer -> Datatypes -> Media picker or even use a custom one like Digibiz Advanced Media Picker). Upload - allows you to upload a single file, which is sort of tied to the document you upload it on.
So if you want to re-use the image on other pages or have a "home" for it other than the document it's selected on, use the Media Picker. If it's a file that only applies to the document it's on and doesn't need to stay around when the document gets deleted, you can use the Upload type.
Once you've added one of the datatypes to your Document Type(s), and selected some images, you can display them from a macro. Technically you can also display them from the template itself, but I personally don't find it intuitive/clean.
With Macros you can use either XSLT or Razor. I haven't jumped the gun with Razor yet so still use XSLT...if you have any C# background you probably want to use Razor. Here's a blog post explaining the code for a XSLT macro to display an image - just replace mediaId with the property alias that you give your media picker. Once you create the macro you can insert it in your template to show it on the website.
This is probably getting too long, so try it out and let us know if you have any specific questions. Also I would reccomend trying out some of the Starter Kits as they probably have some of this functionality built-in for you to take a look at.
I will upload the pictures to the media library. Then I will make a document type, with a field of the media picker type. After that you will be able to get the picture out via Umbraco item.
As newto the umbracoCMS, I would recommendyou to look attheseintroductionvideos.
I did as you said, used the media picker data type, followed the blog post, and it worked perfectly. Thank you for the help. But now i have a follow up question. If I want to upload say 2 or more different images on the web page in two different places, is that where I am going to have to write in HTML/CSS where the images are to be located?
For example, lets say i want one image on the top of the page, and another on the right. Am I going to have to have two different media picker data types in order for this to happen?
Yes, you'd probably want to have one for called "Top Image" and one called "Right Image".
However, you could re-use the same Macro if you wanted. To do this you could add a macro parameter for the field and pass it in through Advanced Macro Parameter Syntax.
To do this: - Goto Developer -> Macros -> (your image macro) -> Parameters Tab - Add a new parameter - alias: imageId, Name: whatever, type: number - In your template, add the parameter to your macro tag: <umbraco:Macro imageId="[#yourMediaPickerFieldAliasHere]" ..... > - In the XSLT file, adjust the mediaId variable to read like so: <xsl:param name="imageId" select="/macro/imageId"/> <xsl:variable name="mediaId" select="number($imageId)" />
Then you can keep inserting the macro in different areas but use different media picker fields.
There are media pickers (like DAMP) that allow you to pick multiple images in one picker, but for the case you described I don't think that's best, because how would you know which was for the top and which was for the right? (I'm assuming you are expecting different sizes at each). That could however be useful for a gallery, or a list of sidebar images, etc.
Add an image to a simple page
Hi all I am very new to Umbraco and web development as well. I think what I am asking is a relativley easy question but I am afarid I do not know if it has an easy answer.
Quite simply I was wondering if it at all possible to upload a picture from my local machine, and have it appear on my web page. For example if I have a picture of a dog on my computer that I want to appear on my web page, is there a simple way to do that without using the Rich Text Editor of hardcoding the file location in HTML or CSS.
Thanks for any type of reply.
-Jeff
Hi Jeff,
Definitely!
For the most part you have two options for uploading/storing the images, one is the Upload datatype and one is the Media Picker datatype. You could add either of these datatypes (or both) to your document type to use them.
Media Picker - allows you to select an image/file from the Media Library, and/or upload one to the media library and select it. Once an image is in the media library it can be selected from any media picker on any document. (Note, you can enable previews & image uploading in the datatype settings - Developer -> Datatypes -> Media picker or even use a custom one like Digibiz Advanced Media Picker).
Upload - allows you to upload a single file, which is sort of tied to the document you upload it on.
So if you want to re-use the image on other pages or have a "home" for it other than the document it's selected on, use the Media Picker. If it's a file that only applies to the document it's on and doesn't need to stay around when the document gets deleted, you can use the Upload type.
Once you've added one of the datatypes to your Document Type(s), and selected some images, you can display them from a macro. Technically you can also display them from the template itself, but I personally don't find it intuitive/clean.
With Macros you can use either XSLT or Razor. I haven't jumped the gun with Razor yet so still use XSLT...if you have any C# background you probably want to use Razor. Here's a blog post explaining the code for a XSLT macro to display an image - just replace mediaId with the property alias that you give your media picker. Once you create the macro you can insert it in your template to show it on the website.
This is probably getting too long, so try it out and let us know if you have any specific questions. Also I would reccomend trying out some of the Starter Kits as they probably have some of this functionality built-in for you to take a look at.
Hope this helps,
Tom
Hi Jeff.
I will upload the pictures to the media library. Then I will make a document type, with a field of the media picker type. After that you will be able to get the picture out via Umbraco item.
As new to the umbraco CMS, I would recommend you to look at these introduction videos.
http://umbraco.com/help-and-support/video-tutorials/introduction-to-umbraco/sitebuilder-introduction.aspx
Hope this can help answer your question
/Dennis
Tom,
I did as you said, used the media picker data type, followed the blog post, and it worked perfectly. Thank you for the help. But now i have a follow up question. If I want to upload say 2 or more different images on the web page in two different places, is that where I am going to have to write in HTML/CSS where the images are to be located?
For example, lets say i want one image on the top of the page, and another on the right. Am I going to have to have two different media picker data types in order for this to happen?
Thanks again!
Hi Jeff,
Yes, you'd probably want to have one for called "Top Image" and one called "Right Image".
However, you could re-use the same Macro if you wanted. To do this you could add a macro parameter for the field and pass it in through Advanced Macro Parameter Syntax.
To do this:
- Goto Developer -> Macros -> (your image macro) -> Parameters Tab
- Add a new parameter - alias: imageId, Name: whatever, type: number
- In your template, add the parameter to your macro tag: <umbraco:Macro imageId="[#yourMediaPickerFieldAliasHere]" ..... >
- In the XSLT file, adjust the mediaId variable to read like so:
<xsl:param name="imageId" select="/macro/imageId"/>
<xsl:variable name="mediaId" select="number($imageId)" />
Then you can keep inserting the macro in different areas but use different media picker fields.
There are media pickers (like DAMP) that allow you to pick multiple images in one picker, but for the case you described I don't think that's best, because how would you know which was for the top and which was for the right? (I'm assuming you are expecting different sizes at each). That could however be useful for a gallery, or a list of sidebar images, etc.
Hope this helps,
Tom
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.