CMS & Blog Templates

WordPress - Joomla - Mambo - Drupal - Php-Nuke
home>WordPress Tutorials >WordPress Images

WordPress Images

WordPress Installation WordPress Manual Installation Start up guide for WordPress
Creating a Category Comments in WordPress WordPress Themes
WordPress Create Theme WordPress Plugins WordPress Images
WordPress Backup WordPress SEO WordPress Security
WordPress Upgrade WordPress Spam Protection Other Tutorials

A picture says more than a thousand words.
WordPress makes it easy for you to add images to your WordPress site. You can upload them directly from within WordPress by using the built-in file uploading utility in the post screen. Or you could use any FTP Client software to upload many images to your WordPress site.

The Quicktag buttons feature an image link, making it easy to link to images from within your post as you write it. If you used the inline upload feature, your picture will be in the /wp-content/uploads folder, unless you've specified another folder on the Miscellaneous admin panel.

WordPress can now (within the posting page) resize images and create thumbnails. There are also photo galleries that can show many images without adding each one separately to a page.

And if you choose to let the images speak for you, consider creating a PhotoBlog or Gallery.

Styling Images in WordPress
Current versions of WordPress now have image alignment built-in. WordPress adds CSS classes to align the image to the right, left, and center of a paragraph, so the text will wrap around the image.

In order to take advantage of these new CSS classes for image alignment and the text wrapping around the image, the WordPress Theme must include the following in the style.css found in the WordPress Theme directory.

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

When adding the image in your WordPress blog, select the image alignment as right, left, or center in the Image/Media Panel.

The image will be embedded into your blog post with the selected style for alignment such as:

<img src="http://example.com/images/leaf.jpg" alt="leaf graphic" title="leaf graphic" class="alignright size-medium wp-image-3109" height="25" width="30"/>

For more information on styling images in WordPress, see Wrapping Text Around Images.

Images Resources for WordPress
File:imagesinarticlesidebar.jpg
Example of images in background, sidebar, blockquote,and post
There are a variety of WordPress Plugins which add image functionality, utilities, and galleries to your website. Some run from within WordPress while others stand alongside.

You can also add images to your WordPress site through the use of template tags, Plugins, and in the style sheet of your Theme. For example, you can add images to your:
  • Categories
  • Comments with Gravatars
  • Graphics Symbols
  • Header
  • Headings
  • Smilies


  • Gravatar used in Comments
  • Sidebar
  • Footer
  • Lists
  • Menus
  • Between posts
  • Between lists
  • Graphics in Feeds
  • Links and Blogrolls
  • Next and Previous Links
  • Template Tags - Many feature image parameters
Using Images in Posts
Images can be used in a variety of methods in your WordPress posts and Pages. They can be a major subject, or a referenced detail that enhances the information or story.

The first thing you should consider is the "look" of the images on your page. Not what the images are of, but the general look of how they flow and interact with the rest of the content on your page. Wrapping Text Around Images helps you to begin to understand how images interact with the text around them, changing the margins, padding and borders around the images within the content. It will also help you understand how to create captions under your images.

The next thing to consider is the size of the images. There are two ways of actually sizing an image. It is either the size that it is, or a thumbnail link which, when clicked, takes the user to a new page with an enlarged image of the graphic.

Inserting Images into Posts Inserting an image into a post still seems to confuse a lot of people.
There are 2 steps involved to inserting an image into a post. First, the image file must be uploaded onto your web server before it can be inserted into a post. The second step is to actually insert the image into the post in the appropriate location.

The simplest way to do this is to use the "Add Media" function on the post screen (beside the "Visual" and "HTML" tabs). Choose the appropriate button depending on whether you are adding photos, videos, audio, or miscellaneous media (e.g. PDF files). This method will complete both steps as outlined above.

In the "From Computer" area of the screen you need to upload the desired image file. NOTE: Before hitting the "Upload from Computer" button it is recommended that you select the "Browser Uploader" instead of using the default Flash Uploader. After selecting the "Browser Uploader", hit the "Browse..." button and choose the desired image file on your computer. Then, hit the "Upload" button. Your image file is now on your web server.

Make sure you give the image an appropriate title, as well as a relevant description if desired. Choose the desired alignment and size, and hit the "insert into post" button. Your image is now inserted into the post at the location where your cursor was last active.

Every time you upload an image to your web server it is added to the "Gallery" of images that are available for that blog. If you want to insert the same image into another post go to the "Gallery", hit the "Show" link, and then follow the same instructions to insert that image into another location or post.

You can also manually upload an image onto your webserver with an ftp program. The details for this method are not included here.

Image Size and Quality The size and quality of an image for use on a web page is determined by a variety of things.

