The LOOONG Backstory
In February 2022, another volunteer and I attended Spinitron’s webinar on Web Integration. We had just started using Spinitron and wanted to make it a bigger part of our website.
In the webinar, Tom showed us how we could take Spinitron content and make it look as if it were part of our website. It looked great, exactly what we were looking for. Unfortunately it didn’t take long before I got hopelessly lost in the sequence of directions.
Bruce, the other volunteer, was much more knowledgeable about html than I and thought he could pull it off. He gave it a try and got stuck about halfway through.
That’s where the idea sat for nearly a year. Every now and then, though, especially when Spinitron came up, I would bring up that webinar I attended and speculated on how we could make that happen. Perhaps we could hire someone to figure this out?
Finally, a few weeks ago, I decided to take another look at the directions. If I made decent progress, I thought, maybe I could post the place where I got stuck in these forums and someone would be able to help me out.
I took another look at the webinar video. I’m a visual learner, so usually this is my go-to first step. However … although Tom does a good job of explaining the concept and its benefits, he jumps around too much for me to get a clear picture of the steps I’m supposed to follow.
Fortunately I found the written step-by-step directions. They were a big help. After a few hours of trial and error, I had a workable Spinitron webpage that I could integrate into our site. Below I’m going to repost Tom’s direction with some added tips that helped me.
The Starting Directions
Step One: Choose a page on your site to use as a basis to make the custom layout.
For this, I actually added a new page that was totally empty of content (besides the usual header, menu and footer) except for “temporary test.”
Step Two: Open the page in a browser, view source, select all, copy, and paste into your text/code editor.
I use Chrome. I went to the “temporary test” page I just made, right-clicked on the center of the page and choose View Page Source. I selected all and copied. I then opened Text Edit, the bare bones text editor on Macs. I created a new document. When the empty document opened, I went to the Format menu and picked Make Plain Text. Finally I pasted in the content from the webpage.
Step Three: Carve out a chunk of content on that page and replace it with {{SPINITRON_CONTENT}}
I searched the page for “temporary”. It turned out to be the only instance of the word on the page and test was right after it. I deleted only that one line from everything I copied. I don’t know if this will work for everyone but it worked for me. I pasted {{SPINITRON_CONTENT}} to take its place.
Step Four: Delete the parts of the page that you don’t want on the pages with Spinitron content.
I didn’t delete anything else. There’s probably some (a lot?) that I could’ve. I decided to play it safe and see what happens.
Step Five: Save your work, select all, copy, and paste into the Custom Layout input in Spinitron’s Web Customization admin page.
I then viewed my work. At that point, I had gotten to the place where Bruce left off the previous year. I kept on reading the directions and working my way the problems.
Fine Tuning
For one, I needed to use the base tag that Tom describes in the second post of the directions I referred to above. At first, I was going to try to change all the relative URLs on the page, but I wasn’t able to find all of them. I went with the one-line page-wide …
<base href="https://www.lccommunityradio.org">
Adding that instantly solved a lot of problems.
Still the text looked too small and some of the colors didn’t match our website. My initial solution was to go and copy ALL the CSS from our website and pasted it into the Stylesheet box. That turned out to be a mistake. I learned I needed to find only the CSS that would fix the specific problems I was seeing. It took a lot of trial and error to get it to look right. It looks pretty good now, though I still have a couple of improvements I’d like to make.
Flaws
It’s not perfect yet.
We’re subscribed to the two-week archive and there’s a Spinitron bug where the speaker icon that shows audio is available is not showing up.
Also, on phones, it shows the Spinitron page as the desktop version instead of the mobile design the rest of the site shows. Not sure if there’s a way to fix that.
However, I showed it to some of the other volunteers at a meeting today and they liked it. They thought I should incorporate it into the site despite the flaws. So that’s what I did.
Our website is here and click on the Schedule tab to see the Spinitron calendar page integrated.
Hope this helps someone else making a similar journey.
