January 13, 2012

Tags: , ,

WordPress – how to strip inline image width and height attributes (for responsive designs)

Posted in: // Website Design

Want to make a new responsive WordPress theme and need to remove the automatically generated width and height attributes? For example, WordPress is generating image code like this:

<img width="520" height="360" alt="Image" src="http://benfrain.com/notepad/wp-content/uploads/2011/07/image.jpg" title="Wordpress image tag ">

When what you need is:

<img alt="Image" src="http://benfrain.com/notepad/wp-content/uploads/2011/07/image.jpg" title="Wordpress image tag ">

Exactly the same, sans the width and height attributes. Well, here’s how (filter info from here)

1. Open your theme’s functions.php (e.g. wp-content/themes/*your theme*/functions.php
2. Add the following filter:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

This will remove the inline width and height attributes for thumbnails and images added through the editor, however, it won’t remove them from images retrieved through wp_get_attachment_image or other related functions (as there are no hooks in there).

Comment(s) on this post.

0
January 3, 2012

Tags: , ,

Espresso2 review now in MacUser magazine (on the shelves now)

Posted in: // Website Design, //Writing

I recently reviewed MacRabbit’s Espresso2 code editing application for MacUser magazine here in the UK and it’s now hit the shelves (9th December issue). (more…)

Comment(s) on this post.

0
January 3, 2012

Tags: , ,

HDR Light Studio v3 & SprayTrace press releases

Posted in: // Writing

I love writing press releases! It’s challenging and exciting to articulate something new to the world and attempting to convey everything that’s great about it. I had the pleasure of writing a couple of press releases for HDR Light Studio v3 and SprayTrace recently. Here’s the full releases for both: (more…)

Comment(s) on this post.

0
December 5, 2011

Tags: , , , , ,

Revised addecoltd.co.uk: responsive, built with SASS and loaded with CSS3

Posted in: // Website Design

I’ve just finished a quick revamp of the www.addecoltd.co.uk website, an aggregate and fence company based in Burslem, Stoke On Trent. I’ve been doing a lot of responsive design work of late but much is under NDA’s of sorts so I’ve been able to post much info. However, this one is a responsive design so load it up in a iPad or (insert smaller viewport device of choice) or resize the browser window and you’ll see the content re-flows nicely.

It’s also the first project I built entirely with SASS and Compass. I’ve looked at CSS pre-processors a lot in the past and used LESS for a spell but now I’ve made the switch to SASS I can’t see myself going back. It was also the first project I coded entirely in Espresso 2 as opposed to Coda.

I also had the freedom (of sorts) on this site to embrace a lot of CSS3 so you’ll see text-shadow, box-shadow, background gradients and even some subtle transforms (main nav links scale slightly when hovered over in modern browsers).

I feel there’s definitely plenty of CSS3 that can be used safely now, as long as you’re happy with some slight aesthetic compromises in IE (let’s face it, if you browse in IE, the webs pretty hopeless looking anyway). I’d certainly apply the same methodology next time, using CSS3 for shadows and the like as opposed to multiple images.

Anyway, that’s all for now, the site is up at www.addecoltd.co.uk

Comment(s) on this post.

0
November 15, 2011

Tags: ,

Discussing Android use in IFE piece for APEX

Posted in: // Writing

Just received hard copy of a piece I’ve written for APEX magazine about the rise of Android OS for In Flight Entertainment systems. It involved talking to lots of folk in the industry and discussing the appeal (or not) of Android. It was my first time writing for APEX but it’s a great publication and hope to repeat the experience soon.

20111115-154058.jpg

Comment(s) on this post.

0
November 8, 2011

Tags: , , ,

Truly responsive type units (vw, vh and vm) on the way

Posted in: // Website Design

If you work with responsive designs, you’ll perhaps be interested to learn that amongst the current working draft of the CSS3 Fonts module is reference to ‘viewport relative’ fonts: http://www.w3.org/TR/css3-values/#viewport-relative-lengths. The ‘vw’ unit (for viewport width), ‘vh’ unit (for viewport height) and ‘vm’ unit (for viewport minimum – equal to the smaller of either vm or vh) could be crucial time savers in the years to come and save the slight tedium of px to em or rem conversions. Sadly, there is no browser support for vw, vh or vm font units at present. It’s therefore a matter of watching the browser nightly builds for any implementations we can test it on. At present, I’m informed that only IE9 offers support for the new units. Certainly Firefox 7, Safari 5.1 and Chrome 15 don’t.

Comment(s) on this post.

0
September 5, 2011

Tags: , ,

Easily display the viewport size of your page (for responsive designs)

Posted in: // Website Design

I’m doing a lot of work with responsive web design at the moment and I wanted a quick and simple cross-browser way of showing what size the current viewport window (you know that bit that actually shows the webpage, sans the interface) was. There’s lots of cool extensions (Resize for Safari being a favourite) out there but none of them are cross browser. In the end I decided the easiest way was to create a simple HTML page that would show the sizes on the fly. That way, no matter what browser I used I could load the page in a different tab and hey presto.

In case anyone else finds it useful, here is the code. Just make a blank HTML page, copy this in and save.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Browser viewport size tester // benfrain.com</title>
</head>
<body>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
	 $(window).resize(function() {
	  var the_width = $(window).width();
	  $('#width').text(the_width);
	  var the_height = $(window).height();
	  $('#height').text(the_height);
	 });
	</script>

	<h1>The benfrain.com super simple, what size is my viewport page?</h1>
	<h2>Viewport Width:</h2>
	<p id="width">Resize to find out!</p>

	<h2>Viewport Height:</h2>
	<p id="height">Resize to find out!</p>
</body>
</html>

Comment(s) on this post.

0
August 9, 2011

Tags: , , ,

How to easily add jQuery scripts to a WordPress Child Theme

Posted in: // Tech-tip, //Website Design

As part of a piece I’m writing for MacUser magazine I’m trying to explain how to easily add jQuery and an associated custom script to a Child Theme in WordPress (v3 onwards). If you’re a designer primarily, the following code snippet may well help you. It assumes you have already made a child theme. With that done, if you haven’t already, make a blank functions.php file alongside your style.css file. Now, inside the functions.php file, paste the following:

<?php
if ( !is_admin() ) { // instruction to only load if it is not the admin area
   // register your script location, dependencies and version
   wp_register_script('custom_script',
       get_bloginfo('stylesheet_directory') . '/js/custom_script.js',
       array('jquery'),
       '1.0' );

   // enqueue the script
   wp_enqueue_script('custom_script');
}
?>

You’ll now just need to make a folder called ‘js’ inside your theme and create a file called ‘custom_script.js’ within it and stick your jQuery in there. Bish Bosh – Job Done.

If like me, PHP gives you sleepless nights, I’ll try and explain in layman’s terms what the code is actually doing for you (if you don’t care, no worries, be on your way and just be glad it’s working). First of all, we are telling it to ONLY load if not in the Admin screen. This is to make any effects in our custom script not screw up the backend. After all, last thing you want is your back-end screwed…

Next, we register our new script with WordPress:

Us: “Hello WordPress, can I introduce to my friend, ‘Custom Script’? He’s new around here but he’s going to make quite a difference to things I assure you.”

WordPress: “Who? I can’t see a Custom Script? What are you talking about?

Us: “I can assure you, he’s just over here, look, in the /js folder of the stylesheet directory”

WordPress: “Ah, so he, good show!”

Then we tell WordPress what our script needs from WordPress to run correctly e.g.

WordPress: “Are you sure custom-script is alright in that directory all by himself? Is there anything I can help him with?”

Us: “Actually, you’re quite right, he could really do with the jQuery library or he’ll be a little lost” [that's the array('query') part]

WordPress: “Right, if that’s all? I’ve got quite a bit of spam to filter with Akismet. I knew something was awry when so many posts said they enjoyed reading your blog…”

Us: “Yes, that’s fine, could you just add…”

WordPress: “Add?”

Us: “Sorry, I forget you like funny terms, ‘enqueue’ the script please?”

WordPress: “As you wish. Good day to you…”

That make sense? No? Oh… Did I mention I don’t get out much these days?

Comment(s) on this post.

8
July 25, 2011

Tags: , ,

Mail not opening after Lion install? Here’s the solution

Posted in: // Tech-tip

So you have installed Lion and imported your mail back from a TimeMachine backup you did in Snow Leopard. You click Mail and it updates/imports the messages and then… nothing. I got the menu bar at the top of the screen but no actual application window. Bum. (more…)

Comment(s) on this post.

12
July 25, 2011

Tags: , , ,

TestTrack.Tv website is now live for high octane videos

Posted in: // Website Design

TestTrack.Tv by Ben FrainI’ve been working on the testtrack.tv website with the test track.tv team since February on and off. It’s a video based website which showcases all the best high octane videos from around the net. (more…)

Comment(s) on this post.

0
Older Posts