What You'll Be Creating One of the biggest challenges facing web developers today is properly handling images for responsive design. We face issues like sizing the image properly for the screen it's being viewed on, taking into account the user's download speeds, whether or not the device is retina (or in general a super high resolution screens), and more. Thankfully, the element recently became an accepted spec that will be implemented by major browsers but there is still some work to do. Luckily, the way WordPress handles images makes things a lot easier. How the Media Uploader Works First, let's go through a quick crash course on using the Media Uploader. It's accessible in the WordPress admin from several areas, including posts, pages, custom post types that support it (generally speaking, the editor), and the Media menu. The only differences between the Media menu and the rest is that an image will be directly associated with a post or page if it's uploaded from the editor. Once an image gets uploaded, WordPress will by default create up to 4 sizes: thumbnail (150x150) medium (300 max x 300 max) large (640 max x 640 max) full (the original size of the image). You can also add your own image sizes using the function add_image_size() . For example, if we wanted to add an image for a product that's 700px wide by 450px high, we would do: add_image_size( 'product-img', 700, 450, false ); This is telling WordPress to create a new image with the name 'product-img' with our specified dimensions. The last argument is whether or not the image should be cropped. When set to false , the image will be resized proportionally without cropping; when set to true, the image will be cropped either from the sides or the top/bottom. Be careful with this though, because the results will vary from image to image. Inserting an Image There are two ways to insert an image into a post or page: the first way is through the Media Uploader, as pictured here: The second way is by using a featured image. You can enable featured images by adding this code to your theme's functions.php file, or somewhere near the beginning of your plugins: if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); } This will add a 'featured image' box to all posts, pages, and custom post types that support it. You can also send a second argument, which is an array of what should have a featured image. For example, if you only want posts to support featured images: if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails', array('post' ); } The last step is to place this code within the Loop of your template, wherever you want the image to show up: if ( has_post_thumbnail() ) { the_post_thumbnail('large'); } The argument accepted is the name of the image size you want to use.
↧