bavotasan.com » Tutorials

Using :target to Create a Lightbox Effect with CSS3

c.bavota — Tue, 07 Feb 2012 15:42:10 +0000

If you’ve messed around with CSS3 you have probably seen some of the new pseudo classes pop up here and there. An interesting one that I just started to use is :target. A full explanation of what it does can be found on the W3 site but for the purposes of this tutorial, we will be using it to create a Lightbox effect. I actually developed this for PressWork and so I decided to call it Pressbox.

First we need to create a thumbnail and surround it with an anchor tag.

<a href="#image1"><img src="http://yoursite.com/images/image1.jpg" alt="" />a>

The href parameter is very important since it will be what links our thumbnail to our larger image. We will use the same name as the ID in our larger image like so:

<a href="#" id="image1" class="pressbox"><img src="http://yoursite.com/images/image1-big.jpg" alt="">a>

The larger image needs a class that we can reference. I used pressbox but you can use whatever you want as long as you modify the CSS accordingly. Here is the CSS that will get everything working properly:

.pressbox {
	width: 0;
	height: 0;
	position: fixed;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 9999;
	text-align: center;
	background: rgba(0,0,0,0.7);
	}
 
	.pressbox img	{
		opacity: 0;
		padding: 10px;
		background: #ffffff;
		margin-top: 100px;
		-webkit-box-shadow: 0px 0px 15px #444;
		-moz-box-shadow: 0px 0px 15px #444;	
		box-shadow: 0px 0px 15px #444;	
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
		transition: opacity .25s ease-in-out;		
		}
 
.pressbox:target {
	width: auto;
	height: auto;
	bottom: 0;
	right: 0;
	}
 
	.pressbox:target img {
		opacity: 1;
		}

We’ve added an opacity transition so that our Pressbox will fade in once we click on the thumbnail. This will all work because of the :target pseudo class that will display the the element that uses the same ID that is referenced by the href parameter in the thumbnail’s anchor tag.

You can test it out below.

Remember that this will only work in the following browsers:

Firefox 1.0+
Safari 3.1+
Opera 9.5+
Chrome 2+

Increase Max Upload File Size in WordPress

c.bavota — Tue, 17 Jan 2012 21:12:51 +0000

Sometimes, you need to upload a large file to your site, and the default 8mb limit in WordPress isn’t enough. I attempted to change my limit directly on my server, then in the .htaccess file and then in wp-config.php but neither change worked for me. Then I came across this little snippet by Word Impressed which actually worked and allowed me to increase my max upload file size limit.

All you need to do is create a php.ini file and upload it into your /wp-admin folder. Then add the following:

memory_limit = 32M
upload_max_filesize = 32M
post_max_size = 32M
file_uploads = On

You can change 32m to whatever max file size you want.

Shortcode to Encode Email in WordPress Posts

c.bavota — Wed, 11 Jan 2012 22:18:05 +0000

A while back I wrote a short tutorial entitled “A Clever and Safe Way to Display your Email Address” which explained how you could use CSS to safely display your email on a web page. That way still works well but if you’re using WordPress, you can take advantage of a function called antispambot() to display emails addresses anywhere on your site.

If you code a page template directly, you can add the function like so:

antispambot("youremail@yoursite.com");

I needed a away to take advantage of the antispambot() function within my post and page content, so I decided to create a shortcode that would make it super easy to reuse.

// EMAIL ENCODE SHORTCODE
function email_encode_function( $atts, $content ){
	return '.antispambot("mailto:".$content).'">'.antispambot($content).'';
}
add_shortcode( 'email', 'email_encode_function' );

Once you add the above code snippet to your theme’s function.php file you can use the following structure to safely display an email address in your post or page content:

[email]you@you.com[/email]

You can read more about antispambot() in the codex: http://codex.wordpress.org/Function_Reference/antispambot

Log in to WordPress using an Email Address

c.bavota — Wed, 28 Dec 2011 16:26:52 +0000

