This repository was archived by the owner on Jan 25, 2026. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathinfo.html
More file actions
776 lines (662 loc) · 32.6 KB
/
info.html
File metadata and controls
776 lines (662 loc) · 32.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Help & Workflows - IIIF Gallery Builder</title>
<style>
/* Info page specific styles */
.info-container {
max-width: 900px;
margin: 0 auto;
padding: 2rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
line-height: 1.6;
}
.info-header {
text-align: center;
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 2px solid #e0e0e0;
}
.info-header h1 {
color: #333;
margin-bottom: 0.5rem;
}
.info-header .subtitle {
color: #666;
font-size: 1.1rem;
}
.back-link {
display: inline-block;
margin-bottom: 1rem;
color: #0066cc;
text-decoration: none;
font-weight: 500;
}
.back-link:hover {
text-decoration: underline;
}
.info-section {
margin-bottom: 3rem;
}
.info-section h2 {
color: #0066cc;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e0e0e0;
}
.info-section h3 {
color: #333;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.info-section ol, .info-section ul {
margin-left: 1.5rem;
margin-bottom: 1rem;
}
.info-section li {
margin-bottom: 0.5rem;
}
.workflow-card {
background: #f8f9fa;
border-left: 4px solid #0066cc;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 4px;
}
.workflow-card h3 {
margin-top: 0;
color: #0066cc;
}
.tip-box {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 1rem;
margin: 1rem 0;
border-radius: 4px;
}
.tip-box strong {
color: #856404;
}
.warning-box {
background: #f8d7da;
border-left: 4px solid #dc3545;
padding: 1rem;
margin: 1rem 0;
border-radius: 4px;
}
.warning-box strong {
color: #721c24;
}
.code-snippet {
background: #f4f4f4;
padding: 0.75rem;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
overflow-x: auto;
margin: 0.5rem 0;
}
.screenshot-placeholder {
background: #e9ecef;
border: 2px dashed #adb5bd;
padding: 2rem;
text-align: center;
color: #6c757d;
border-radius: 4px;
margin: 1rem 0;
}
@media (max-width: 768px) {
.info-container {
padding: 1rem;
}
.info-section ol, .info-section ul {
margin-left: 1rem;
}
}
</style>
</head>
<body>
<div class="info-container">
<a href="index.html" class="back-link">← Back to Gallery Builder</a>
<div class="info-header">
<h1>📖 Help & Workflows</h1>
<p class="subtitle">Learn how to build, save, and share your IIIF image galleries</p>
</div>
<!-- TABLE OF CONTENTS -->
<div class="info-section">
<h2>Contents</h2>
<ul>
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#saving-loading">Saving & Loading Galleries</a></li>
<li><a href="#github-gist">Creating a GitHub Gist Account</a></li>
<li><a href="#sharing">Sharing Your Galleries</a></li>
<li><a href="#embedding">Embedding in Canvas LMS</a></li> <!-- NEW -->
<li><a href="#workflows">Suggested Workflows</a></li>
<li><a href="#terminology">Terminology Guide</a></li>
<li><a href="#troubleshooting">Troubleshooting</a></li>
</ul>
</div>
<!-- GETTING STARTED -->
<div class="info-section" id="getting-started">
<h2>🚀 Getting Started</h2>
<h3>What is this app?</h3>
<p>The IIIF Image Gallery Builder helps you create custom collections of images from IIIF (International Image Interoperability Framework) manifests. You can:</p>
<ul>
<li>Add images from IIIF-compliant repository</li>
<li>View high-resolution images with zoom capabilities</li>
<li>Rearrange and curate your collection</li>
<li>Save galleries to your computer</li>
<li>Share galleries with others via links</li>
</ul>
<h3>Adding Images to Your Gallery</h3>
<ol>
<li>Find a IIIF manifest URL from a participating institution (Stanford University Libraries, David Rumsey Map Collection, Library of Congress, Leventhal Map Center, etc.)</li>
<li>Paste the URL into the "Add IIIF Manifest URLs" field</li>
<li>Click "Add Manifest(s)"</li>
<li>If the manifest contains multiple pages, you'll be able to select which ones to add</li>
<li>Images appear as cards in the gallery</li>
</ol>
<div class="tip-box">
<strong>💡 Tip:</strong> You can add multiple manifest URLs at once by separating them with commas.
</div>
<h3>Viewing Images</h3>
<p>Click any thumbnail to view the full high-resolution image in the OpenSeadragon viewer on the right. You can:</p>
<ul>
<li>Zoom in/out using mouse wheel or +/- buttons</li>
<li>Pan by clicking and dragging</li>
<li>Return to full view with the home button</li>
</ul>
<h3>Organizing Your Gallery</h3>
<ul>
<li><strong>Reorder:</strong> Click and drag any card to move it</li>
<li><strong>Remove:</strong> Click the × button in the top-right corner of any card</li>
</ul>
</div>
<!-- SAVING & LOADING -->
<div class="info-section" id="saving-loading">
<h2>💾 Saving & Loading Galleries</h2>
<h3>Saving to Your Computer</h3>
<ol>
<li>Enter a name for your gallery in the "Gallery name" field</li>
<li>Click "Save Locally"</li>
<li>A JSON file will download to your computer</li>
<li>Keep this file to reload your gallery later</li>
</ol>
<div class="tip-box">
<strong>💡 Tip:</strong> If you don't enter a name, the app will auto-generate one using today's date (e.g., "iiif-gallery-2025-01-15.json").
</div>
<h3>Loading a Saved Gallery</h3>
<p><strong>From a local file:</strong></p>
<ol>
<li>Click "Choose File"</li>
<li>Select your saved JSON file</li>
<li>Click "Load File"</li>
<li>Your gallery appears with all items in their saved order</li>
</ol>
<p><strong>From a URL:</strong></p>
<ol>
<li>Paste the gallery JSON URL into the "Paste gallery URL" field</li>
<li>Click "Load from URL"</li>
<li>The gallery loads directly from the web</li>
</ol>
<div class="tip-box">
<strong>💡 Tip:</strong> You will learn to create shareable URLs for collections using GitHub Gist in the steps below!
</div>
</div>
<!-- GITHUB GIST -->
<div class="info-section" id="github-gist">
<h2>🔐 Creating a GitHub Gist Account</h2>
<p>GitHub Gist is a free service for hosting and sharing files. Creating an account allows you to:</p>
<ul>
<li>Edit your shared galleries after creating them</li>
<li>Delete galleries you no longer want public</li>
<li>Organize all your galleries in one place</li>
<li>Track who views your galleries (via GitHub stats)</li>
</ul>
<h3>Step-by-Step Account Creation</h3>
<ol>
<li>Go to <a href="https://github.com/signup" target="_blank">github.com/signup</a></li>
<li>Enter your email address</li>
<li>Create a password (at least 15 characters or 8 with a number and lowercase letter)</li>
<li>Choose a username (this will be in your gist URLs)</li>
<li>Verify you're not a robot (puzzle or email verification)</li>
<li>Click "Create account"</li>
<li>Verify your email address (check your inbox)</li>
</ol>
<div class="tip-box">
<strong>💡 Tip:</strong> GitHub accounts are free forever for public gists. You never need to upgrade to a paid plan for this use case.
</div>
<h3>Anonymous Gists (No Account Needed)</h3>
<p>You can also create gists without an account, but:</p>
<ul>
<li>✅ No signup required - very quick</li>
<li>✅ Works immediately</li>
<li>❌ Cannot edit once created</li>
<li>❌ Cannot delete</li>
<li>❌ No way to find it again if you lose the link</li>
</ul>
<div class="warning-box">
<strong>⚠️ Important:</strong> Anonymous gists are permanent and cannot be edited or deleted. Always keep a local backup of your JSON file!
</div>
</div>
<!-- SHARING -->
<div class="info-section" id="sharing">
<h2>🔗 Sharing Your Galleries</h2>
<h3>Send someone your JSON file via email</h3>
<ol>
<li>Save your gallery locally (download JSON file)</li>
<li>Attach your JSON file to an email
<li> In the body of the email, paste the link to the webapp: https://davidrumseymapcenter.github.io/set-builder/</li>
<li> Tell the recipient to download the file to their desktop and open it using the "Load Gallery" button in the app</li>
</ol>
<h3>Create a Sharable Link with GitHub Gist</h3>
<ol>
<li>Save your gallery locally (download JSON file)</li>
<li>Go to <a href="https://gist.github.com" target="_blank">gist.github.com</a></li>
<li>Sign in (or skip for anonymous gist)</li>
<li>Drag and drop your JSON file into the text box, OR paste the contents</li>
<li>In "Filename including extension" field, give it a descriptive name (e.g., "colonial-maps.json")</li>
<li>Optionally add a description</li>
<li>Click "Create public gist" (or "Create secret gist" for unlisted)</li>
<li>Click the "Raw" button in the top-right corner</li>
<li>Copy the URL from your browser's address bar</li>
<li>Create your shareable link:</li>
<div class="code-snippet">
https://davidrumseymapcenter.github.io/set-builder/?file=PASTE_GIST_RAW_URL_HERE
</div>
<p><strong>Example:</strong></p>
<div class="code-snippet">
https://davidrumseymapcenter.github.io/set-builder/?file=https://gist.githubusercontent.com/kristinallarsen/dd25a0e3fb0535d10d81b327a0d45454/raw/3b479ead4429474900b817bdfe0579d53cefa935/Ink%2520and%2520Empire
</div>
<h3>What Recipients Can Do</h3>
<p>When someone opens your shared link:</p>
<ul>
<li>✅ They see your gallery exactly as you saved it</li>
<li>✅ They can view all the images</li>
<li>✅ They can add more images if they want</li>
<li>✅ They can save their own modified version</li>
<li>❌ They CANNOT change your original gallery</li>
</ul>
<div class="tip-box">
<strong>💡 Tip:</strong> Think of shared galleries as templates. Anyone can open them, customize them, and save their own version!
</div>
</div>
<!-- EMBEDDING IN CANVAS -->
<div class="info-section" id="embedding">
<h2>🎓 Embedding Galleries in Canvas LMS</h2>
<p>You can embed your IIIF galleries directly into Canvas course pages using iframes. This allows students to interact with the gallery without leaving Canvas.</p>
<h3>Step 1: Get Your Gallery URL</h3>
<ol>
<li>Create and save your gallery</li>
<li>Upload it to GitHub Gist (see <a href="#sharing">Sharing section</a>)</li>
<li>Create your gallery URL:
<div class="code-snippet">https://davidrumseymapcenter.github.io/set-builder/?file=GIST_RAW_URL</div>
</li>
<li>Copy this complete URL</li>
</ol>
<h3>Step 2: Embed in Canvas</h3>
<p><strong>Method A: Using the Rich Content Editor (Recommended)</strong></p>
<ol>
<li>In Canvas, edit the page where you want to embed the gallery</li>
<li>Click the <strong></></strong> (HTML Editor) button in the toolbar</li>
<li>Paste this code where you want the gallery to appear:</li>
</ol>
<div class="code-snippet"><iframe src="YOUR_GALLERY_URL_HERE"
width="100%"
height="800"
style="border: 1px solid #ccc; border-radius: 4px;"
title="IIIF Image Gallery">
</iframe></div>
<ol start="4">
<li>Replace <code>YOUR_GALLERY_URL_HERE</code> with your actual gallery URL</li>
<li>Click the <strong></></strong> button again to return to visual mode</li>
<li>Click <strong>Save</strong></li>
</ol>
<p><strong>Method B: Using Canvas Apps (if available)</strong></p>
<ol>
<li>In Canvas page editor, click the <strong>Apps</strong> button</li>
<li>Select <strong>"Redirect Tool"</strong> or <strong>"External URL"</strong> if available</li>
<li>Paste your gallery URL</li>
<li>Set dimensions (width: 100%, height: 800px recommended)</li>
</ol>
<h3>Recommended Settings</h3>
<table style="width: 100%; border-collapse: collapse; margin: 1rem 0;">
<tr style="background: #f8f9fa;">
<th style="padding: 0.5rem; border: 1px solid #dee2e6; text-align: left;">Setting</th>
<th style="padding: 0.5rem; border: 1px solid #dee2e6; text-align: left;">Recommended Value</th>
<th style="padding: 0.5rem; border: 1px solid #dee2e6; text-align: left;">Why</th>
</tr>
<tr>
<td style="padding: 0.5rem; border: 1px solid #dee2e6;"><code>width</code></td>
<td style="padding: 0.5rem; border: 1px solid #dee2e6;"><code>100%</code></td>
<td style="padding: 0.5rem; border: 1px solid #dee2e6;">Responsive, fits all screen sizes</td>
</tr>
<tr>
<td style="padding: 0.5rem; border: 1px solid #dee2e6;"><code>height</code></td>
<td style="padding: 0.5rem; border: 1px solid #dee2e6;"><code>800</code> or <code>1000</code></td>
<td style="padding: 0.5rem; border: 1px solid #dee2e6;">Enough space to see gallery and viewer</td>
</tr>
<tr>
<td style="padding: 0.5rem; border: 1px solid #dee2e6;"><code>style</code></td>
<td style="padding: 0.5rem; border: 1px solid #dee2e6;"><code>border: 1px solid #ccc</code></td>
<td style="padding: 0.5rem; border: 1px solid #dee2e6;">Visual separation from page content</td>
</tr>
<tr>
<td style="padding: 0.5rem; border: 1px solid #dee2e6;"><code>title</code></td>
<td style="padding: 0.5rem; border: 1px solid #dee2e6;">Descriptive name</td>
<td style="padding: 0.5rem; border: 1px solid #dee2e6;">Accessibility for screen readers</td>
</tr>
</table>
<h3>Complete Example</h3>
<div class="code-snippet"><h2>Assignment: Analyze Colonial Maps</h2>
<p>Explore the gallery below and select 3 maps for your analysis essay.</p>
<iframe src="https://davidrumseymapcenter.github.io/set-builder/?file=https://gist.githubusercontent.com/username/abc123/raw/colonial-maps.json"
width="100%"
height="1000"
style="border: 1px solid #ccc; border-radius: 4px; margin: 1rem 0;"
title="Colonial Maps Gallery for Analysis Assignment">
</iframe>
<p><strong>Can't see the gallery above?</strong>
<a href="https://davidrumseymapcenter.github.io/set-builder/?file=..." target="_blank">
Open in new window
</a></p></div>
<div class="tip-box">
<strong>💡 Pro Tip:</strong> Always include a "Open in new window" link as a fallback in case the iframe doesn't load on some devices or browsers.
</div>
<h3>Troubleshooting Canvas Embeds</h3>
<p><strong>Problem: "This content cannot be displayed in a frame"</strong></p>
<ul>
<li><strong>Cause:</strong> Some institutions block external iframes for security</li>
<li><strong>Solution:</strong> Ask your Canvas admin to whitelist your GitHub Pages domain, OR use the "Open in new window" link approach instead</li>
</ul>
<p><strong>Problem: Gallery appears but is cut off</strong></p>
<ul>
<li><strong>Cause:</strong> Height is too small</li>
<li><strong>Solution:</strong> Increase the <code>height</code> value to 1000 or 1200</li>
</ul>
<p><strong>Problem: Gallery doesn't work on mobile</strong></p>
<ul>
<li><strong>Cause:</strong> Fixed pixel widths don't resize</li>
<li><strong>Solution:</strong> Always use <code>width="100%"</code> instead of pixel values</li>
</ul>
<div class="warning-box">
<strong>⚠️ Canvas Permissions:</strong> Check with your institution's Canvas admin before embedding external content. Some institutions have strict iframe policies for student privacy and security.
</div>
<h3>Teaching Workflow with Canvas</h3>
<ol>
<li>Create your gallery with assignment images</li>
<li>Save and upload to Gist</li>
<li>Create Canvas page with embedded gallery</li>
<li>Students interact with gallery directly in Canvas</li>
<li>Students can open in new window to save their own version</li>
<li>Students submit their customized gallery links via Canvas assignment</li>
</ol>
<div class="tip-box">
<strong>💡 Advanced:</strong> Create different galleries for different modules and embed them in corresponding Canvas pages. Students can compare across weeks by revisiting earlier embedded galleries.
</div>
</div>
<!-- WORKFLOWS -->
<div class="info-section" id="workflows">
<h2>🎯 Suggested Workflows</h2>
<div class="workflow-card">
<h3>📚 For Teachers: Create Assignment Starter Galleries</h3>
<ol>
<li>Build a gallery with required images for analysis</li>
<li>Save locally as "Assignment-Name-Starter.json"</li>
<li>Create a gist (logged in to your account)</li>
<li>Share the gallery link with students via your LMS or syllabus</li>
<li>Students open the link, add their research images, and save with their name</li>
<li>Students submit their gist links to you for grading</li>
</ol>
<p><strong>Benefits:</strong> All students start with the same base images, you can see exactly what each student added.</p>
</div>
<div class="workflow-card">
<h3>🔬 For Researchers: Version Your Collections</h3>
<ol>
<li>Create your initial gallery and save as "Project-v1.json"</li>
<li>Create a gist and note "Initial collection - 15 items"</li>
<li>As you find more items, add them and save as "Project-v2.json"</li>
<li>Create new gists for each major version</li>
<li>In your publications, reference specific versions by their gist URLs</li>
</ol>
<p><strong>Benefits:</strong> Permanent, citable, linkable versions. Readers can see exactly what you were looking at. Track evolution of your research.</p>
</div>
<div class="workflow-card">
<h3>👥 For Collaborators: Build on Each Other's Work</h3>
<ol>
<li>Person A creates initial gallery "Colonial Trade Routes" (5 items)</li>
<li>Person A saves locally as "Colonial-Trade-Routes-v1.json"</li>
<li>Person A creates a gist and shares the link with the team</li>
<li>Person B opens the shared link, reviews the 5 items</li>
<li>Person B adds 3 more items from their research (now 8 total)</li>
<li>Person B saves as "Colonial-Trade-Routes-v2-extended.json"</li>
<li>Person B creates their own gist and shares the updated link back</li>
<li>Person C opens Person B's link, adds 4 items (now 12 total)</li>
<li>Person C saves as "Colonial-Trade-Routes-v3.json"</li>
<li>Person C shares their version with the team</li>
<li>Team reviews all three versions (v1, v2, v3) side-by-side by opening multiple tabs</li>
<li>Team decides which items to keep for the final version</li>
<li>Person D compiles the best items from all versions (15 items total)</li>
<li>Right click on "View Manifest" link in each card to copy URLs</li>
<li>Person D saves as "Colonial-Trade-Routes-FINAL.json"</li>
<li>Person D creates gist and shares as the canonical team version</li>
</ol>
<p><strong>Benefits:</strong></p>
<ul>
<li>Clear version history (v1, v2, v3, FINAL)</li>
<li>Each person's contributions are visible in their version</li>
<li>Original never gets overwritten - always available for reference</li>
<li>Team can compare versions to see evolution of the collection</li>
<li>No conflicts - everyone works on their own copy</li>
<li>Final version represents consensus from all contributors</li>
</ul>
<p><strong>Pro tip:</strong> Add version numbers and contributor names to gallery names (e.g., "Project-v2-JohnEdits") to track who added what.</p>
</div>
<!-- TERMINOLOGY -->
<div class="info-section" id="terminology">
<h2>📚 Terminology Guide</h2>
<p>Understanding these terms will help you use the app more effectively:</p>
<h3>IIIF Terms</h3>
<dl style="margin-left: 1rem;">
<dt style="font-weight: bold; margin-top: 1rem;">IIIF (International Image Interoperability Framework)</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">A set of open standards for delivering high-quality, attributed digital objects online at scale. Enables images from different institutions to work together.</dd>
<dt style="font-weight: bold; margin-top: 1rem;">Manifest</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">A JSON file that describes a digital object (book, map, photograph, etc.) and its structure. Contains metadata and links to images.</dd>
<dt style="font-weight: bold; margin-top: 1rem;">Canvas</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">In IIIF, a canvas represents a single view or page. A multi-page book has multiple canvases.</dd>
<dt style="font-weight: bold; margin-top: 1rem;">Image Service</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">The server that delivers the actual image data, allowing for zooming and dynamic sizing.</dd>
</dl>
<h3>App-Specific Terms</h3>
<dl style="margin-left: 1rem;">
<dt style="font-weight: bold; margin-top: 1rem;">Gallery</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">Your collection of images displayed as cards. This is what you see on screen and can customize.</dd>
<dt style="font-weight: bold; margin-top: 1rem;">Card</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">A single item in your gallery showing a thumbnail and metadata for one image.</dd>
<dt style="font-weight: bold; margin-top: 1rem;">Save Locally</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">Download your gallery as a JSON file to your computer. You control the file and can re-upload it anytime.</dd>
<dt style="font-weight: bold; margin-top: 1rem;">Share</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">Create a public link to your gallery by uploading it to a hosting service (like GitHub Gist).</dd>
<dt style="font-weight: bold; margin-top: 1rem;">Deep Link</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">A URL that automatically loads a specific gallery. Format: <code>yourapp.com/?file=gallery-url</code></dd>
<dt style="font-weight: bold; margin-top: 1rem;">Fork</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">Opening someone else's gallery, modifying it, and saving your own version. The original remains unchanged.</dd>
</dl>
<h3>GitHub Terms</h3>
<dl style="margin-left: 1rem;">
<dt style="font-weight: bold; margin-top: 1rem;">Gist</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">A simple way to share files (like your gallery JSON) with others. Can be public or secret (unlisted).</dd>
<dt style="font-weight: bold; margin-top: 1rem;">Raw URL</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">The direct link to the file content (not the GitHub webpage). This is what you use in your deep links.</dd>
<dt style="font-weight: bold; margin-top: 1rem;">Anonymous Gist</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">A gist created without logging in. Cannot be edited or deleted once created.</dd>
<dt style="font-weight: bold; margin-top: 1rem;">Public Gist</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">Discoverable in search and your profile. Good for sharing widely.</dd>
<dt style="font-weight: bold; margin-top: 1rem;">Secret Gist</dt>
<dd style="margin-left: 2rem; margin-bottom: 0.5rem;">Not listed in search, but anyone with the link can access it. Good for limited sharing.</dd>
</dl>
</div>
<!-- TROUBLESHOOTING -->
<div class="info-section" id="troubleshooting">
<h2>🔧 Troubleshooting</h2>
<p>Institutions have adopted IIIF in a variety of ways, and this is reflected in differences in manifests. The Gallery Builder may not recognize the structure of some manifests. We are committed to expanding compatibility! If you discover manifests that can not be ingested by this tool, please let us know by <a href="https://github.com/davidrumseymapcenter/set-builder/issues" target="blank">creating an issue in GitHub</a> or emailing <a href="mailto:rumseymapcenter@stanford.edu">rumseymapcenter@stanford.edu</a>.</p>
<h3>Adding Manifests</h3>
<div class="workflow-card">
<h4>Problem: "Error fetching IIIF Manifest"</h4>
<p><strong>Possible causes:</strong></p>
<ul>
<li>Invalid URL (typo or incomplete URL)</li>
<li>The server is down or slow</li>
<li>URL is not a IIIF manifest (might be a webpage instead)</li>
<li>CORS (Cross-Origin Resource Sharing) restrictions</li>
</ul>
<p><strong>Solutions:</strong></p>
<ol>
<li>Double-check the URL is complete and correct</li>
<li>Try opening the URL directly in a new browser tab - does it show JSON?</li>
<li>Make sure it's a manifest URL (usually contains "/manifest" or ends in .json)</li>
<li>Try again in a few minutes (server might be temporarily down)</li>
<li>Try a different manifest to verify the app is working</li>
</ol>
</div>
<div class="workflow-card">
<h4>Problem: Manifest loads but no images appear</h4>
<p><strong>Possible causes:</strong></p>
<ul>
<li>Manifest doesn't contain image data (might be collection-level manifest)</li>
<li>Images use an unsupported IIIF version</li>
<li>Image service URLs are broken</li>
</ul>
<p><strong>Solutions:</strong></p>
<ol>
<li>Check browser console (F12) for error messages</li>
<li>Verify the manifest URL is for a specific item, not a collection</li>
<li>Try a known-working manifest to test</li>
</ol>
</div>
<h3>Viewing Images</h3>
<div class="workflow-card">
<h4>Problem: Clicking thumbnail does nothing</h4>
<p><strong>Solutions:</strong></p>
<ol>
<li>Make sure you're clicking the thumbnail image (not the card background)</li>
<li>Check if the viewer panel is visible (might be resized too small)</li>
<li>Try dragging the divider between gallery and viewer to make viewer larger</li>
<li>Refresh the page and try again</li>
</ol>
</div>
<div class="workflow-card">
<h4>Problem: Image loads but won't zoom</h4>
<p><strong>Solutions:</strong></p>
<ol>
<li>Make sure your mouse is over the image viewer area</li>
<li>Try using the +/- buttons instead of mouse wheel</li>
<li>Some images might be low resolution and have limited zoom</li>
<li>Check if browser zoom is interfering (reset to 100%)</li>
</ol>
</div>
<h3>Saving & Loading</h3>
<div class="workflow-card">
<h4>Problem: "Failed to load manifest" when uploading JSON</h4>
<p><strong>Possible causes:</strong></p>
<ul>
<li>File is not valid JSON (corrupted or wrong format)</li>
<li>File was edited incorrectly</li>
<li>Wrong file selected</li>
</ul>
<p><strong>Solutions:</strong></p>
<ol>
<li>Make sure you selected a .json file downloaded from this app</li>
<li>Don't edit the JSON file manually unless you know JSON syntax</li>
<li>Try opening the JSON file in a text editor - does it look like valid JSON?</li>
<li>Re-download the original from your gist if you have one</li>
</ol>
</div>
<div class="workflow-card">
<h4>Problem: Can't find my downloaded JSON file</h4>
<p><strong>Solutions:</strong></p>
<ol>
<li>Check your browser's Downloads folder</li>
<li>Look in your default download location (usually ~/Downloads or C:\Users\YourName\Downloads)</li>
<li>Check browser's download history (Ctrl+J or Cmd+J)</li>
<li>Re-export the gallery if you can't find it</li>
</ol>
</div>
<h3>Sharing & Gists</h3>
<div class="workflow-card">
<h4>Problem: Deep link doesn't load the gallery</h4>
<p><strong>Solutions:</strong></p>
<ol>
<li>Verify the URL format: <code>yourapp.com/?file=GIST_RAW_URL</code></li>
<li>Make sure you used the "Raw" gist URL (not the gist page URL)</li>
<li>Check that the gist is public (not private)</li>
<li>Try opening the gist raw URL directly - does it show JSON?</li>
<li>URL encoding: make sure special characters are properly encoded</li>
</ol>
</div>
<div class="workflow-card">
<h4>Problem: Gist was created but link doesn't work</h4>
<p><strong>Common mistake:</strong></p>
<p>Using the gist page URL instead of the Raw URL.</p>
<p><strong>Wrong:</strong> <code>https://gist.github.com/username/abc123</code></p>
<p><strong>Right:</strong> <code>https://gist.githubusercontent.com/username/abc123/raw/filename.json</code></p>
<p>Always click the "Raw" button and use that URL!</p>
</div>
<h3>Canvas LMS Embedding</h3>
<div class="workflow-card">
<h4>Problem: "This content cannot be displayed in a frame"</h4>
<p><strong>Cause:</strong> Canvas security settings block external iframes.</p>
<p><strong>Solutions:</strong></p>
<ol>
<li>Contact your Canvas administrator to whitelist GitHub Pages</li>
<li>Use "Open in new window" link instead of iframe</li>
<li>Use Canvas "Redirect Tool" if available</li>
</ol>
</div>
<div class="workflow-card">
<h4>Problem: Iframe shows but gallery is cut off</h4>
<p><strong>Solutions:</strong></p>
<ol>
<li>Increase iframe height (try 1000 or 1200 instead of 800)</li>
<li>Make sure width is set to 100% (not fixed pixels)</li>
<li>Check that you didn't accidentally add CSS that limits height</li>
</ol>
</div>
<h3>General Issues</h3>
<div class="workflow-card">
<h4>Problem: App is slow or unresponsive</h4>
<p><strong>Solutions:</strong></p>
<ol>
<li>Some slowness can be expected since images are being retrieved from remote servers</li>
<li>Close other browser tabs to free up memory</li>
<li>Refresh the page</li>
<li>Try a different browser</li>
</ol>
</div>
<div class="workflow-card">
<h4>Problem: Layout looks broken on mobile</h4>
<p><strong>Solutions:</strong></p>
<ol>
<li>Try rotating to landscape orientation</li>
<li>The app works best on tablets and larger screens</li>
<li>On small phones, use "Open in new window" for better experience</li>
</ol>
</div>
<h3>Still Having Issues?</h3>
<p>If you're experiencing problems not covered here:</p>
<ol>
<li>Check the browser console for error messages (press F12, click Console tab)</li>
<li>Try in a different browser (Chrome, Firefox, Safari, Edge)</li>
<li>Clear browser cache and cookies</li>
<li>Make sure you're using a modern, updated browser</li>
<li>Check if your institution's firewall is blocking external resources</li>
</ol>
<div class="tip-box">
<strong>💡 For Developers:</strong> This is an open-source project. You can view the source code, report issues, or contribute improvements on <a href="https://github.com/davidrumseymapcenter/set-builder" target="blank">GitHub</a>.
</div>
</div>
</div> <!-- End info-container -->
</body>
</html>