How To: Prevent Images from Being to Large

Have you ever had an image show up on your website which is to large, causing problems for your WordPress theme?   This is especially common for WordPress blogs that have multiple authors, where some authors may not know how big they can make the images.

Fixing this is incredibly easy with this CSS hack!    All you need to do is take the following code and place it in your stylesheet, setting a maximum width for your images:

.postarea img {
max-width: 500px;
height: auto;

In the above code snippet, you’ll want to replace postarea with whatever div ID or CLASS your theme uses for the content.   You can also adjust the 500px to the maximum width you’d like for your images to be.

Note: This hack may not work on some versions of Internet Explorer.

  • Leave a Comment
  • How To: Prevent Google From Indexing Your Images

    For most of us, traffic is the driving force behind our blogs and motivation to blog. Therefore, it may seem silly to think that you would want to prevent a lot of potential traffic from Google’s image search.

    However, some bloggers like to post personal pictures, or custom make their pictures and don’t want others to take them when possible. If you fit into this category, you can easily prevent Google from indexing your pictures by placing the following code into your blog’s header file above the < /head > tag:

    <meta name="robots" content="noimageindex">

    If your site has a problem with people taking your content (including the pictures), then there is a chance Google will still index them when they index that person’s website. Another route you can take is to place images into a folder then add a disallow to your Robots.txt file. For WordPress users, this is fairly easy as by default, we already have pictures in either our Images folder of our theme, or the uploads folder (unless you’ve assigned a custom path for your images). You can add something like the following to your Robots.txt file:

    User-agent: *
    Disallow: /images/


    User-agent: *
    Disallow: /uploads/

  • Leave a Comment