I needed to figure out how to allow a user to use either their username or email address to log into WordPress. It took a bit of rooting around but the final piece of code ended up being pretty simple.

function login_with_email_address($username) {
	$user = get_user_by_email($username);
	if(!empty($user->user_login))
		$username = $user->user_login;
	return $username;
}
add_action('wp_authenticate','login_with_email_address');

Place that in your functions.php file and you will be able to sign into your WordPress site using an email address or by default, the username.

HTML5 Placeholder jQuery Fix

c.bavota — Sun, 20 Nov 2011 17:00:45 +0000

I was working with placeholder text for the input fields on a recent project and I needed to make sure that the text would appear in all browsers. I had to use a old technique that many of you might be familiar with:

<input type="text" name="first_name" value="First Name" onfocus="if(this.value == 'First Name') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'First Name'; }" />

That technique uses inline JavaScript to check if the value of the input field matches the default placeholder text. It works in every browser but it does require a lot of extra code on each of your input fields. It would also submit the placeholder text as the value of the input so you would have to place some validation to remove any value that matched the placeholder text.

All of those issues are solved in HTML5 with the placeholder parameter. Now your input tag would just look like this:

<input type="text" name="first_name" placeholder="First Name" />

That does the exact same thing and will not submit a value for the empty input fields.

This HTML5 feature is supported in the following browsers:

Firefox: 3.7+
Safari: 4.0+
Chrome: 4.0+
Opera: 11.0+
iPhone: 4.0+

Since it doesn’t work in IE and older browsers, you need to use something like this jQuery fix:

<script type="text/javascript">
/* 
$(function() {
	var input = document.createElement("input");
    if(('placeholder' in input)==false) { 
		$('[placeholder]').focus(function() {
			var i = $(this);
			if(i.val() == i.attr('placeholder')) {
				i.val('').removeClass('placeholder');
				if(i.hasClass('password')) {
					i.removeClass('password');
					this.type='password';
				}			
			}
		}).blur(function() {
			var i = $(this);	
			if(i.val() == '' || i.val() == i.attr('placeholder')) {
				if(this.type=='password') {
					i.addClass('password');
					this.type='text';
				}
				i.addClass('placeholder').val(i.attr('placeholder'));
			}
		}).blur().parents('form').submit(function() {
			$(this).find('[placeholder]').each(function() {
				var i = $(this);
				if(i.val() == i.attr('placeholder'))
					i.val('');
			})
		});
	}
});
/* ]]> */
script>

First thing it does is check whether the placeholder parameter is supported. If it is, it will do nothing. If it isn’t it will perform a few things to emulate the HTML5 placeholder parameter. In order to style how your placeholder text appears you can use the following CSS:

.placeholder {
  color: #aaa;
  }

The fix will also switch the input type to “text” for all password inputs so that your placeholder text will not appear as a bunch of black dots. The final part of the fix will empty the value of the input field if it contains the placeholder text so that it is not submitted as a real value in your form.

Since this is a jQuery fix, you need to make sure that you have included a link to jQuery between your head tags:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">script>

With everything in place, you now have a backwards compatible way of using the new HTML5 placeholder parameter so that all of your visitors have the same experience when they are on your site.

Resources:

http://www.webgeekly.com/tutorials/jquery/creating-a-cross-browser-form-field-placeholder/
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

A Better Voting System for WordPress

c.bavota — Mon, 24 Oct 2011 11:14:56 +0000

I published a tutorial quite a while back called Simple Voting for WordPress with PHP and jQuery. It was not without its problems, and recently I needed to improve on it for a client, so I thought it would be a good idea to finally release an updated version.

The original tutorial relied on an outside PHP file to process the votes but now I use the built-in Ajax function in WordPress. That way it’s more secure and efficient. To get everything started, let’s take a look at the jQuery required:

