My lovely fiancee and I have launched our wedding website! Designed by Amber and built by me, using WordPress and Bootstrap. Featuring two custom post types, a carousel and a front-end submission form.
Challenges
Well I think the fact that Amber and I didn’t kill each other will making this site is a good sign right? I mean the wedding is still on! With Amber’s keen eye for detail this site had to be ‘pixel perfect’. One feature that was requested was parallax backgrounds inside the panels. This took some creative thinking in order to be responsive due to the border shapes (because nothing can be just square…).
Other than that there is also a front-end post creator that allows our visitors to request songs. These song requests create a new post (custom post type) that is only visible in the backend. We will be using them to create the playlist for the wedding (well probably not all of them).
Take Aways
The take away from this site was how I created the margins for the panels based on the height of the frame image. This was to allow for the background to go behind the frame easily.
$(document).ready(function() {
var img = $('.frame-img').first();
if ( img.height() > 0 ) {
var margin = "-" + img.height() + "px";
$('.frame-wrapper').each(function() {
$(this).css({ "margin-top" : margin });
$(this).css({ "margin-bottom" : margin });
});
}
});
$( window ).resize(function() {
var img = $('.frame-img').first();
var margin = "-" + img.height() + "px";
$('.frame-wrapper').each(function() {
$(this).css({ "margin-top" : margin });
$(this).css({ "margin-bottom" : margin });
});
});
It’s pretty straight forward stuff but you’ll notice I am doing so on both load and resize in order to keep things responsive.
I am very proud how our wedding site turned out and can’t wait for the big day.