Copied to clipboard

Flag this post as spam?

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


  • Hua Min 2 posts 72 karma points
    Mar 18, 2023 @ 02:11
    Hua Min
    0

    How to display all images in media folder to gallery?

    Now want to make a gallery and if I upload a gallery folder in media . All images should have to display on web page.

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
     <section class="pad60">
        <div class="container">
          <div id="gallery" class="container-fluid">
    @for (int item = 1; item <= 31; item++)
    {  
      var url = "/img/gallery/gallery ("+item+").jpg";
      <a href="@url" class="example-image-link"
        data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
        <img src="@url" class="example-image img-responsive">
      </a>
    }
    </div>
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body"></div>
        </div>
      </div>
    </div>
    

    This is current code now.

  • Birendra Kumar 1 post 72 karma points
    Mar 18, 2023 @ 13:53
    Birendra Kumar
    1

    Hi, Please modify your code as below.

    @{
    
        var mediaFolder = Umbraco.Media(1253); // Selected Folder
    foreach (var image in mediaFolder.Children) 
    {
        var url = "/img/gallery/gallery (" + image.Url() + ").jpg";
        <a href="@url" class="example-image-link"
       data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
            <img src="@url" class="example-image img-responsive">
        </a>
    }
    }
    
  • Huw Reddick 1736 posts 6076 karma points MVP c-trib
    Mar 18, 2023 @ 17:56
    Huw Reddick
    1

    The URL of your image should just be

    var url=image.Url();

  • Huw Reddick 1736 posts 6076 karma points MVP c-trib
    Mar 19, 2023 @ 11:00
    Huw Reddick
    0

    Hi Hua,

    something like this should get you going, it will fetch images from a media folder called Gallery.

    @{
    var _mediaFolder = Umbraco.MediaAtRoot().DescendantsOrSelf<Folder>().First(f => f.Name == "Gallery");
    }
                            @if (_mediaFolder != null)
                            {
                                foreach (var image in _mediaFolder.Children)
                                {
                                    //make sure it isn't another folder
                                    if (image.Children != null && !image.Children.Any())
                                    {
                                                <img src="@image.Url()" class="example-image img-responsive" >
                                    }
                                }
                            }
    
Please Sign in or register to post replies

Write your reply to:

Draft