If all depends on how complex you want your gallery to be. You could just add a multi media picker property editor to one of your pages in the backend and then just iterate though the images and display them on your front page.
However if you wish to be a bit more adventurous, I'm just finishing off a photo gallery package for Umbraco, while I can't offer a detailed description of exactly what I did, I can point you in the right direction and let you know the sorts of things you need to consider.
You're going to need to add a custom property editor to the backend and a a means of displaying the gallery to you site visitors on the frontend. The backend is where you can upload photos and arrange them in a gallery. The frontend is where you can display you photos on an Umbraco page.
THE BACKEND: Firstly the Backend. You need to search for a tutorial on how to create a property editor in Umbraco, this is the tutorial I used http://umbraco.github.io/Belle/#/tutorials/CreatingAPropertyEditor. This makes use of angular JavaScript, which is something you're going to need to get at least a rudimentary knowledge of.
I created my backend by hooking into the JQuery Uploader (which ships with Umbraco) for uploading images. The Uploader is by Blueimp (https://github.com/blueimp/jQuery-File-Upload) and is quite popular, if you're familiar with JQuery it should be easy enough to to implement. Remember that the library is included with the backend by default so there is no need to add any additional JS files, it should all be referenced already.
I have a custom ashx handler to provide server side interaction with the file Uploader. There is documentation on how to create such a handler on the Blueimp website. If you can't find it, Google should help. The ashx handler intercepts the uploaded files from the uploader and allows me to save them to a folder on the server. The uploader uploads files in chunks so it is necessary to reconstruct the file stream piece by piece. In my case, rather than using the media directory, I have used a custom folder to store my galleries. This is mainly because I ported this from a gallery I created using asp.net web controls some years ago.
The next thing was to create an API controller (there are tutorials how to create there on Umbraco.TV, you will need a subscription though). This hooks into the image arrangement area of my backend property editor and allows the user to do things like set captions, delete unwanted images etc. JQuery, AJAX and angular are your friends here and if you have experience in this area it should be relatively straightforward to make something that you can use to save the order and captions added to your images. Due to it's coupling around MVC, Umbraco can send C# objects to Javascript and vice versa, using Newtonsoft's JSON serialisation libraries.
THE FRONTEND: Here you need to create a surface controller that talks to your API controller. This could be the same API controller as you use for the backend but could be a totally new one of you wish. It really doesn't matter as long as it is able to access the images in your gallery and send them from the server to the browser. You can call into your API controller using plain AJAX or angular JS which I really recommend, it will make you life so much easier. The surface controller will determine how you display your images on the frontend controller and can include functionality such as a detailed view of a selected image.
Anyway that's essentially how I went about this. I hope it makes some sense. It's difficult to provide an exact tutorial here, I'm just trying to make you aware of the areas of Umbraco you're going to need to learn about if you want to write your own custom gallery. So to reiterate, you need to learn about:
API controllers,
Surface controllers,
Custom property editors
Angular JavaScript
Jquery
ASMX asp.net handlers
Hopefully this doesn't feel too overwhelming. If you think this sounds a bit complex right now, I would suggest you learn to work with the multi media picker and figure out how to display images elected by that and then look into a more complex gallery once you're a bit more familiar with Umbraco. Sicne Umbraco is built in The MS MVC framework, learning about that will be extremely helpful.
Creating a photo gallery in Umbraco 7
I'm new to Umbraco. I'm looking for a way to create a photo gallery in Umbraco 7.
Your help is much appreciated.
A good start is this tutorial from the umbraco website:
http://umbraco.com/help-and-support/video-tutorials/umbraco-fundamentals/razor-recipes/gallery
Regards
Hi Waleed,
If all depends on how complex you want your gallery to be. You could just add a multi media picker property editor to one of your pages in the backend and then just iterate though the images and display them on your front page.
However if you wish to be a bit more adventurous, I'm just finishing off a photo gallery package for Umbraco, while I can't offer a detailed description of exactly what I did, I can point you in the right direction and let you know the sorts of things you need to consider.
You're going to need to add a custom property editor to the backend and a a means of displaying the gallery to you site visitors on the frontend. The backend is where you can upload photos and arrange them in a gallery. The frontend is where you can display you photos on an Umbraco page.
THE BACKEND: Firstly the Backend. You need to search for a tutorial on how to create a property editor in Umbraco, this is the tutorial I used http://umbraco.github.io/Belle/#/tutorials/CreatingAPropertyEditor. This makes use of angular JavaScript, which is something you're going to need to get at least a rudimentary knowledge of.
I created my backend by hooking into the JQuery Uploader (which ships with Umbraco) for uploading images. The Uploader is by Blueimp (https://github.com/blueimp/jQuery-File-Upload) and is quite popular, if you're familiar with JQuery it should be easy enough to to implement. Remember that the library is included with the backend by default so there is no need to add any additional JS files, it should all be referenced already.
I have a custom ashx handler to provide server side interaction with the file Uploader. There is documentation on how to create such a handler on the Blueimp website. If you can't find it, Google should help. The ashx handler intercepts the uploaded files from the uploader and allows me to save them to a folder on the server. The uploader uploads files in chunks so it is necessary to reconstruct the file stream piece by piece. In my case, rather than using the media directory, I have used a custom folder to store my galleries. This is mainly because I ported this from a gallery I created using asp.net web controls some years ago.
The next thing was to create an API controller (there are tutorials how to create there on Umbraco.TV, you will need a subscription though). This hooks into the image arrangement area of my backend property editor and allows the user to do things like set captions, delete unwanted images etc. JQuery, AJAX and angular are your friends here and if you have experience in this area it should be relatively straightforward to make something that you can use to save the order and captions added to your images. Due to it's coupling around MVC, Umbraco can send C# objects to Javascript and vice versa, using Newtonsoft's JSON serialisation libraries.
THE FRONTEND: Here you need to create a surface controller that talks to your API controller. This could be the same API controller as you use for the backend but could be a totally new one of you wish. It really doesn't matter as long as it is able to access the images in your gallery and send them from the server to the browser. You can call into your API controller using plain AJAX or angular JS which I really recommend, it will make you life so much easier. The surface controller will determine how you display your images on the frontend controller and can include functionality such as a detailed view of a selected image.
Anyway that's essentially how I went about this. I hope it makes some sense. It's difficult to provide an exact tutorial here, I'm just trying to make you aware of the areas of Umbraco you're going to need to learn about if you want to write your own custom gallery. So to reiterate, you need to learn about:
API controllers, Surface controllers, Custom property editors Angular JavaScript Jquery ASMX asp.net handlers
Hopefully this doesn't feel too overwhelming. If you think this sounds a bit complex right now, I would suggest you learn to work with the multi media picker and figure out how to display images elected by that and then look into a more complex gallery once you're a bit more familiar with Umbraco. Sicne Umbraco is built in The MS MVC framework, learning about that will be extremely helpful.
Hope this helps,
Cheers,
Damien
is working on a reply...