Language: HTML | XAML

Image overlay (gallery folder) template (HTML)

Applies to Windows only

Defines an item for a folder in an image gallery. This template is for use with a ListView that has a grid layout. For additional templates, see Item templates for grid layouts and Item templates for list layouts.

To use the template

To use the template, copy the HTML and the CSS styles into your project. The HTML includes a ListView that's designed to be used with the template. After you copy the HTML, set the ListView control's itemDataSource to your app's data source and update the template's data-win-bind attributes so they work with your data.

HTML


<!-- Item template -->
<div id="imageOverlayGalleryFolderTemplate" 
     data-win-control="WinJS.Binding.Template">
  <div class="imageOverlayGalleryFolder">
    <img class="imageOverlayGalleryFolderImage" 
         data-win-bind="src: imageUrl" />
    <div class="imageOverlayGalleryFolderOverlay">
      <h4 class="imageOverlayGalleryFolderOverlayText" 
          data-win-bind="innerText: text">
      </h4>
    </div>
  </div>
</div>

<!-- ListView -->
<div id="imageOverlayGalleryFolder"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource: list.dataSource, 
        itemTemplate: select('#imageOverlayGalleryFolderTemplate'), 
        layout: { type: WinJS.UI.GridLayout } }">
</div>

CSS


/* overall ListView dimensions */
#imageOverlayGalleryFolder {
    width: 1366px;
    height: 578px;
}

    /*-------------------------------------------------------------------------------------------*/
    /* imageOverlay-galleryFolder - used for folders in the Picker gallery view. The overlay and */
    /*   the background color are the same color so that they will visually read as one element  */ 
    /*   when there is no image.                                                                 */
    /*-------------------------------------------------------------------------------------------*/
    /* starting margin */
    #imageOverlayGalleryFolder .win-horizontal.win-viewport .win-surface {
        margin: 0px 115px;
    }

/* individual item dimensions and grid */
.imageOverlayGalleryFolder {
    width: 190px;
    height: 130px;
    overflow: hidden;
    background-color: #333333;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
}

    /* image */
    .imageOverlayGalleryFolder .imageOverlayGalleryFolderImage {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    /* overlay properties */
    .imageOverlayGalleryFolder .imageOverlayGalleryFolderOverlay {
        height: 30px;
        overflow: hidden;
        -ms-grid-row-align: end;
        color: rgb(255,255,255);
        background-color: #333333;
        padding: 0px 15px 0px 15px;
    }

        /* text properties */
        .imageOverlayGalleryFolder .imageOverlayGalleryFolderOverlay .imageOverlayGalleryFolderOverlayText {
            line-height: 30px;
        }

Related topics

Item templates for grid layouts
Item templates for list layouts

 

 

Show:
© 2014 Microsoft