PhotoGallery Helper

Last Updated 3/5/2015
Easily create a page displaying any directory or directories in Files
Add @BRT.PhotoGallery(directory:"photo_galleries/somegallery") and it will create a photo gallery. By default images are 175px high.

Required Parameter

  • directory (string) - You can find the directory's full name by going to files, select show properties. The value you want is found after name:

Optional Parameters

  • height (integer) - Resize the image to the specified pixel height. Can be used with or without width.
  • width (integer) - Resize the image to the specified pixel width. Can be used with or without height.
  • template (Razor template) - Customize the layout of the gallery. Reference the code below.
  • showDirectories (boolean) - Shows a listing of all child directories above any photos.
  • sortField (string) - Sort order for the files. Choose "Title" (order by title or filename ascending) or "Date" (order by date modified, descending); the default is "Title".
Default Code
@BRT.PhotoGallery(directory:"photo_galleries/annual_conference_2013")
Templated Code
@BRT.PhotoGallery(directory:"photo_galleries/annual_conference_2013", width:100, height:100, sortField:"Title", template:

@<div>

   <h2>@item.GalleryTitle </h2>

   <div>@item.GalleryDescription </div>

   <div>@item.DateCreated.Substring(4, 2) + "-" + @item.DateCreated.Substring(6, 2) + "-" + @ item.DateCreated.Substring(0, 4) </div>

    @foreach(PhotoGalleryHelperExtensions.DirectoryFile file in item.Files) {

        <div>

                <a href="@file.URL"><img src="@file.Image" /></a><br/>

                 <p><b>@file.Title</b><br/>

                        @file.Description</p>

                        @file.DateCreated.Substring(4, 2) + "-" + @file.DateCreated.Substring(6, 2) + "-" + @ file.DateCreated.Substring(0, 4) </p>

         </div>

    }

</div>)

Create a Carousel

This example uses Bootstrap 3.0. You can use any carousel you want.

Carousel Code
@BRT.PhotoGallery(directory:"photo_galleries/annual_conference_2013", width:500, height:500, 
template:
    @<div id="carousel-example-generic" class="carousel slide">
          <!-- Indicators -->
          <ol class="carousel-indicators">
             @{ int i = 0; }
             @foreach(PhotoGalleryHelperExtensions.DirectoryFile file in item.Files) {
                   <li data-target="#carousel-example-generic" data-slide-to="@i" class="@(@i==0 ? "active" : "")"></li>
                   i += 1;
              }
          </ol>
       <div class="carousel-inner">
       @{ i = 0; }
       @foreach(PhotoGalleryHelperExtensions.DirectoryFile file in item.Files) {
          <div class="item @(@i ==0 ? " active" : "")" >
              <img src="@file.Image" alt="..." />
              <div class="carousel-caption">
                <h4>@file.Title</h4>
                <p>@file.Description</p>
             </div>
          </div>
          i += 1;
         }
       </div>
       <!-- Controls -->
       <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
          <span class="icon-prev"></span>
       </a>
       <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
          <span class="icon-next"></span>
       </a>
    </div>)

Show Directories

@BRT.PhotoGallery(directory:"photo_galleries/annual_conference_2013", showDirectories:true)

Templated Code with Directories
@BRT.PhotoGallery(directory:"photo_galleries/annual_conference_2013", width:100, height:100, 
showDirectories:true, template:
@<div>
   <h2>@item.GalleryTitle </h2>
   <div>@item.GalleryDescription </div>
    @foreach(PhotoGalleryHelperExtensions.DirectoryFile file in item.Files) {
       if(file.IsDirectory != true){         
           <div>
                <a href="@file.URL"><img src="@file.Image" /></a><br/>
                 <p><b>@file.Title</b><br/>
                        @file.Description</p>
         </div>
       }
       else{
        <h4><a href="@file.URL"> @file.Title </a></h4>
                        <p>@file.Description</p>
       }
    }
</div>)

Article Topics

For Developers

Want to learn more?

Call 800-924-5220 or

Schedule a demo