Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

Dynamically Resizing Featured Images


  #1  
Old Sep 11, 2015, 12:07 AM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
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 :

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

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;
}

Last edited by flyboy; Sep 11, 2015 at 06:02 PM. Reason: Answered my own question

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Resizing Featured Image Automatically andthefoul Montezuma Theme 1 Oct 10, 2012 01:31 AM
Resizing images in WP no longer works cfibanez Center area post/pages 1 Dec 29, 2011 05:00 AM
Dynamically Resizing Images / Fluid vs. Fixed Width Sites brokencosmos Atahualpa 3 Wordpress theme 0 Oct 26, 2011 01:10 PM
Auto-resizing for images/max width for images? SilverLining Center area post/pages 1 May 5, 2011 09:49 AM
Images not resizing within posts kam Center area post/pages 4 May 14, 2010 07:24 PM


All times are GMT -6. The time now is 07:54 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.