Winning Pictures

Tools used

• Wordpress • HTML • CSS • Javascript • Bootstrap

My contribution

 Development


For this site, I was responsible for content placement, optimization, and interfacing with multiple hosting companies. This meant talking with hosting companies, installing wordPress on their servers, and migrating localhost wordPress sites onto those servers.

I originally designed my client's site using bootstrap, HTML, and CSS, but then, she asked me to transfer her site into Wordpress, so that she could make edits easily to her content as needed. I kept the look and feel as close to the original site as possible, and built her a new site in wordPress. I also created a guide for her to edit her content, complete with images and a convenient indexing system for editing specific content.


Visit Site »


Highlighted Code

Javascript Header Image Swap

I noticed that it is often necessary to use a different header image on cellphones than on bigger screens. I wrote a vanilla javascript solution to this problem, which works within Wordpress.



var pageWidth = document.body.clientWidth;
//console.log(pageWidth + " is the pageWidth");

//check doc width
if (pageWidth <= 780){
	
	//find img within mast head div
	var imageInMasthead = document.getElementById('masthead').getElementsByTagName('img');
	
	//replace src of element with smaller screen logo src
	//console.log(imageInMasthead[0] + " is the imageinmasthead first img");
	imageInMasthead[0].src='wp-content/uploads/2016/09/WPBanner.jpg';
}

Custom CSS

By using a Wordpress plugin, I was able to include some custom cross-browser CSS. This code is cropping an image into a cirlce.


.circular-image img {
    width: 300px;                
    height: 300px;                
    -webkit-border-radius: 150px;               
    -moz-border-radius: 150px;                
    -ms-border-radius: 150px; 
    -o-border-radius: 150px;
    border-radius: 150px;
}