Instructions for making a digital gallery in Drupal using objects in Hyrax
Step-by-step guide
- Find the series or collection you want to make a gallery for in ArcLight or ArchivesSpace and copy the ASpace Identifier. This will make a gallery for all child archival objects that have digital objects in Hyrax.
- I am making a gallery for the Crimson & White, so I find the Crimson & White series in the Milne School Records (https://archives.albany.edu/collections/catalog/ua659aspace_232eda0f4bc2d1cab2fb69ce7b3062b1)
- The ID is 232eda0f4bc2d1cab2fb69ce7b3062b1
- Make a new or edit an existing Drupal page
- Copy the following code into the Edit form:
<script type="text/javascript" src="/sites/all/themes/New_UArchives/js/headerAffix.js"></script> <link rel="stylesheet" href="https://archives.albany.edu/browse/css/ua/oneColumn.css" type="text/css"></link> <script type="text/javascript" src="/sites/all/themes/New_UArchives/js/hyraxGallery.js"></script> <style> .galleryItem { display: flex; align-items: baseline; margin: 10px; } .galleryThumb {flex-grow: 1} .galleryThumb img {max-width: 100px; max-height: 120px;} .galleryLabel {flex-grow: 4; padding: 20px;} /*.flexbox {display: flex; flex-wrap: wrap;}*/ .loading {text-align: center;} </style> <div class="row"> <div class="container"> <div id="contentColumn" class="col-md-12"> <h1 id="ID_HERE" class="seriesTitle" style="text-align:center;">Crimson and White</h1> <p> </p> <div id="OPTIONS_HERE" class="appendHere"> <div class="loading"><img id="loadingGif" src="/sites/all/themes/New_UArchives/img/loading2.gif" alt="loading..." /></div> </div>
- Paste the ASpace ID as the id="" attribute for the <h1> tag
- Enter options as the id="" attribute for the <div> tag with the class "appendHere"
- id="noYears" will not display page headers for each unique date
- id="noThumbs" will not display thumbnail images for large groups of objects that will load slowly. A simple bulleted list will display instead.
- Publish the Page!
- If you need to edit the JavaScript, the important file is here: \\titus\wwwroot\sites\all\themes\New_UArchives\js\hyraxGallery.js
Related articles