<script type="text/javascript">
/* 	
(function($) {
	$("#vote").not(".disabled").click(function() {
		var el = $(this);
		var nonce = $("input#voting_nonce").val();
		var data = {
			action: 'add_votes_options',
			nonce: nonce,
			postid: 'ID; ?>',
			ip: 'REMOTE_ADDR']; ?>'			
		};
		$.post('admin-ajax.php'); ?>', data,
		function(response){
			if(response!="-1") {
				el.html("VOTED").unbind("click");
				if(response=="null") {
					alert("A vote has already been registered to this IP address.");
				} else {
					$("#votecounter").html(response);
					alert("Thanks for your vote.");
				}
			} else {
				alert("There was a problem registering your vote. Please try again later.");
			}
		});
		return false;
	});
})(jQuery);
/* ]]> */
script>

If the vote button is clicked, it will send the Ajax request and process it accordingly, depending on a few things. The only thing missing, is the code to register a cookie once the vote has been calculated so that voters can only vote once. Let’s include two cookie functions originally created by Peter-Paul Koch and add a block of code to our original script:

<script type="text/javascript">
/* 	
(function($) {
	function setCookie(name,value,days) {
	    if (days) {
	        var date = new Date();
	        date.setTime(date.getTime()+(days*24*60*60*1000));
	        var expires = "; expires="+date.toGMTString();
	    }
	    else var expires = "";
	    document.cookie = name+"="+value+expires+"; path=/";
	}
 
	function getCookie(name) {
	    var nameEQ = name + "=";
	    var ca = document.cookie.split(';');
	    for(var i=0;i < ca.length;i++) {
	        var c = ca[i];
	        while (c.charAt(0)==' ') c = c.substring(1,c.length);
	        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	    }
	    return null;
	}
 
	$("#vote").not(".disabled").click(function() {
		var el = $(this);
		el.html('');
		var nonce = $("input#voting_nonce").val();
		var data = {
			action: 'add_votes_options',
			nonce: nonce,
			postid: 'ID; ?>',
			ip: 'REMOTE_ADDR']; ?>'			
		};
		$.post('admin-ajax.php'); ?>', data,
		function(response){
			if(response!="-1") {
				el.html("VOTED").unbind("click");
				if(response=="null") {
					alert("A vote has already been registered to this IP address.");
				} else {
					$("#votecounter").html(response);
					alert("Thanks for your vote.");
				}
				var cookie = getCookie("better_votes");
				if(!cookie) {
					var newcookie = "ID; ?>";
				} else {
					var newcookie = cookie + ",ID; ?>";
				}
				setCookie("better_votes", newcookie, 365);
			} else {
				alert("There was a problem registering your vote. Please try again later.");
			}
		});
		return false;
	});	
})(jQuery);
/* ]]> */
script>

Now a cookie will be registered once the vote has been tallied. This is all the jQuery we need to make our voting system work. If jQuery is not already loaded in your WordPress theme, you may also need to add this into your header.php file before the wp_head() code:

php wp_enqueue_script( 'jquery' ) ?>

The following is the PHP code that we need to process the vote on the server side. This will need to be placed in your theme’s functions.php file. If the file doesn’t exist, just create it and make sure this code is placed between the PHP tags:

add_action("wp_ajax_add_votes_options", "add_votes_options");
add_action("wp_ajax_nopriv_add_votes_options", "add_votes_options");
function add_votes_options() {
	if (!wp_verify_nonce($_POST['nonce'], 'voting_nonce'))
		return;
 
	$postid = $_POST['postid'];
	$ip = $_POST['ip'];
 
	$voter_ips = get_post_meta($postid, "voter_ips", true);
	if(!empty($voter_ips) && in_array($ip, $voter_ips)) {
		echo "null";
		die(0);
	} else {
		$voter_ips[] = $ip;
		update_post_meta($postid, "voter_ips", $voter_ips);
	}	
 
	$current_votes = get_post_meta($postid, "votes", true);
	$new_votes = intval($current_votes) + 1;
	update_post_meta($postid, "votes", $new_votes);
	$return = $new_votes>1 ? $new_votes." votes" : $new_votes." vote";
	echo $return;
	die(0);
}

