Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Nancy A. 44 posts 175 karma points
    May 21, 2019 @ 19:55
    Nancy A.
    0

    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?

  • Bryna 74 posts 260 karma points
    May 22, 2019 @ 21:44
    Bryna
    1

    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?

  • Nancy A. 44 posts 175 karma points
    May 23, 2019 @ 18:55
    Nancy A.
    0

    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?

  • Bryna 74 posts 260 karma points
    May 24, 2019 @ 15:49
    Bryna
    100

    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.

  • Nancy A. 44 posts 175 karma points
    May 24, 2019 @ 15:59
    Nancy A.
    0

    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!!

  • Nancy A. 44 posts 175 karma points
    May 24, 2019 @ 19:45
    Nancy A.
    0

    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.

  • Bryna 74 posts 260 karma points
    May 28, 2019 @ 20:54
    Bryna
    0

    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.

  • Nancy A. 44 posts 175 karma points
    May 31, 2019 @ 19:54
    Nancy A.
    0

    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.

  • Bryna 74 posts 260 karma points
    May 24, 2019 @ 15:56
    Bryna
    1

    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!

  • Nancy A. 44 posts 175 karma points
    May 31, 2019 @ 19:43
    Nancy A.
    0

    This is exactly what I did - and works well. Thank you for all of your help.

Please Sign in or register to post replies

Write your reply to:

Draft