Monthly Archives: March 2011

How to crop thumbnail images from the top in WordPress’s NextGen Gallery plugin

Posted on March 23, 2011 by
5 comments

I use WordPress’s NextGen Gallery plugin frequently on the websites I design. One of the issues that I have run into is the fact that, by default, images are cropped in the center to create the thumbnails for the gallery. However, I often want to have the thumbnails cropped from the top, and here is the way I have used to do this.

First, under the Plugin section in the admin panel sidebar, click Editor, select the NextGen Gallery plugin, and open the nextgen-gallery/admin/functions.php file.

Find this line of code:

// get optimal y startpos
 $ypos = ($thumb->currentDimensions['height'] - $ngg->options['thumbheight']) / 2;
 $thumb->crop(0, $ypos, $ngg->options['thumbwidth'],$ngg->options['thumbheight']);

And change it to this:

// get optimal y startpos
$ypos = ($thumb->currentDimensions['height'] - $ngg->options['thumbheight']) / 2;
$thumb->crop(0, null, $ngg->options['thumbwidth'],$ngg->options['thumbheight']);

Now, save the file. Make sure you re-generate the thumbnails by going to Manage Gallery, selecting the gallery you want to edit, selecting all of the images that you want to create new thumbnails for, and then (under Bulk Actions) select Create New Thumbnails and finally, click Apply. This will generate new thumbnails images that are cropped from the top.

Let me know if you have any questions or run into any issues with this. For an in-depth explanation of what exactly you are changing, you can read this excellent post – http://www.comprepairgurus.com/force-nextgen-gallery-to-crop-thumbnails-from-the-top-of-the-image/.

Categories: WordPress | Tags: , , ,

Using two background images for one div in IE

Posted on March 16, 2011 by
6 comments

This post is an extension of my previous post on how to use two background images for one div. However, the CSS trick we covered will not work correctly in Internet Explorer (no surprise there, right? :) ). Here is one way that I have used to work around that.

Step 1

First things first, if you are not using a separate stylesheet for IE, do so now. Create the new stylesheet, save it as iestyle.css (or whatever you want it to be called), and then use this line of code in the <head> section of your web page to reference the stylesheet:

<!--[if IE]>         <link rel="stylesheet" type="text/css" href="iestyle.css" /> <![endif]-->

(For more information on conditional stylesheets, you can read this article – http://css-tricks.com/how-to-create-an-ie-only-stylesheet).

Step 2

Now, let’s say these are the CSS codes for the div that we are using two background images for:

.node {
color: #789F4D;
width:220px;
border: 1px solid grey;
padding:10px;
background: url(images/topbg.jpg) no-repeat left top, url(images/background.jpg) no-repeat right bottom;
background-color:#f6f6f2;
}
What we are going to do is create a new div which will display inside the initial div if the site is being viewed in IE.
Open your iestyle.css file. Add the CSS codes for the new div:
.node-second {
color: #789F4D;
width:220px;
border: 1px solid grey;
background: url(images/topbg.jpg) no-repeat right bottom;
 }
You will also have to add and then rewrite the styles for the original div in the IE stylesheet:
.node {
 color: #789F4D;
 width:220px;
 background: url(images/background.jpg) no-repeat left top;
 background-color:#f6f6f2;
 }

Notice the biggest difference here is that, in the IE stylesheet, the original div only has one background and the second div contains the second background.  The idea is that, if the website is being viewed in Internet Explorer, the two images will be in their own divs (the only way to make them both display, that I know of), but you want the two divs to be styled in such a way that the affect will be exactly the same as when the site is viewed in Mozilla or another browser.

Step 3

Now, simply set up the new div inside the initial div in your HTML.
<div class="node">
<div class="node-second">
Content here. Content here.
</div>
</div>
What this does is adds the second div inside the original div in the HTML page. The styles for both divs are determined by which browser the website is being viewed in:
  • If the browser is Mozilla or Chrome, etc., the div uses the CSS trick we covered in the previous post and displays two background images.
  • If the browser is Internet Explorer, the div uses the styles in our iestyle.css file and still displays two background images (one of which is contained in the new div).
I hope this works for you. As always, just let me know if you have any questions!
Categories: CSS, HTML | Tags: , , , , ,

CSS Tricks: Use two background images for one div

Posted on March 10, 2011 by
15 comments

Here is a simple line of code that I use if I need to display two background images stacked on top of or next to each other in one div.

Two background images stacked vertically

To use two background images stacked vertically on top of each other (one at the top of the page and the other on the bottom half), use this line of code:

background:url(http://yourwebsite.com/images/image1.png) no-repeat, url(http://yourwebsite.com/images/image2.png) repeat-y;

Note: The important thing to remember is that you must have either a repeat-x, repeat-y, repeat, or no-repeat specification for the first image in the line of code (in this example, image1.png).

Two background images stacked horizontally

You can use two background images side by side in one div with this line of code:

background:url(http://yourwebsite.com/images/image1.png) repeat-y, url(http://yourwebsite.com/images/image2.png) repeat;

There are several reasons why you might want to display two background images in the same div, one of which is to keep your codes as concise as possible. Another reason is if you are working with the body of the website and want to use a different background for the top half of the site than you are using for the remaining lower part of the site.

Note: To make sure that your site is cross-browser compatible, make sure that you also use this IE fix to display two background images in one div in Internet Explorer.

As always, feel free to leave your comments, questions and suggestions in the comment section below. Thanks for stopping by!

Categories: CSS, HTML | Tags: , , , , ,