The two action calls at the beginning hook into the Ajax function from the jQuery. We need both since one is for logged-in users and the other is for guests. Next we check for the security nonce, and end the process if it is not set correctly. This is a huge improvement over my old code that had absolutely no security whatsoever. If all is good, we start processing the vote by checking if the voters IP address has already been registered. If so, the process stops and returns a “null” value. Otherwise we registered the vote and IP address and echo out the total votes.

If you take a look at the jQuery above, you can see how the different responses will be processed. A “null” response will alert the voter that their IP address has already been registered so their new vote will not count. A response of “-1″ means something went wrong and we alert the voter. If everything goes well, the vote is registered, the voter is thanked and the total number of votes increases on the page.

There you have all the jQuery and PHP required to get it working on the backend, but you still need some PHP/HTML in order for things to work on the front end.


// This will display "0 votes" and increase as votes are added
$votes = get_post_meta($post->ID, "votes", true);
$votes = !empty($votes) ? $votes : "0";
if($votes == 1) $plural = ""; else $plural = "s";
echo ''.$votes.' vote'.$plural.'
';
?>
 

// This will display the vote button and disable it if a cookie has already
// been set. We also add the security nonce here. 
$hasvoted = $_COOKIE['better_votes'];
$hasvoted = explode(",", $hasvoted);
if(in_array($post->ID, $hasvoted)) {
	$vtext = "VOTED";
	$class = ' class="disabled"';
} else {
	$vtext = "VOTE";
	$class = "";
}
?>
 echo $class; ?>> echo $vtext; ?>
 if(function_exists('wp_nonce_field')) wp_nonce_field('voting_nonce', 'voting_nonce'); ?>

So there you have it, a more efficient voting system for WordPress that is secure and will hopefully double guard you against fraudulent voting. You can see this working live on the new Bloodshots website. It will only be active between Oct 24th and Oct 28th while people can vote for the films.

An Even Better Author List in WordPress

c.bavota — Fri, 30 Sep 2011 17:11:32 +0000

I already wrote about this a while back in “How to Display an Author List with Avatars in WordPress” but I recently realized that it needed updating. There’s a better way of collecting and displaying all the information and you can also add a few variables to give you more control over the output.

Let’s start off with creating our variables:

$display_admins = false;
$order_by = 'display_name'; // 'nicename', 'email', 'url', 'registered', 'display_name', or 'post_count'
$role = ''; // 'subscriber', 'contributor', 'editor', 'author' - leave blank for 'all'
$avatar_size = 32;
$hide_empty = true; // hides authors with zero posts

Next we can add the code to gather our contributors:

if(!empty($display_admins)) {
	$blogusers = get_users('orderby='.$order_by.'&role='.$role);
} else {
	$admins = get_users('role=administrator');
	$exclude = array();
	foreach($admins as $ad) {
		$exclude[] = $ad->ID;
	}
	$exclude = implode(',', $exclude);
	$blogusers = get_users('exclude='.$exclude.'&orderby='.$order_by.'&role='.$role);
}
$authors = array();
foreach ($blogusers as $bloguser) {
	$user = get_userdata($bloguser->ID);
	if(!empty($hide_empty)) {
		$numposts = count_user_posts($user->ID);
		if($numposts < 1) continue;
	}
	$authors[] = (array) $user;
}

Now that we have all the information we need, let’s display it:

echo '';
foreach($authors as $author) {
	$display_name = $author['display_name'];
	$avatar = get_avatar($author['ID'], $avatar_size);
	$author_profile_url = get_author_posts_url($author['ID']);
 
	echo ', $author_profile_url, '">', $avatar , ', $author_profile_url, '" class="contributor-link">', $display_name, '
';
}
echo '
';

If we put all the code together we get the following:


