I'd like to create a document type that will store an image, which will be used for my portfolio. My template will use XSLT to loop through all the instances of this datatype so the full portfolio will be displayed.
I'm confused at which datatype to use for this. I see that there is a media picker datatype which picks media that is already in the media library. However I'm not clear how one would get the media into the library. I also see there is an upload datatype, but I'm not sure what happens to media that is uploaded or how to get at it. Finally the richtext editor appears to have an image control.
What I think I want to do is have each instance of the document type store one image, but I'm not sure that's the right approach. I'd appreciate your help and recommendations on how to handle this.
I wonder where you are planning to upload the images, in the CMS or via the frontend? Sounds to me like you are going to upload them in the backend, which means you can add a new media item in the media library by clicking on create (or from the context menu when you right click on any item in the media tree).
In general images and other files that get hosted on the server and are used 'as is' like PDF document, mp3/video files, etc should be stored in the media library for various reasons, one of them being that the media library is exactly that: a media library. So instead of spreading your images around in the content nodes wouldn't it be nice to have them all in one place, where you can organise them etc. without breaking any links? You can then use the Media Picker (or other alternatives which are provided by the community) to link media items to your content.
The content nodes literally represent web pages, and although you can place a File upload data type on any of your document types and it will probably work in some way, you will just make your life unnecessary complicated.
Another way of associating images from the media library to content is - as you correctly described - to add it via the WYSIWYG box, where you can also directly save the image to the media library. The big difference is that you have much more control over the rendered page if you let people add images via a media picker to a content page, so e.g. whenever you know that this page needs an image in the top right corner you should probably have a 'topRightCornerImage' Media picker property in your document type that is maybe even set to be mandatory so you can be sure that whenever this page goes live there will be an image ready to be used. WYSIWYG controls obviously give much more freedom to the editor, yet with freedom comes responsibility: the editor is responsible for the layout, the size of the images (if you attach an image via the media picker you can easily limit the size of the image by using e.g. the phenomenal ImageGen package in the Xslt script), also a basic understanding of Html helps a lot
So to recap: images generally go into the media library, if you want to use something like the Media picker datatype to link them to your content nodes or add them via the WYSIWYG editor is your preference.
Thanks for the detailed reply. If I understand right then, a good way to do what I want is:
* Create a document type that has say, ten media pickers. This document type would correspond to my Porftolio page. Each of these media pickers would hold one portfolio image reference, which I would first add to the media library and then choose with a media picker.
Does that sound correct? If so, the only tricky part remaining is I would need to output an <img> tag in my template for each of the ten media pickers, but only if each one exists. Would I need to use XSLT to do this or can I do it just using ASP tags? Could someone please point me to a sample of this?
correct all over, although there might be something more elegant to fit your solution, e.g. the multi tree picker package (where you have only one property which holds as many image references as you want, you'd also be able to re-organise them without having to go through all references), this will work just fine.
On the frontend you would only want to output an image tag if there is actually an image associated, the best way to do this is via XSLT:
Thanks so much for the code-- looks like just what I need. I will look into the multi tree picker package but probably just want to keep it simple since this is my first Umbraco build :)
Which datatype to choose for images that get stored in a document type
Greetings all,
I'd like to create a document type that will store an image, which will be used for my portfolio. My template will use XSLT to loop through all the instances of this datatype so the full portfolio will be displayed.
I'm confused at which datatype to use for this. I see that there is a media picker datatype which picks media that is already in the media library. However I'm not clear how one would get the media into the library. I also see there is an upload datatype, but I'm not sure what happens to media that is uploaded or how to get at it. Finally the richtext editor appears to have an image control.
What I think I want to do is have each instance of the document type store one image, but I'm not sure that's the right approach. I'd appreciate your help and recommendations on how to handle this.
Thanks!
-NorthK
Greetings NorthK,
I wonder where you are planning to upload the images, in the CMS or via the frontend? Sounds to me like you are going to upload them in the backend, which means you can add a new media item in the media library by clicking on create (or from the context menu when you right click on any item in the media tree).
In general images and other files that get hosted on the server and are used 'as is' like PDF document, mp3/video files, etc should be stored in the media library for various reasons, one of them being that the media library is exactly that: a media library. So instead of spreading your images around in the content nodes wouldn't it be nice to have them all in one place, where you can organise them etc. without breaking any links? You can then use the Media Picker (or other alternatives which are provided by the community) to link media items to your content.
The content nodes literally represent web pages, and although you can place a File upload data type on any of your document types and it will probably work in some way, you will just make your life unnecessary complicated.
Another way of associating images from the media library to content is - as you correctly described - to add it via the WYSIWYG box, where you can also directly save the image to the media library. The big difference is that you have much more control over the rendered page if you let people add images via a media picker to a content page, so e.g. whenever you know that this page needs an image in the top right corner you should probably have a 'topRightCornerImage' Media picker property in your document type that is maybe even set to be mandatory so you can be sure that whenever this page goes live there will be an image ready to be used. WYSIWYG controls obviously give much more freedom to the editor, yet with freedom comes responsibility: the editor is responsible for the layout, the size of the images (if you attach an image via the media picker you can easily limit the size of the image by using e.g. the phenomenal ImageGen package in the Xslt script), also a basic understanding of Html helps a lot
So to recap: images generally go into the media library, if you want to use something like the Media picker datatype to link them to your content nodes or add them via the WYSIWYG editor is your preference.
Cheers,
Sascha
Hi Sascha,
Thanks for the detailed reply. If I understand right then, a good way to do what I want is:
* Create a document type that has say, ten media pickers. This document type would correspond to my Porftolio page. Each of these media pickers would hold one portfolio image reference, which I would first add to the media library and then choose with a media picker.
Does that sound correct? If so, the only tricky part remaining is I would need to output an <img> tag in my template for each of the ten media pickers, but only if each one exists. Would I need to use XSLT to do this or can I do it just using ASP tags? Could someone please point me to a sample of this?
Thanks again,
-NorthK
Hi NorthK,
correct all over, although there might be something more elegant to fit your solution, e.g. the multi tree picker package (where you have only one property which holds as many image references as you want, you'd also be able to re-organise them without having to go through all references), this will work just fine.
On the frontend you would only want to output an image tag if there is actually an image associated, the best way to do this is via XSLT:
<xsl:if test="$currentPage/data[@alias='image1'] != ''">
<img src="{umbraco.library:GetMedia($currentPage/data[@alias='image1'], false)/data[@alias='umbracoFile']}" alt="first image" />
</xsl:if>
[Note: this is Umbraco pre-4.5 schema, you can leave out all the 'data' bit if I'm corrct in 4.5, so $currentPage/image1 should work]
Cheers,
Sascha
Sascha,
Thanks so much for the code-- looks like just what I need. I will look into the multi tree picker package but probably just want to keep it simple since this is my first Umbraco build :)
Best regards,
-NorthK
is working on a reply...