# UMich Arts Organization Pages - External Files Implementation Guide

## Files to Upload

Upload these files to your Squarespace site (Settings → Advanced → Code Injection or file storage):

### CSS Files

1. **umich-org-styles.css** - Main styling for organization pages

**umich-org-smg.css - SMG styling

2. **umich-org-youtube.css** - YouTube video container styling

### JavaScript Files

1. **umich-org-main.js** - Main organization info (banner, logo, name, links, etc.)

umich-org-smg.js - Student Mini Grants
https://arts.umich.edu/s/umich-org-smg.js

2. **umich-org-social.js** - Instagram and TikTok feeds

3. **umich-org-youtube.js** - YouTube video embed

4. **umich-org-update.js** - Update button with last updated date

## Implementation on Each Organization Page

### Step 1: Add the SAO-ID element

```html

<div class="SAO-ID" style="display: none;">YOUR-SAO-ID-HERE</div>

```

### Step 2: Include the external files

Replace `https://yourdomain.com/path/to/` with your actual file URLs.

#### Main Organization Info

<link rel="stylesheet" href="https://arts.umich.edu/s/umich-org-styles.css">

<div id="umichOrgLoading" class="umich-org-loading">

<p>Loading organization...</p>

</div>

<div id="umichOrgContainer" class="umich-org-container"></div>

<div id="umichOrgError" class="umich-org-error" style="display: none;"></div>

<script src="https://arts.umich.edu/s/umich-org-main.js"></script>

#### YouTube Video (Optional - only if org has video)

<link rel="stylesheet" href="https://arts.umich.edu/s/umich-org-youtube.css">

<center>

<div id="videoContainer" class="video-container" style="display: none;">

<iframe id="youtubeIframe" width="80%" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

</div>

</center>

<div id="umichYoutubeUrl" class="umich-youtube-url"></div>

<script src="https://arts.umich.edu/s/umich-org-youtube.js"></script>

#### Social Media Feeds (Optional - only if org has Instagram/TikTok)

<div id="umichOrgSocialContainer" class="umich-org-social-container"></div>

<script src="https://arts.umich.edu/s/umich-org-social.js"></script>

#### Update Button

<div id="umichOrgUpdate" style="text-align: right; margin-top: 40px;"></div>

<script src="https://arts.umich.edu/s/umich-org-update.js"></script>

SMG Projects

<link rel="stylesheet" href="https://arts.umich.edu/s/umich-org-smg.css"> <div id="umichOrgSMG"></div> <script src="https://arts.umich.edu/s/umich-org-smg.js"></script>

## Complete Page Template Example

```html

<!-- SAO-ID (hidden) -->

<div class="SAO-ID" style="display: none;">1234</div>

<!-- Main styles -->

<link rel="stylesheet" href="https://yourdomain.com/path/to/umich-org-styles.css">

<!-- Main organization info -->

<div id="umichOrgLoading" class="umich-org-loading">

<p>Loading organization...</p>

</div>

<div id="umichOrgContainer" class="umich-org-container"></div>

<div id="umichOrgError" class="umich-org-error" style="display: none;"></div>

<script src="https://yourdomain.com/path/to/umich-org-main.js"></script>

<!-- YouTube video (optional) -->

<link rel="stylesheet" href="https://yourdomain.com/path/to/umich-org-youtube.css">

<center>

<div id="videoContainer" class="video-container" style="display: none;">

<iframe id="youtubeIframe" width="80%" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

</div>

</center>

<div id="umichYoutubeUrl" class="umich-youtube-url"></div>

<script src="https://yourdomain.com/path/to/umich-org-youtube.js"></script>

<!-- Social media feeds (optional) -->

<div id="umichOrgSocialContainer" class="umich-org-social-container"></div>

<script src="https://yourdomain.com/path/to/umich-org-social.js"></script>

<!-- Update button -->

<div id="umichOrgUpdate" style="text-align: right; margin-top: 40px;"></div>

<script src="https://yourdomain.com/path/to/umich-org-update.js"></script>

```

---

## Benefits

✅ **Easy Updates** - Change JavaScript/CSS once, updates everywhere

✅ **Cleaner Pages** - Minimal code on each page

✅ **Better Caching** - Browsers cache external files

✅ **Easier Maintenance** - All logic in central files

## Making Updates

To update any functionality:

1. Edit the appropriate .js or .css file

2. Upload the new version to your server

3. All pages using that file automatically get the update

4. No need to edit individual pages!