$display_admins = false;
$order_by = 'display_name'; // 'nicename', 'email', 'url', 'registered', 'display_name', or 'post_count'
$role = ''; // 'subscriber', 'contributor', 'editor', 'author' - leave blank for 'all'
$avatar_size = 32;
$hide_empty = true; // hides authors with zero posts
 
if(!empty($display_admins)) {
	$blogusers = get_users('orderby='.$order_by.'&role='.$role);
} else {
	$admins = get_users('role=administrator');
	$exclude = array();
	foreach($admins as $ad) {
		$exclude[] = $ad->ID;
	}
	$exclude = implode(',', $exclude);
	$blogusers = get_users('exclude='.$exclude.'&orderby='.$order_by.'&role='.$role);
}
$authors = array();
foreach ($blogusers as $bloguser) {
	$user = get_userdata($bloguser->ID);
	if(!empty($hide_empty)) {
		$numposts = count_user_posts($user->ID);
		if($numposts < 1) continue;
	}
	$authors[] = (array) $user;
}
 
echo '';
foreach($authors as $author) {
	$display_name = $author['display_name'];
	$avatar = get_avatar($author['ID'], $avatar_size);
	$author_profile_url = get_author_posts_url($author['ID']);
 
	echo ', $author_profile_url, '">', $avatar , ', $author_profile_url, '" class="contributor-link">', $display_name, '
';
}
echo '
';
?>

All it needs is a little CSS to style it:

.contributors .avatar {	
	float: left;
	clear: both;
	background: #fff;
	padding: 2px;
	border: 1px solid #ccc;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	-webkit-box-sizing: content-box; 
	}
 
	.contributors .avatar:hover  {
		border-color: #999;
		}
 
.contributors .contributor-link {
	float: left;
	margin: 10px 0 0 10px;
	}

You can play around with the CSS to get it looking the way you want and with the variables in place, you can control exactly what type of author list will be displayed.

Adding an Inset Shadow to an Image Using CSS3

c.bavota — Wed, 21 Sep 2011 14:18:32 +0000

Yesterday PressWork launched a new theme in conjunction with Empire Avenue. The original design had a really nice shadow effect on the images and I wanted to make sure that I could code it using CSS3. The problem was, CSS3 inset shadows don’t work at all on images. The only way to get the effect to work is to use the ::before selector to add a container that can be positioned above the image.

This is how the HTML should look:

<a href="http://presswork.me/themes/socialstock/" class="img-shadow"><img src="http://presswork.me/wp-content/uploads/2011/09/socialstock_home.jpg" alt="" />a>

That will display an image surrounded by an anchor tag.

Here is the CSS3 we need:

.img-shadow {
	position: relative;
	max-width: 100%;
	float: left;
	}
 
    .img-shadow::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: inset 0 0 8px rgba(0,0,0,.6);
		-moz-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
		-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
	   } 
 
.img-shadow img {
	float: left;
	}

Here is a live example:

The only concern anyone might have when using this effect is that the container must use the float style in order for it to work properly. If anyone can find a better solution please leave a comment below.

You can also take a look at the SocialStock theme demo to see it working on multiple images.

Create a Black & White Thumbnail in WordPress

c.bavota — Tue, 13 Sep 2011 18:37:52 +0000

A while back I worked on a site that required a hover effect where a black and white image faded into a color image. I wrote a tutorial called Creating a Mouseover Fade Effect with jQuery on the jQuery technique I used for the hover. That effect no longer requires jQuery since we can now use CSS3 transitions (see A Simple Fade with CSS3) but the real issue was with having to upload two separate images to get the effect to work, which required an image editing software like Photoshop. Thankfully, Otto just wrote a great article on a way that you can use some built in WordPress functions and a little PHP to automatically create a black and white thumbnail when you upload an image.

First we need to create a new thumbnail using add_image_size(). We’ll use the same thumbnail settings from the WordPress Media page in the wp-admin. Add this to your functions.php file within the PHP tags:

