how to display all images in media folder to gallery - Using Umbraco and getting started

Press Ctrl / CMD + C to copy this to your clipboard.

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

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.

Copy Link

Birendra Kumar 1 post 72 karma points

Mar 18, 2023 @ 13:53

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

Copy Link

Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib

Mar 18, 2023 @ 17:56

1

The URL of your image should just be

var url=image.Url();

Copy Link

Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib

Mar 19, 2023 @ 11:00

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" >
                                }
                            }
                        }

Copy Link

is working on a reply...

Please Sign in or register to post replies