Custom layout

⚙️ Web integration
,
1

A custom page layout in Spinitron allows seamless navigation between your station’s web site and public pages served by spinitron.com.

For example, check out https://www.ohmradio963.org/. If you now navigate to Programming: Schedule you’ll get to a page served by Spinitron. Click around in the page body and you’re navigating among Spinitron’s public pages for OHM Radio. If you now click a different link in the top menu you’ll get back to OHM Radio’s web site.

With your custom layout saved in Spinitron, we serve any request for a public page with a layout=1 query parameter using your layout instead of the Spinitron’s default (white label) layout.

In this way, we can serve calendar, playlists and the DJ, show, and on-air pages that look and behave like yours including the same header, footer, navigation and other furniture as your web site’s pages.

Here’s our demo site for the pseudo-station TEST that we host at www.testradio.org.

image
image1082×1358 67.2 KB

The green arrows are links to pages that are handled by our web server, as are the links in the drawer opened by the hamburger menu (pink arrow). All other links are for www.testradio.org.

The custom layout saved in Spinitron for the station TEST is the same as this page except

  • it has one card in the main content area instead of three, and
  • the card is empty except for the special marker {{SPINITRON_CONTENT}} that indicates where Spinitron puts page content.

Take a look at index.html and custom-layout.html in the source code for this demo and compare them side-by-side.

Workflow

Here’s a possible workflow for making a custom layout in Spinitron.

  1. Choose a page on your site to use as a basis to make the custom layout.

  2. Open the page in a browser, view source, select all, copy, and paste into your text/code editor.

  3. Carve out a chunk of content on that page and replace it with

     {{SPINITRON_CONTENT}}

  4. Delete the parts of the page that you don’t want on the pages with Spinitron content.

  5. Save your work, select all, copy, and paste into the Custom Layout input in Spinitron’s Web Customization admin page.

  6. View your work at http://spinitron.com/____/?layout=1 replacing the underscores with your station’s ID, e.g. http://spinitron.com/TEST/?layout=1 is our demo site.

Any changes you make to your site’s layout, e.g. adding links to Spinitron, you need to synchronize in the custom layout. I recommend you work on a copy of the custom layout in an editor and saved on your computer and copy-paste-all into Spinitron every time you want to check the results. It’s not practical to make edits in the textarea in the Spinitron web customization form.

See also the CNAME and HTTPS topic.

2

You can use the <base> tag

Spinitron uses absolute URLs for all links to other Spinitron pages when it renders a page using a custom layout. This allows you to use the HTML <base> tag to set the base URL for all relative URLs in your layout.

For example, let’s say your site www.example.com has a style-sheet tag on every page:

<link href="/static/styles/main.css" type="text/css">

If you simply copy that into a Spinitron custom layout, it wont work. The browser will try to load https://spinitron.com/static/styles/main.css instead of https://www.example.com/static/styles/main.css

You could modify the tag’s href make it absolute

<link href="https://www.example.com/static/styles/main.css" type="text/css">

That will work. But if you have a lot links like this it might be easier to instead use

<base href="https://www.example.com">

Which will have the same effect and apply to all the other relative URLs in the layout.

Domain vs page-relative URLs

If you have page-relative URLs, for example

<a href="something.html">

Then you may need to add a bit more to the base

<base href="https://www.example.com/path/to/page/">

But if this ends up getting complicated, you’re always free to convert your relative URLs to absolute when you produce your Spinitron custom layout.

Use the <base> tag early and only once

As MDN says, the <base> tag must come before any other elements with attributes whose values are URLs, which also means it can be used only once.

3

See the related topic on using a CNAME and HTTPS certificates with your custom layout.