Skip to content

Commit 4a2ea51

Browse files
kyuchiakyuchia
committed
Poster Gallery and Metadata Fixes
- Converted all poster files to JPG format - Added gallery page with toggleable grid/list view - Fixed metadata typos (e.g., "Digitizaation", Ju 2019) - Set grid view as default and separated CSS/JS files
1 parent 0738d09 commit 4a2ea51

78 files changed

Lines changed: 419 additions & 95 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎activities/posters/content.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"2019": [
33
"Hopkins, Emily, Yaolong Ju, Gustavo Polins Pedro, Cory McKay, Julie Cumming, and Ichiro Fujinaga. 2019. \u201cSIMSSA DB: Symbolic Music Discovery and Search.\u201d Poster presented at the 6th International Conference on Digital Libraries for Musicology, Den Haag, Netherlands, November 9.",
4-
"Ju, Yaolong. 2019. \u201cAn Interactive Workflow for Generating Chord Labels for Homorhythmic Music in Symbolic Formats.\u201d Presented at the The 20thInternational Society of Music Information Retrieval Conference, Delft, Netherlands, November 8. <a href=\"http://cloud.simssa.ca/index.php/f/996\">http://cloud.simssa.ca/index.php/f/996</a>.",
4+
"Ju, Yaolong. 2019. \u201cAn Interactive Workflow for Generating Chord Labels for Homorhythmic Music in Symbolic Formats.\u201d Presented at the 20th International Society of Music Information Retrieval Conference, Delft, Netherlands, November 8. <a href=\"http://cloud.simssa.ca/index.php/f/996\">http://cloud.simssa.ca/index.php/f/996</a>.",
55
"N\u00e1poles, N\u00e9stor L\u00f3pez, Gabriel Vigliensoni, and Ichiro Fujinaga. 2019. \u201cThe Effects of Translation between Symbolic Music Formats: A Case Study with Humdrum, Lilypond, MEI, and MusicXML.\u201d Poster presented at the annual Music Encoding Conference, Vienna, Austria, June 29.",
66
"Reuse, Tim de, and Ichiro Fujinaga. 2019. \u201cCopyForward: Point-Set Matching for Predicting Patterns.\u201d Poster presented at the 15th running of the Music Information Retrieval Evaluation eXchange at the 20th International Society for Music Information retrieval Conference, Delft, Netherlands, November 4."
77
],
@@ -99,9 +99,9 @@
9999
"2005": [
100100
"Burgoyne, John Ashley, and Lawrence K. Saul. 2005. \u201cLearning Harmonic Relationships in Digital Audio with Dirichlet-Based Hidden Markov Models.\u201d Poster presented at the 6th International Conference on Music Information Retrieval, London, UK, September 11.",
101101
"Fiebrink, Rebecca, Cory McKay, and Ichiro Fujinaga. 2005. \u201cCombining D2K and JGAP for Efficient Feature Weighting for Classification Tasks in Music Information Retrieval.\u201d Poster, London, UK, September 11.",
102-
"Lai, Catherine, Beinan Li, and Ichiro Fujinaga. 2005. \u201cPreservation Digitizaation of David Edelberg\u2019s Handel LP Collection: A Pilot Project.\u201d Poster presented at the 6th International Conference on Music Information Retrieval, London, UK, September 11.",
102+
"Lai, Catherine, Beinan Li, and Ichiro Fujinaga. 2005. \u201cPreservation Digitization of David Edelberg\u2019s Handel LP Collection: A Pilot Project.\u201d Poster presented at the 6th International Conference on Music Information Retrieval, London, UK, September 11.",
103103
"Lai, Catherine, Ichiro Fujinaga, and Cynthia A. Leive. 2005. \u201cMetaData for Phonograph Records: Facilitating New Forms of Use and Access to Analogue Recordings.\u201d Poster presented at the 5th ACM/IEEE-CS joint conference on Digital libraries, Denver, USA, June 7.",
104104
"McEnnis, Daniel, Cory McKay, Ichiro Fujinaga, and Philippe Depalle. 2005. \u201cJAudio: A Feature Extraction Library.\u201d Posrer presented at the 6th International Conference on Music Information Retrieval, London, UK, September 11.",
105105
"Sinyor, Elliot, Cory McKay, Rebecca Fiebrink, Daniel McEnnis, and Ichiro Fujinaga. 2005. \u201cBeatbox Classification Using ACE.\u201d Poster presented at the 6th International Conference on Music Information Retrieval, London, UK, September 11."
106106
]
107-
}
107+
}

