Posts

---

Custom HTML Option – Object Based PDF

Broswer issues, not the cleanest

---

File block Option – Full PDF Display

Functional but not pleasing

---

Image Option – Converted PDF to PNG

May lose accessibility options this way

---

Gallery Option – Similar issues with the image option but allows more granularity – can change the amount of columns and other options

---

const slides = [ “https://osu-wams-blogs-uploads.s3.amazonaws.com/blogs.dir/9448/files/2026/04/password-zine-8-page-1.png”, “https://osu-wams-blogs-uploads.s3.amazonaws.com/blogs.dir/9448/files/2026/04/password-zine-8-page-2.png”, “https://osu-wams-blogs-uploads.s3.amazonaws.com/blogs.dir/9448/files/2026/04/password-zine-8-page-3.png”, “https://osu-wams-blogs-uploads.s3.amazonaws.com/blogs.dir/9448/files/2026/04/password-zine-8-page-4.png”, “https://osu-wams-blogs-uploads.s3.amazonaws.com/blogs.dir/9448/files/2026/04/password-zine-8-page-5.png”, “https://osu-wams-blogs-uploads.s3.amazonaws.com/blogs.dir/9448/files/2026/04/password-zine-8-page-6.png”, “https://osu-wams-blogs-uploads.s3.amazonaws.com/blogs.dir/9448/files/2026/04/password-zine-8-page-7.png”, “https://osu-wams-blogs-uploads.s3.amazonaws.com/blogs.dir/9448/files/2026/04/password-zine-8-page-8.png” ]; let current = 0; function changeSlide(dir) { current = (current + dir + slides.length) % slides.length; document.getElementById(‘zine-slide’).src = slides[current]; document.getElementById(‘zine-counter’).textContent = (current + 1) + ‘ / ‘ + slides.length; }

Custom HTML Block with Rotating Gallery – Script Option

Requires pngs and knowledge of how to set up custom html. Most feasible and could become a template. Works in edit mode, breaks on post view due to script issues.

---

.zine-carousel { max-width: 500px; margin: 0 auto; font-family: sans-serif; } .zine-slide { display: none; width: 100%; } .zine-slide.active { display: block; } .zine-slide img { width: 100%; display: block; border-radius: 4px; } .zine-nav { display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .zine-nav button { padding: 6px 14px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 13px; background: white; } .zine-nav button:hover { background: #f0f0f0; } .zine-nav button.active { background: #333; color: white; border-color: #333; } (function() { const slides = document.querySelectorAll(‘.zine-slide’); const nav = document.getElementById(‘zine-nav’); let current = 0; slides.forEach((_, i) => { const btn = document.createElement(‘button’); btn.textContent = i + 1; btn.addEventListener(‘click’, () => goTo(i)); nav.appendChild(btn); }); function goTo(n) { slides[current].classList.remove(‘active’); nav.children[current].classList.remove(‘active’); current = n; slides[current].classList.add(‘active’); nav.children[current].classList.add(‘active’); } goTo(0); })();

Custom HTML Block with Rotating Gallery – CSS Option

Similar to script option, less clean on rotation through images, requires more intense CSS knowledge, can also be made into a template. Also seems to break when viewed as post.