There are many great WordPress plugins that every site owner should consider using. Of the plugins, wp-print and Nextgen Gallery will greatly enhance any site. However, wp-print does not display the Nextgen Gallery the way that I would like it to. Instead of displaying the images in a row as displayed on the site, the printable version is a long column of images. This makes for a very long printable document that really does not look good at all. After many hours of frustration, I figured out a resolution to this.

This is a printable page as wp-print has prepared it. Notice the column of images.

To resolve this annoyance, I took a look at the generated code for the printable page. There, there are references to a div class “ngg-gallery-thumbnail-box” for each of the gallery images.

I opened the original print-css.css file provided with the wp-print plugin. The version that I am using is WP-Print 2.40. There are “obviously” no references to the div class “ngg-gallery-thumbnail-box”.

I also opened the original nggallery.css plugin provided with the nextgen-gallery. The version that I am using is 1.01. I selected the entire section for the Gallery style.

/* ----------- Gallery style -------------*/

.ngg-galleryoverview {
overflow: hidden;
margin-top: 10px;
width: 100%;
clear:both;
display:block !important;
}

.ngg-galleryoverview .desc {
/* required for description */
margin:0px 10px 10px 0px;
padding:5px;
}

.ngg-gallery-thumbnail-box {
float: left;
}

.ngg-gallery-thumbnail {
float: left;
margin-right: 5px;
}

.ngg-gallery-thumbnail img {
background-color:#FFFFFF;
border:1px solid #A9A9A9;
display:block;
margin:4px 0px 4px 5px;
padding:4px;
position:relative;
}

.ngg-gallery-thumbnail img:hover {
background-color: #A9A9A9;
}

.ngg-gallery-thumbnail span {
/* Images description */
font-size:90%;
padding-left:5px;
display:block;
}

.ngg-clear {
clear: both;
}

I added the selected css from nextgen gallery to the wp-print-css.css file. The result is a better formatted printable screen.