‎activities/posters/gallery.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
// gallery.js — Parses a CSV file of poster filenames and years, then dynamically generates a thumbnail gallery grouped by year.
2+
// Also controls view switching between list and grid.
3+
4+
document.addEventListener("DOMContentLoaded", function () {
5+
console.log("Page loaded, starting CSV parsing...");
6+
7+
// Toggle view logic
8+
function showView(view) {
9+
document.getElementById('text-view').classList.toggle('hidden', view !== 'text');
10+
document.getElementById('gallery-view').classList.toggle('hidden', view !== 'gallery');
11+
12+
const icons = document.querySelectorAll('.toggle-buttons i');
13+
icons.forEach(icon => icon.classList.remove('active'));
14+
15+
if (view === 'text') {
16+
document.querySelector('.toggle-buttons i.fa-list-ul').classList.add('active');
17+
} else {
18+
document.querySelector('.toggle-buttons i.fa-grip').classList.add('active');
19+
}
20+
}
21+
22+
// Make showView globally accessible
23+
window.showView = showView;
24+
25+
// Set default view on load
26+
showView('gallery');
27+
28+
// Load and parse CSV
29+
Papa.parse("poster_filenames_v2.csv", {
30+
download: true,
31+
header: true,
32+
complete: function (results) {
33+
console.log("CSV parsed results:", results.data);
34+
35+
const data = results.data.filter(row => row.filename && row.year);
36+
const groupedByYear = {};
37+
38+
data.forEach(row => {
39+
const year = row.year.trim();
40+
if (!groupedByYear[year]) groupedByYear[year] = [];
41+
groupedByYear[year].push(row.filename.trim());
42+
});
43+
44+
const container = document.getElementById("poster-gallery-container");
45+
46+
Object.keys(groupedByYear).sort((a, b) => b - a).forEach(year => {
47+
// Create a wrapper for both heading and gallery
48+
const yearBlock = document.createElement("div");
49+
yearBlock.className = "year-block";
50+
// Add year heading and horizontal line
51+
yearBlock.innerHTML = `<h2 id="${year}">${year}</h2><hr />`;
52+
53+
// Create the gallery grid
54+
const gallery = document.createElement("div");
55+
gallery.className = "gallery";
56+
57+
groupedByYear[year].forEach(filename => {
58+
const posterDiv = document.createElement("div");
59+
posterDiv.className = "poster";
60+
61+
const img = document.createElement("img");
62+
img.src = `../../posters/jpg/${filename}`;
63+
img.alt = filename;
64+
65+
img.onerror = function () {
66+
console.warn("Image not found:", img.src);
67+
};
68+
69+
const link = document.createElement("a");
70+
link.href = `../../posters/jpg/${filename}`;
71+
link.target = "_blank";
72+
link.appendChild(img);
73+
74+
// const caption = document.createElement("p");
75+
// caption.textContent = filename;
76+
77+
posterDiv.appendChild(link);
78+
// posterDiv.appendChild(caption); // Removed caption text below thumbnail
79+
gallery.appendChild(posterDiv);
80+
});
81+
82+
yearBlock.appendChild(gallery); // Add gallery inside year block
83+
container.appendChild(yearBlock); // Append full block to container
84+
});
85+
}
86+
});
87+
88+
89+
});

‎activities/posters/index.html‎

