Tangerine Development

Szu-Han Ho, a professor at the University of New Mexico and performance artist, needed some updates to her existing website. It was done a few years ago using the Stacey Content Management System. This content management system has been around for about 10 years, but its development has gone over to GitHub and isn't very popular. The existing template was not mobile compatible and also had some aesthetic issues that Szu-Han wanted fixed.

I decided to take the existing template and swap out the back end for Bootstrap, which would also allow me to include image carousels and collapsible menus for mobile.

The front page of the site on a 425px wide phone, before and after.

Stacey CMS is a flat-file CMS much like Pico, so I felt more than comfortable digging in and changing things. It was nice to work with in that it was simple, but had a lot of drawbacks in power. For example, I wanted to add indicators for all of the carousels on the interior, but Stacey would not provide iterators for each image, which made things much less elegant. I also could not tell it to do something with only the first image.

For example, here is the partial template for the interior image carousels:

<div id="galleryCarousel" class="col-12 top-space carousel slide" data-ride="carousel" data-interval="7000">
    <ol class="carousel-indicators">
        foreach $images do
        <li data-target="#galleryCarousel"></li>
        endforeach
    </ol>
    <div class="carousel-inner">
    foreach $images do
        <div class="carousel-item"> 
            <img class="d-block mx-auto h-100" src="@url" alt="@title">
        </div>
    endforeach
    </div>
    .... <!-- Previous/next buttons omitted -->

Each of the carousel indicators needs to be assigned the index of the image that it is supposed to link to. In order to make that work, I used a simple jQuery function after the page is loaded:

    var slides = $(".carousel-inner .carousel-item");
    var indicators = $(".carousel-indicators li");
    // We have to make the first one active, otherwise it won't appear.
    if (slides.length > 0) {
        slides.first().addClass('active');
        indicators.first().addClass('active');
    }

    // Because Stacey CMS won't give me an iterator for these
    for (var i = 0; i < indicators.length; i++) {
        indicators[i].setAttribute('data-slide-to', i);
    }

And now, it works. Another issue I ran into that I simply couldn't solve with jQuery was that I could not get a count of images. I only wanted to create the carousel if there was more than one image on a project (obviously). This seems like it would be simple, but I wound up having to hack Stacey because its collections do not come with a length! I wound up having to add a boolean variable to image collections that would tell me if it needed a gallery.

Anyway, that's the fun part of programming, no? Knowing just enough to do damage. Here's the before and after for the project image carousels.

An example project page with responsive Bootstrap Carousel, before and after.

Now that you've heard about the changes I made, I recommend visiting her site and watching the videos of her performance art. They're very moving and interesting to watch.