Physical Size  The physical size of an image is based upon two things: The size of the image on the screen and the file size. Generally, the file size is treated as a different issue.
File Size 
This is the size of the file on your hard drive or server.
Resolution 
Resolution refers to the number of pixels in an image. Resolution is sometimes identified by the width and height of the image as well as the total number of pixels in the image.
File Type 
There are basically X image types popularly found on the Internet: jpeg,gif,png and (for favicons (the icons next to the address)) ico.

The physical size of the image is information we need to know in order to determine how much "space" will the image occupy on a web page. If your WordPress Theme features a fixed width content area of 600 pixels and the image you want to use is 800, the image will push the sidebar and layout of your web page around, messing up your design. Images within that 600 pixel width need to be restricted to that maximum width in order to protect the layout of your page. It's up to you to determine what size they should be from there, matching the image to your overall layout and styles.

File size dictates the time it takes to load your page, the larger the file size, often increased because of a high image resolution quality, the longer it will take to load. People often don't have the patience to wait through long web page loads, so keeping your file sizes low speeds up your web page access times. Typically, large high quality images should be kept between 100K and 60K. Smaller images should be closer to 30K and lower.

The resolution of the image dictates its clarity. The higher the resolution, though, the larger the file size, so you have to make a compromise between quality and file size.

Luckily, the various file types most commonly used on the Internet have compression features. When you save the file as one of these types, it condenses or compresses the data information in the image file. Internet browsers can decompress this information to display the image on the screen. Some graphic software programs allow you to set the compression rate to control the quality of the image (and file size) at the time you save it. Depending upon your use of the images on your site, you may have to experiment with this to get the right ratio that keeps the resolution quality good while maintaining a small file size.

Websites use four common file types. The end of a filename (called the extension) tells what type it is. One type, ico, is to make a faviconfile -- but this is usually only done when a website is first set up. The other three types are used for general images:
  • jpg (JPEG) is good for photographs. Saving a photo as jpg removes detail from the photo. Good photo editors let you control how much detail is removed (the "compression"). Different photos need different compression; doing this carefully and viewing the result can give you a usable photo with a small file size.
  • gif can be poor for photographs. It's better for line art, like logos, with solid areas of the same color.
  • png is for both photographs and line art. It compresses photos without losing detail, but usually makes larger photo files than JPEGs. Some older browsers don't completely support png, though.
If you aren't sure which file type is best for a particular image, try saving the image in more than one type and comparing the file sizes. Using the right type can make a big difference! There's more information in Sitepoint's GIF-JPG-PNG What's the Differencearticle.


 
 
 
WordPress Templates WordPress Themes WordPress Hosting
WordPress Directory WordPress Components WordPress Books
Free WordPress Themes
Free WordPress Themes available here is basically a ready-made design representing a typical high-quality and beautiful design of all of the CMS and Blog WordPress Themes.
   
Customize WordPress Templates
WordPress templates customization services you can easily get a unique and professional looking website that will correspond to your business needs.
   
Best WordPress Hosting
Are looking for the best WordPress web hosting? A good web host for WordPress that we can suggest which is available on the web.
   
Best WordPress Books
Are looking for the best WordPress books? Here we have some good collection of books about WordPress available on the web, which can be used for beginner or intermidiate developers.
 
 
» WordPress Templates
» Free WordPress Templates
» WordPress Hosting
» WordPress Themes
» WordPress Components
» WordPress FAQ
» WordPress Tutorials
» WordPress Directory
» WordPress Resources
» WordPress videos
» WordPress Books
» WordPress Templates Customization

All WordPress templates are completely customizable and ready for immediate download.

Template Types
» Turnkey Websites
» Premium Templates
» Flash Templates
» PowerPoint Templates
» Personal Pages Templates
» Most Popular
» Low Budget Templates
» Flash Photo Galleries
» Corporate Identity
» Last Added Templates
» Zero Downloads
» CSS Web Templates
» PhpBB3
» PhpBB2
» phpBB Skins
» Web 2.0 Templates
» Forums Web Templates
» Portals Web Templates
» Flash Intro Templates
» SWiSH Templates
» Zencart Templates
» CRE Loaded Templates
» osCommerce Templates
» Halloween Web
» XML Flash Site Templates
» Magento Templates



 Template Categories
Click here for more Categories

Web Templates | WordPress Themes | PHP-Nuke Themes | Joomla Templates | Mambo Templates | Drupal Themes | phpBB Templates | Flash Web Templates |
Dynamic flash photo gallery templates | osCommerce Templates | CRE Loaded Templates | CSS Web Templates | XML Sitemap| SWiSH Templates |
Real Estate Templates | Site Map | Site CMS | Flash Flip Book | Web Templates Customization | Website Builder | Affiliate Program | Resources |
Templates Directory | Link to us | Submit a site | Submit Articles | News
Copyright © 2003 -2009 CMS & Blog Templates. All Right Reserved. FAQ | Terms of Use  Web Design by Digital Dreams - Your Outsource Partner