Lines changed: 171 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,178 @@
11
<!DOCTYPE html>
22
<html lang="en-us">
3-
<head>
4-
<link href="http://gmpg.org/xfn/11" rel="profile">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta http-equiv="content-type" content="text/html; charset=utf-8">
7-
<!-- Enable responsiveness on mobile devices-->
8-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
9-
<meta name="theme-color" content="#1DB2E9">
10-
<!-- Windows Phone -->
11-
<meta name="msapplication-navbutton-color" content="#1DB2E9">
12-
<!-- iOS Safari -->
13-
<meta name="apple-mobile-web-app-status-bar-style" content="#1DB2E9">
14-
<title>
15-
Posters &middot; DDMAL
16-
</title>
17-
<link rel="stylesheet" href="../../assets/css/main.css" />
18-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700%7CPT+Sans:400">
19-
<link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway:300,400,500" rel="stylesheet">
20-
<!-- Icons -->
21-
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../public/mcgill_crest.png">
22-
<link rel="shortcut icon" href="../../public/mcgill_crest.png">
23-
<!-- RSS -->
24-
<link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
25-
</head>
3+
4+
<head>
5+
<link href="http://gmpg.org/xfn/11" rel="profile">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta http-equiv="content-type" content="text/html; charset=utf-8">
8+
<!-- Enable responsiveness on mobile devices-->
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
10+
<meta name="theme-color" content="#1DB2E9">
11+
<!-- Windows Phone -->
12+
<meta name="msapplication-navbutton-color" content="#1DB2E9">
13+
<!-- iOS Safari -->
14+
<meta name="apple-mobile-web-app-status-bar-style" content="#1DB2E9">
15+
<title>
16+
Posters &middot; DDMAL
17+
</title>
18+
<link rel="stylesheet" href="../../assets/css/main.css" />
19+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700%7CPT+Sans:400">
20+
<link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway:300,400,500" rel="stylesheet">
21+
<!-- Icons -->
22+
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../public/mcgill_crest.png">
23+
<link rel="shortcut icon" href="../../public/mcgill_crest.png">
24+
<!-- RSS -->
25+
<link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
2626
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
27-
<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
28-
<a class="navbar-brand" href="../../">DDMAL</a>
29-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
27+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" >
28+
<link rel="stylesheet" href="./poster.css">
29+
</head>
30+
31+
<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
32+
<a class="navbar-brand" href="../../">DDMAL</a>
33+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
34+
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
3035
<span class="navbar-toggler-icon"></span>
31-
</button>
32-
<div class="collapse navbar-collapse" id="navbarSupportedContent">
33-
<ul class="navbar-nav ml-auto" id="nav-items">
34-
<li class="nav-item">
35-
<a class="nav-link" href="../../">Home <span class="sr-only">(current)</span></a>
36-
</li>
37-
<li class="nav-item">
38-
<a class="nav-link" href="../../lab_members/">Lab Members</a>
39-
</li>
40-
<li class="dropdown">
41-
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">Activities<span class="caret"></span></a>
42-
<ul class="dropdown-menu" role="menu">
43-
<li><a href='../../activities/media/' target='_top' >Media</a></li>
44-
<li><a href='../../activities/posters/' target='_top' >Posters</a></li>
45-
<li><a href='../../activities/presentations/' target='_top' >Presentations</a></li>
46-
<li><a href='../../activities/publications/' target='_top' >Publications</a></li>
47-
</ul>
48-
</li>
49-
<li class="nav-item">
50-
<a class="nav-link" href="../../research/">Research</a>
51-
</li>
52-
<li class="nav-item">
53-
<a class="nav-link" href="../../software/">Software</a>
54-
</li>
55-
<li class="nav-item">
56-
<a class="nav-link" href="../../events/">Events</a>
57-
</li>
58-
<li class="nav-item">
59-
<a class="nav-link" href="../../resources/">Resources</a>
60-
</li>
61-
</ul>
62-
</div>
63-
</nav>
64-
<body id ="Site" class='layout-reverse theme-base-db sidebar-overlay'>
65-
<!-- Wrap is the content to shift when toggling the sidebar. We wrap the
66-
content to avoid any CSS collisions with our real content. -->
67-
<div class="wrap">
68-
<div class="container content">
69-
<div class="page container">
70-
<h1 style="text-align: left;" class="page-title">Posters</h1>
71-
<div style="margin-bottom: 25px"></div>
72-
<div id="json-content"></div>
36+
</button>
37+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
38+
<ul class="navbar-nav ml-auto" id="nav-items">
39+
<li class="nav-item">
40+
<a class="nav-link" href="../../">Home <span class="sr-only">(current)</span></a>
41+
</li>
42+
<li class="nav-item">
43+
<a class="nav-link" href="../../lab_members/">Lab Members</a>
44+
</li>
45+
<li class="dropdown">
46+
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">Activities<span
47+
class="caret"></span></a>
48+
<ul class="dropdown-menu" role="menu">
49+
<li><a href='../../activities/media/' target='_top'>Media</a></li>
50+
<li><a href='../../activities/posters/' target='_top'>Posters</a></li>
51+
<li><a href='../../activities/presentations/' target='_top'>Presentations</a></li>
52+
<li><a href='../../activities/publications/' target='_top'>Publications</a></li>
53+
</ul>
54+
</li>
55+
<li class="nav-item">
56+
<a class="nav-link" href="../../research/">Research</a>
57+
</li>
58+
<li class="nav-item">
59+
<a class="nav-link" href="../../software/">Software</a>
60+
</li>
61+
<li class="nav-item">
62+
<a class="nav-link" href="../../events/">Events</a>
63+
</li>
64+
<li class="nav-item">
65+
<a class="nav-link" href="../../resources/">Resources</a>
66+
</li>
67+
</ul>
68+
</div>
69+
</nav>
70+
71+
<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
72+
<a class="navbar-brand" href="../../">DDMAL</a>
73+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
74+
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
75+
<span class="navbar-toggler-icon"></span>
76+
</button>
77+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
78+
<ul class="navbar-nav ml-auto" id="nav-items">
79+
<li class="nav-item">
80+
<a class="nav-link" href="../../">Home <span class="sr-only">(current)</span></a>
81+
</li>
82+
<li class="nav-item">
83+
<a class="nav-link" href="../../lab_members/">Lab Members</a>
84+
</li>
85+
<li class="dropdown">
86+
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">Activities<span
87+
class="caret"></span></a>
88+
<ul class="dropdown-menu" role="menu">
89+
<li><a href='../../activities/media/' target='_top'>Media</a></li>
90+
<li><a href='../../activities/posters/' target='_top'>Posters</a></li>
91+
<li><a href='../../activities/presentations/' target='_top'>Presentations</a></li>
92+
<li><a href='../../activities/publications/' target='_top'>Publications</a></li>
93+
</ul>
94+
</li>
95+
<li class="nav-item">
96+
<a class="nav-link" href="../../research/">Research</a>
97+
</li>
98+
<li class="nav-item">
99+
<a class="nav-link" href="../../software/">Software</a>
100+
</li>
101+
<li class="nav-item">
102+
<a class="nav-link" href="../../events/">Events</a>
103+
</li>
104+
<li class="nav-item">
105+
<a class="nav-link" href="../../resources/">Resources</a>
106+
</li>
107+
</ul>
108+
</div>
109+
</nav>
110+
111+
<body id="Site" class='layout-reverse theme-base-db sidebar-overlay'>
112+
<!-- Wrap is the content to shift when toggling the sidebar. We wrap the
113+
content to avoid any CSS collisions with our real content. -->
114+
<div class="wrap">
115+
<div class="container content">
116+
<div class="page container">
117+
<h1 style="text-align: left;" class="page-title">Posters</h1>
118+
<div style="margin-bottom: 25px"></div>
119+
120+
<div class="toggle-buttons" style="text-align: right; margin-bottom: 20px;">
121+
<button onclick="showView('text')" title="Show List View">
122+
<i class="fa-solid fa-list-ul" aria-hidden="true"></i>
123+
</button>
124+
<button onclick="showView('gallery')" title="Show Grid View">
125+
<i class="fa-solid fa-grip" aria-hidden="true"></i>
126+
</button>
127+
</div>
128+
129+
<div id="text-view">
130+
<div id="json-content">
131+
<!-- index.html text content will be dynamically loaded here -->
132+
</div>
73133
</div>
74-
<br>
75-
<br>
134+
135+
<div id="gallery-view" class="hidden">
136+
<div id="poster-gallery-container"></div></div>
76137
</div>
138+
<br>
139+
<br>
77140
</div>
78-
<label for="sidebar-checkbox" class="sidebar-toggle"></label>
79-
<footer id="sticky">
80-
<div class="footer-img-wrap">
81-
<img class="mcgill-img-footer" src="../../assets/schulich_logo.png" alt="">
82-
<img class="ddmal-img-footer" src="../../assets/Ddmal_logo_transp-bg_no-border_1600w.png" alt="">
83-
</div>
84-
</footer>
85-
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
86-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
87-
<script src="../../js/bootstrap.js"></script>
88-
<script type="text/javascript">
89-
$(document).ready(function () {
90-
var url = window.location;
91-
$('ul.navbar-nav a[href="'+ url +'"]').parent().addClass('active');
92-
$('ul.navbar-nav a').filter(function() {
93-
return this.href == url;
94-
}).parent().addClass('active');
95-
});
96-
</script>
97-
<script src="../script.js"></script>
98-
</body>
99-
</html>
141+
</div>
142+
143+
<label for="sidebar-checkbox" class="sidebar-toggle"></label>
144+
<footer id="sticky">
145+
<div class="footer-img-wrap">
146+
<img class="mcgill-img-footer" src="../../assets/schulich_logo.png" alt="">
147+
<img class="ddmal-img-footer" src="../../assets/Ddmal_logo_transp-bg_no-border_1600w.png" alt="">
148+
</div>
149+
</footer>
150+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
151+
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
152+
crossorigin="anonymous"></script>
153+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
154+
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
155+
crossorigin="anonymous"></script>
156+
<script src="../../js/bootstrap.js"></script>
157+
<script type="text/javascript">
158+
$(document).ready(function () {
159+
var url = window.location;
160+
$('ul.navbar-nav a[href="' + url + '"]').parent().addClass('active');
161+
$('ul.navbar-nav a').filter(function () {
162+
return this.href == url;
163+
}).parent().addClass('active');
164+
});
165+
</script>
166+
167+
<!-- PapaParse for CSV -->
168+
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
169+
170+
<!-- Load JSON content into #json-content -->
171+
<script src="../script.js"></script>
172+
173+
<!-- Load thumbnail gallery -->
174+
<script src="../posters/gallery.js"></script>
175+
176+
</body>
177+
178+
</html>

0 commit comments

Comments
 (0)