Jump to content
Sign in to follow this  
oliverwood

Feature background images not responsive?

Recommended Posts

oliverwood

Hi, I'm trying to get background images in the feature box to scale proportionally with re-sizing of the browser window. I've checked this thread in which @arpowers says

"Added a bunch of new changes to the feature slider in 2.0.1. Background images are now responsive... tweaked a couple other things."
but it's not working for me. Feature box background images are cropping on either side as page width diminishes but there's no scaling happening at all. Am I missing something? Cheers, Ollie

Share this post


Link to post
Share on other sites
Rob
Ollie, may we have a link to your site? Thanks.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
oliverwood
Hi Rangelone, Here's the site. http://www.weareprimary.org/homepage/ Previously, I've [u][i]nearly[/i][/u] achieved the behaviour i'm after by adding the image to the Feature Media HTML embed box via an tag. This produces the scaling effect I want with the image but the feature stage area/div doesn't scale with it and remains at the height specified in the Features Meta 'Height in px' box. Cheers, Ollie

Share this post


Link to post
Share on other sites
Rob
I don't think Arpowers meant that the sliders were scalable but clickable. Of course, I could be wrong about that. With several sites, each with sliders, and a few different computers here with different resolutions, I found my sliders scale according to the resolution and screen size nicely by using the background image area to add it to the slide. I'm not quite sure how to assist with this and will ask one of my colleagues to look into it. Thanks for your patience.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
oliverwood
When you say that the sliders on your machines scale nicely do you mean that they scale in the same way as an image inserted as part of a post scales? Have you got an example I could look at? I've just tried out the [url="http://dimsemenov.com/plugins/royal-slider-wp/responsive-demo.html"]Royal Slider[/url] which works in the way that i'd like (provided I use the shortcode in the page/post content and not in a section setting) but it's limited in terms of it's flexibility as part of a Pagelines structure ie: it doesn't work inside of sections. In addition, it doesn't appear at all when Javascript is disabled. It's also harder than Pagelines features for my client to use. In short i'd much rather use the Pagelines feature section - it's better. - If only there was an additional setting to allow the height of the feature area (and contained image) to scale in proportion to the width of the viewers window. Or I could use percentages to define the size of the Feature area/image. Or something. - If only I knew what the hell I was doing and could alter the feature section code and sell it. cheers, Ollie

Share this post


Link to post
Share on other sites
Jenny
Are you setting the image as the background image? I believe that is what scales but I haven't messed around with features enough to know for sure.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
oliverwood
Hi simple_mama, Thanks for joining in. Yep, that's how I have things set up at the moment. I've tried lots of different configurations and while i've had the image itself behave as i'd like (when added as a img src tag in the HTML embed box) the feature box area has never altered in height.

Share this post


Link to post
Share on other sites
catrina
[quote]- If only there was an additional setting to allow the height of the feature area (and contained image) to scale in proportion to the width of the viewers window. Or I could use percentages to define the size of the Feature area/image. Or something.[/quote] Perhaps this would be possible custom CSS. For reference, please see here: http://www.w3schools.com/cssref/pr_dim_height.asp. You may also find Firebug (http://getfirebug.com) useful for inspecting the feature box area and figuring out what selectors you need to use in the CSS (instructions on how to use Firebug are here: http://www.pagelines.com/wiki/Custom_CSS#How_to_use_CSS_Inspection_Tools).

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×