add_action('after_setup_theme','bw_images_size');
function bw_images_size() {
	$crop = get_option('thumbnail_crop')==1 ? true : false;
	add_image_size('thumbnail-bw', get_option('thumbnail_size_w'), get_option('thumbnail_size_h'), $crop);
}

With that in place, we can now add the following function which will automatically create a black and white thumbnail:

add_filter('wp_generate_attachment_metadata','bw_images_filter');
function bw_images_filter($meta) {
	$file = wp_upload_dir();
	$file = trailingslashit($file['path']).$meta['sizes']['thumbnail-bw']['file'];
	list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
	$image = wp_load_image($file);
	imagefilter($image, IMG_FILTER_GRAYSCALE);
	//imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR);
	switch ($orig_type) {
		case IMAGETYPE_GIF:
			$file = str_replace(".gif", "-bw.gif", $file);
			imagegif( $image, $file );
			break;
		case IMAGETYPE_PNG:
			$file = str_replace(".png", "-bw.png", $file);
			imagepng( $image, $file );
			break;
		case IMAGETYPE_JPEG:
			$file = str_replace(".jpg", "-bw.jpg", $file);
			imagejpeg( $image, $file );
			break;
	}
	return $meta;
}

Whenever you upload an image, this function will create a new black and white thumbnail automatically. I also added a Gaussian Blur but commented it out. Remove those two slashes “//” to add a Gaussian Blur to your new black and white thumbnail. See other available filters.

Once you’ve added the above code, you can use get_post_thumbnail() within your WordPress loop to display the two images for the effect:

if(function_exists('has_post_thumbnail') && has_post_thumbnail()) { 
	echo '.get_permalink().'" class="fade-image">';
	the_post_thumbnail('thumbnail-bw', array('class'=>'fade-image-a'));
	the_post_thumbnail('thumbnail', array('class'=>'fade-image-b'));
	echo '';
}

This displays both images and surrounds them by an anchor tag. All we need is a little CSS3 to get our fade working:

.fade-image {
	display: block;
	position: relative;
	width: 150px;
	height: 150px;
	}
 
	.fade-image-a,
	.fade-image b {
		position: absolute;
		left: 0;
		top: 0;
		}
 
	.fade-image-a {
		z-index: 5;
		opacity: 1;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
   		}	
 
		.fade-image-a:hover {
			opacity: 0;
			}

The fade will only work in browsers that support CSS3 transitions but everything else should work on any server that supports the latest release of WordPress.

A Simple Fade with CSS3

c.bavota — Wed, 07 Sep 2011 15:39:51 +0000

There was a time when the only way to fade an element or image was by using JavaScript/jQuery (see Creating a Mouseover Fade Effect with jQuery). With CSS3, you can easily create a fade effect with nothing more than a little CSS.

Let’s start with a text element:

<p class="fade">This is my text element that will fade when you hover over it.p>

Now comes the CSS3:

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }
 
   .fade:hover {
      opacity: 0.5;
      }

Hover over the text below to see a live demo:

This is my text element that will fade when you hover over it.

Let’s do the same thing with an image:

<img src="http://bavotasan.com/wp-content/uploads/2011/09/fadeimage.jpg" alt="" width="200" height="150" class="fade" />

Hover over the image below to see it in action:

We can also set it up so that a background color fades in. Let’s create a simple menu using an unordered list:

<ul class="nav-fade">
   <li>Homeli>
   <li>Tutorialsli>
   <li>Articlesli>
ul>

Now for the CSS3:

.nav-fade li {
   background: #fff;
   padding: 3px 8px;
   display: inline-block;
   transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;
   }
 
   .nav-fade li:hover {
      background: #ddd;
      }

Let’s see it live:

Home
Tutorials
Articles

As you can see, there are quite a few possibilities when it comes to using CSS3 to create a simple fade effect. As always, remember that CSS3 only works on modern browsers.

Resources