Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

Dynamically Resizing Featured Images


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

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 05: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 12:31 AM
Resizing images in WP no longer works cfibanez Center area post/pages 1 Dec 29, 2011 04:00 AM
Dynamically Resizing Images / Fluid vs. Fixed Width Sites brokencosmos Atahualpa 3 Wordpress theme 0 Oct 26, 2011 12:10 PM
Auto-resizing for images/max width for images? SilverLining Center area post/pages 1 May 5, 2011 08:49 AM
Images not resizing within posts kam Center area post/pages 4 May 14, 2010 06:24 PM


All times are GMT -6. The time now is 03:09 AM.


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