After much trial and error, I've got most of my site up and running. The last item to tackle is the photo albums. One page features different photo albums, each with a selected photo from its album (I call it the lead photo), and when clicking on a photo album, it then features different photos within. I don't want to go down the package route, for the HTML/JS is all set for my gallery and it works nicely in the static site.
What's the best way to go about building the document type for this?
Create a document type by creating a new document type collection. Perhaps photoAlbumlist for the parent and photoalbum for the child. Umbraco will automatically create the templates. Put your static html for each repeated photo album in the photoalbum template and the code for the photoalbumlist in the respective template. From that point, you will define your properties based on what you want to be variable. It can really go any direction from here, but I can see your photoalbum just being one property that allows the selection of multiple image files(media picker). and your photo album listing Property could be either a file upload, a media picker, or non-existent if you are comfortable using the .First() method.
Are you using just the backoffice, or are you using visual studio when editing your templates?
Bryna, thanks! I'm using Visual Studios to create the Photo Albums (and the gallery which shows a collection of all photo albums the editor has added).
Here's what I've done - in the back office, I've created the document type that contains the following:
photoAlbumTitle
photoAlbumDate
photoAlbumSummary
Multi Picker of photoAlbumPictures
photoAlbumCoverPhoto (a photo from the folder for photos selected in the multipicker to use as a cover photo for album')
Then in VS, I created the ViewModel based on the above fields, used the following query to pull in the data from Umbraco's tables:
public ActionResult RenderListOfPhotoAlbums()
{
List<PhotoAlbumVm> model = new List<PhotoAlbumVm>();
IPublishedContent photoList = CurrentPage.DescendantOrSelf("photogallery");
foreach (var photo in photoList.Children.Where(x => x.IsVisible()))
{
var getSingleImageUrl = photo.Value<IPublishedContent>("photoAlbumCoverPhoto").Url;
var list = photoList.Value<List<IPublishedContent>>("photoAlbumPictures");
model.Add(new PhotoAlbumVm(photo.Name, photo.Value<DateTime>("photoAlbumDate"),
photo.Value<string>("photoAlbumSummary"), list, getSingleImageUrl, photo.Url, photo.Id));
}
return PartialView(PartialViewPath("_ListOfAlbums"), model);
And then in the view, I just pass the above model and then loop through each object and it's working great. My challenge is now is pulling the specific photo album by its photo.Id - I can't seem to get that particular query to work.
The following doesn't work:
public ActionResult SinglePhotoAlbum(int photoId)
{
List<PhotoAlbumVm> model = new List<PhotoAlbumVm>();
IPublishedContent photoList = CurrentPage.DescendantOrSelf("photogallery");
var selectedAlbum = photoList.Children.Where(x => x.Id == photoId).First();
DateTime date = selectedAlbum.Value<DateTime>("photoAlbumDate");
string summary = selectedAlbum.Value<string>("photoAlbumSummary");
var list = selectedAlbum.Value<List<IPublishedContent>>("photoAlbumPictures");
model.Add(new PhotoAlbumVm(selectedAlbum.Name, date, summary, list, " ", " ", photoId));
return View(model);
}
This keeps returning a collection where I need a single object to return to the page, what's the correct way to go about this?
Under the assumption that the SinglePhotoAlbum is within a custom controller that inherits from RenderMvcController[for arguments sake I will guess the controller name is PhotoAlbumController, and the name of the documenttype is PhotoAlbum, and the instance of the documenttype in the content tree is called MyPhotos], I would say that you add a template called SinglePhotoAlbum and then ensure that it is one of the templates allowed on your photoAlbum Document Type. Then you should be able to use the URL https://{domain}/MyPhotos/SinglePhotoAlbum?photoid=1.
Perfect, because I was struggling to get this working and reverted back to using Umbraco's models and putting the logic in the view via Razor (which I don't want to do because then I have to use magic strings for all the different document properties to obtain their values). I think I was messing up the routing for Umbraco (which I don't entirely understand, gah. So much to process).
I'll attempt your suggestions and let you know if I managed to get this up and running. Thank you!!
Question for you - does the customer controller have to inherit from RenderMvcController or would SurfaceController do the job as well? (Currently I return a partial view related to the Photo Gallery in addition to the singlePhotoAlbum view).
Also, any reading you'd recommend to someone who is new to creating customer controllers and route hijacking? These are the two concepts I struggle w/ the most when dealing with Umbraco and the Umbraco documentation just isn't making sense to me. I need to see it in action to really understand what happens in different scenarios.
It really depends on your implementation. The way I did things in my own example, I inherited from RenderMVCController. You should also be able to get it to work with a surface controller.
If you are able to get it to work with both, you may find that you prefer one over the other for one reason or another.
I was able to get this to work but ended up using Umbraco's web.model.contentmodel and didn't use the custom controller that was created for all photo gallery related actions. Clearly, I need to do some more reading into RenderMVC Controllers and understanding how they work. I couldn't figure out how to change the routing so it uses id numbers per your response a week ago
Then you should be able to use the URL
https://{domain}/MyPhotos/SinglePhotoAlbum?photoid=1
But the upside is that the site is up and running.
I might consider having a photoalbumCollection documenttype and a photoalbum documenttype. The photoAlbumCollection allows you to contain your related photo albums. But that is just a convention that I use to keep things nice and tidy for me personally when I am working on Umbraco sites:).
Photo Gallery/Photo Album
After much trial and error, I've got most of my site up and running. The last item to tackle is the photo albums. One page features different photo albums, each with a selected photo from its album (I call it the lead photo), and when clicking on a photo album, it then features different photos within. I don't want to go down the package route, for the HTML/JS is all set for my gallery and it works nicely in the static site.
What's the best way to go about building the document type for this?
Create a document type by creating a new document type collection. Perhaps photoAlbumlist for the parent and photoalbum for the child. Umbraco will automatically create the templates. Put your static html for each repeated photo album in the photoalbum template and the code for the photoalbumlist in the respective template. From that point, you will define your properties based on what you want to be variable. It can really go any direction from here, but I can see your photoalbum just being one property that allows the selection of multiple image files(media picker). and your photo album listing Property could be either a file upload, a media picker, or non-existent if you are comfortable using the .First() method.
Are you using just the backoffice, or are you using visual studio when editing your templates?
Bryna, thanks! I'm using Visual Studios to create the Photo Albums (and the gallery which shows a collection of all photo albums the editor has added).
Here's what I've done - in the back office, I've created the document type that contains the following: photoAlbumTitle photoAlbumDate photoAlbumSummary Multi Picker of photoAlbumPictures photoAlbumCoverPhoto (a photo from the folder for photos selected in the multipicker to use as a cover photo for album')
Then in VS, I created the ViewModel based on the above fields, used the following query to pull in the data from Umbraco's tables:
And then in the view, I just pass the above model and then loop through each object and it's working great. My challenge is now is pulling the specific photo album by its photo.Id - I can't seem to get that particular query to work.
The following doesn't work:
This keeps returning a collection where I need a single object to return to the page, what's the correct way to go about this?
Under the assumption that the SinglePhotoAlbum is within a custom controller that inherits from RenderMvcController[for arguments sake I will guess the controller name is PhotoAlbumController, and the name of the documenttype is PhotoAlbum, and the instance of the documenttype in the content tree is called MyPhotos], I would say that you add a template called SinglePhotoAlbum and then ensure that it is one of the templates allowed on your photoAlbum Document Type. Then you should be able to use the URL https://{domain}/MyPhotos/SinglePhotoAlbum?photoid=1.
The Umbraco documentation link for the general process is: https://our.umbraco.com/documentation/reference/routing/custom-controllers
If you are using a surface controller check out: https://our.umbraco.com/documentation/Reference/Routing/surface-controllers
I think that should get you all set.
Perfect, because I was struggling to get this working and reverted back to using Umbraco's models and putting the logic in the view via Razor (which I don't want to do because then I have to use magic strings for all the different document properties to obtain their values). I think I was messing up the routing for Umbraco (which I don't entirely understand, gah. So much to process).
I'll attempt your suggestions and let you know if I managed to get this up and running. Thank you!!
Question for you - does the customer controller have to inherit from RenderMvcController or would SurfaceController do the job as well? (Currently I return a partial view related to the Photo Gallery in addition to the singlePhotoAlbum view).
Also, any reading you'd recommend to someone who is new to creating customer controllers and route hijacking? These are the two concepts I struggle w/ the most when dealing with Umbraco and the Umbraco documentation just isn't making sense to me. I need to see it in action to really understand what happens in different scenarios.
It really depends on your implementation. The way I did things in my own example, I inherited from RenderMVCController. You should also be able to get it to work with a surface controller.
If you are able to get it to work with both, you may find that you prefer one over the other for one reason or another.
I was able to get this to work but ended up using Umbraco's web.model.contentmodel and didn't use the custom controller that was created for all photo gallery related actions. Clearly, I need to do some more reading into RenderMVC Controllers and understanding how they work. I couldn't figure out how to change the routing so it uses id numbers per your response a week ago
But the upside is that the site is up and running.
As far as on of the correct ways to do it:
I might consider having a photoalbumCollection documenttype and a photoalbum documenttype. The photoAlbumCollection allows you to contain your related photo albums. But that is just a convention that I use to keep things nice and tidy for me personally when I am working on Umbraco sites:).
Best of luck!
This is exactly what I did - and works well. Thank you for all of your help.
is working on a reply...