Wordpress Themes - WP Forum at BFA - Dynamically Resizing Featured Images

When I first posted this, I posted it as a question. But I was since able to come up with a solution, so I figured I'd edit the original post and share with everyone here.

If you want to force featured images to dynamically resize so they take up 100% of available width, and avoid the buggy spilling of the image outside its bezel (on really narrow screens), here is how you do it.

The Problem

Montezuma natively inserts two featured images (one of which is filtered to grayscale by the CSS) on pages that list multiple posts, and then sets absolute positioning to make them occupy the same space, so the simple change of opacity can create an effect of image going from gray to color.

The problem with setting an image to position:absolute is that one either has bezel/margin problems as the windows is resized :

http://i.imgur.com/WO0qXv6.png

or the image simply doesn't fill its container properly (I tried stripping all Montezuma CSS and creating my own boxes from scratch):

http://i.imgur.com/frXxVGo.png

The Solution

This is meant to completely replace all featured image CSS rules in the Montezuma Options > CSS Files > posts.css

First I changed the position:absolute to its default state (position:static). Setting images to absolute positioning is a bad idea when you want them to fit inside dynamically-resized boxes.

Second, I got rid of the unnecessary second image which, once the positioning issue was fixed, started pushing and shoving everything around. I made sure just one image is displayed, is always 100% visible, and I simply created a rollover effect that applies a grayscale filter to it. Montezuma is great, but I felt that using two images, JS and CSS, to achieve this effect is inefficient use of code.

And finally, I annotated exactly what each part does so you can dissect and modify for your needs. The end result is that you will get a bezel that is always taking up all the available space, and a featured image that is always perfectly filling up the said bezel.

The code:

Code:

/* Inserting the space for the featured image shadow */

.thumb-shadow { 

padding-bottom: 20px;

}



/* Inserting the featured image shadow on post hover */

.hentry:hover .thumb-shadow {

background: url(%tpldir%/images/shadow.png) center bottom no-repeat; 

}



/* Formatting the featured image bezel */

.post-thumb {

padding: 5px 5px 3px;

border: solid 1px #ddd;

background: #fff;

}



/* Forcing the featured imags to fill its container */

.post-thumb img, .post-thumb .img_grayscale, .img_wrapper {

position: static !important;

width: 100% !important;

height: auto !important;

}



/* Making the featured image grayscale, and keeping it from being hidden by JS */

.post-thumb img {

opacity: 1 !important;

filter: grayscale(100%); /* Current draft standard */

-ms-filter: grayscale(100%); 

-o-filter: grayscale(100%); /* opera */ 

filter: url("%tpldir%/images/gray-filter.svg#grayscale"); /* Firefox */

filter: gray; /* IE */

-webkit-filter: grayscale(1); /* Old WebKit */

-webkit-filter: grayscale(100%); /* New WebKit */

}



/* Making the featured image fully colored on rollover */

.hentry:hover .post-thumb img {

filter: grayscale(0%); /* Current draft standard */

-ms-filter: grayscale(0%); 

-o-filter: grayscale(0%); /* opera */ 

filter: none; /* Firefox */

filter: none; /* IE */

-webkit-filter: grayscale(0); /* Old WebKit */

-webkit-filter: grayscale(0%); /* New WebKit */

}



/* Hiding the second featured image */

.post-thumb .img_grayscale {

display: none;

}