Center and scale images

I’m building out a new Shopify theme, and as product images for themes are rarely predictable, I need to make sure the images fill the parent, but do not produce any distortion cause by min or max width. In addition, the images need to be centered vertically or horizontally (depending on which side is longer).

To do that we use a little JS.


var extraDelay = 0;
    $(".product-list li a.product-thumb img").each(function(){
        extraDelay = extraDelay + 50;

        var parentWidth = $(this).parent("a").width();
        var parentHeight = $(this).parent("a").height();

        var width = $(this).width();
        var height = $(this).height();

        if(width > height){
            // wider than tall

            var diff = width / height;
            var newWidth = parentHeight * diff;
            var offset = ((newWidth - parentWidth) / 2 )- 1;

            $(this).css({
                height: parentHeight,
                left: -offset
            });

        } else if(width < height){
            // taller than wide

            var diff = height / width;
            var newHeight = parentWidth * diff;
            var offset = ((newHeight - parentHeight) / 2 )- 1;

            $(this).css({
                width: parentWidth,
                top: -offset
            });
        }

        $(this).delay(200 + extraDelay/3).animate({
            opacity: 1
        }, 200 + (extraDelay / 1.5), function() {
            // yay faded in!
        });

    });

What this does, is get the height and width of the parent and the image we need to scale (overflow on the parent is set to hidden in the css). It then scales the shortest side of the image to match it's parent.On the longer side, the difference between it and it's parent is calculated, and then the image is moved by half that amount (either up or to the left, depending on wether the long side is height or width), thus centering the image in it's parent.

It also fades the image in so you don't have to see the scaling happen, and fades each image slightly later and for slightly longer than the one before it. Just makes it feel a bit nicer.

In the below image, you can see it in action. The blue highlight shows the actual image dimensions, properly centered within the parent.

Layout - Project Title

And this is the source image:
il_570xN.464762154_li1r_large

sprCV | A Responsive Resume Template

It’s 2012, if you work on the web and are looking for a job, or want to be head hunted you need a resume, and it should be responsive.

PDF resume? No way. Can’t load them on most phones, few tablets, and they are unweldly – even more than in the past for Windows 8 users. It’s time everyone went responsive for their CV / resume.

To that end I’ve built my own (should drink my own cool-aid right?) fully responsive resume template, and am releasing it now. This is my real life CV, so hopefully I’ve not left any significant spelling or grammatical errors!

It’s available on Github, and you can see a demo of it here. It’s GPLv2 & MIT for the markup and CSS, logos remain property of my various clients.

Responsive Resume Template

Disruptor App Template (HTML/CSS)

Romulan Disruptor App, Destroy Humans With One Tap.

In November I built a new app website template, but then went another direction with the app & it’s related service. I found the template the other day and figured it would probably be useful to a few people out there so today I cleaned it up, added some Romulans, and here it is.

A WordPress version is coming, but cleaning it up for release will take a bit longer so maybe in the next couple weeks. You can checkout the theme demo here, and then of course the image below. The source markup and CSS are on github.

The theme has a main page, single page, contact form page, and a pricing structure template, all available from the template’s top nav.

App Website Template

If you find it useful and get an app released using it, I’d love to check it out and your app too of course, so drop me a comment if you want. The license is MIT/GPLv2/Public so do whatever you like with it.

sprInvoice Template Released

Update: this now has print styles.

Two days ago I needed a simple HTML invoice template where I could just open it up, drop in my text and payment buttons, and go.

Demo links:

A quick google search revealed a couple of generators, and so on, but not a single static HTML invoice template available for download, free or other wise.

So today I had a little bit of time, and built my own to release. It’s fully responsive, and easy on the eyes. It uses only two images, those are the payment buttons which you may or may not need – either way they are base64 encoded in the CSS so you don’t have to worry about managing them.

Desktop:

Mobile:

It’s available on Github, under MIT and GPLv2, so take your pick.

To use, simply download and edit. It comes in 3 varieties, LESS, SCSS, and CSS. There are also 3 main classes that can be applied to #invoice to change the look based on whether the invoice is new, paid, or late.

A print style sheet is coming in the next couple days.