J Scott Smith

Skipping leg days.

Latest Articles & Notes



Articles - October 28th, 2014

Using Picturefill for Responsive, Art Directed Images in Statamic

Nowadays, users expect a website to look great no matter what device they’re using but this can get tricky with viewport sizes and ratios being so drastically different from one another. Picturefill is a tool that enables support for the <picture> element, a developing polyfill that is quickly becoming a standard and will enable the ability to art direct images based on device sizes. I’m going to run through how I’ve used it in conjunction with Statamic’s image transform tag.

Read Article

Articles - August 21st, 2014

Creating a responsive SVG with no aspect ratio

Recently, I was attempting to use an SVG as a background image that I had intended to fill background completely, even if it meant stretching and changing the aspect ratio of the SVG. Turned out that was trickier than I’d anticipated, and I had to figure out which attributes needed to be changed in my SVG to make it happen. So, if you ever need an SVG to scale non-uniformly, here’s how.

Read Article

Articles - August 17th, 2014

Listing entries from multiple folders with unique markup in Statamic

For this site, I had planned to list both “articles” and “notes” as entries on the homepage, chronologically. Turns out it’s trickier than I thought to format each of the entries differently but I was able to sort it out. I’ll go over how it can be accomplished with a just a hidden field and some conditional statements.

Read Article