WordPress.org

Ready to get started?Download WordPress

Forums

Header Image Slider
Dynamic and floating page widths not supported. (26 posts)

  1. Phillip.Gooch
    Member
    Posted 2 years ago #

    The slider remains the size it is even if page width is changes, so if you are using something like the WP-twentyeleven theme it will become oversized and foce horizontal scrollbars when you shrink the window. Currently thats the only detraction from an otherwise great plugin.

    http://wordpress.org/extend/plugins/header-image-slider/

  2. Phillip.Gooch
    Member
    Posted 2 years ago #

    found a (poor) temporary fix. Add the following bit of code to the end of the boom_nivo_slider_options function in general-template.php

    afterLoad: function(){
    			$('div.slider-wrapper.theme-default').css('width','100%');
    			$('div.slider-wrapper.theme-default').css('text-align','center');
    			$('div.slider-wrapper.theme-default').css('overflow','hidden');
    			$('div.nivoSlider.headerSlider').css('width','100%');
    		}

    It's not a pretty fix but it keeps the scrollbars from coming up. Could be improved upon although even then it's not the proper way to do this (it should really be changed in the nivo slider theme).

  3. shazdeh
    Member
    Plugin Author

    Posted 2 years ago #

    I'm not sure how to handle this. The position, size and everything about the slider should be handled by the theme. I'm guessing on small screens an slider would be of no use, so for example you could hide the slider for mobile users:
    if( ! is_mobile() ) // display header image
    * the is_mobile function requires this plugin: http://wordpress.org/extend/plugins/txtu-is-mobile/

    The next version is coming up soon with cool new features, I'm open to all suggestions!

  4. Phillip.Gooch
    Member
    Posted 2 years ago #

    True the header image size is controlled by the theme, unless you remove it from the theme. I created a script that does some dynamic resizing like on the Wp-twentlyeleven script, as the window gets smaller so does the space between elements and eventually the entire thing shrink into one flex column so it still works well on mobiles (all of this controlled by some css styles to prevent a huge headache in debugging of course).

    I avoided the header image width problem in the vanilla wordpress by simply not attaching the width and weight attributes to the image (or to the div in the case of using a background image for the header) This allows me to place the header at 100% width inside a more flexible frame (in the case of the one I'm working on now it's 100% width of the sites master container making it fill up as much as possible.

    I'm not sure how Wp-twentyeleven does it be the end effect is very similar. I actually initially noticed your slider didn't resize when testing it on a blog running wp-twenty eleven (my go-to plugin test blog).

    Perhaps the solution is simler than it lets on. If you place an option in the settings for this then you could simply not output all the sizes (or, probably display the width as 100% and the height as a value generated to keep the aspect ratio correct, thats some simple jquery to do). This would allow people who have flex themes the freedom to use it full width all the time, and those with traditional static width theme still use it as they are now. One additional thing this might require is tweaks to the nivo slider as well, but they should be pretty basic.

    Overal this flex theme, while support as low as the original iphones 320px width, is really designed for older computer or smaller monitors, you can have that extra spacing with a modern 1080p monitor, but most of out clients are running rather outdated hardware. This solves two problems at once, you get a mobile compatible version - which they like, and we make it look good and easily readable on their 1024 monitor.

  5. shazdeh
    Member
    Plugin Author

    Posted 2 years ago #

    Thank you for your insights.
    Not setting a width and height is troublesome. That fixed width and height is set because Nivo needs a fixed width and height, otherwise you'd get a weird effect on your page.
    We could add option to include CSS3 media queries for smaller windows, though. Is that a clean and bullet-proof solution? and if so, how to handle it? I think it requires some math to implement, which is just beyond my grasp! :(

  6. Phillip.Gooch
    Member
    Posted 2 years ago #

    I'm admittedly not very familiar with the nivo slider, but it seems to have support for flexible themes. There mentioned here: http://nivo.dev7studios.com/support/advanced-tutorials/creating-custom-themes-for-the-nivo-slider/ but searching only brings up that page and the features page. Fixed height can be faked simply by placing the whole slider in a box, having that boxes height adjust correctly and giving the width and giving it an overflow:none; property, although if nivo really does support a flexible width I would hope the height is adjusted with it.

    CSS3 media queries may work, as most mobile devices are running modern enough browsers to support them. It is a bit slow on resize though but no worse than the wp-twentyeleven resize - come to think of it's I'm sure it's doing it that way, and so should I have if I was thinking. One potential setback could be the need to reinitialize the nivo slider at those resolutions, as well and not being able to achieve a fluid motion (because those would limit you to a "pick a width" setting, that is unless you want a width every other pixes, I surely wouldn't want to program that).

    Setting those CSS media queries via javascript may be possible. That would preserve the fluid resize without a comically bloated stylesheet. I'm not sure if there are official javascript ways to do that yet, and even if you did it though something like jQuery the browser may not bother checking the screen property after initial load. It's something thats worth a test for sure but currently I'm stuck at work on other projects. The mathematics to determine the height based on width are deceptively simple, I'm sure I saved a code snippit from a previous project somewhere on my home machine I can post if you want it.

    I still think that the best solution would be to learn more about this nivo flexible width style thing, I'm not seeing any documentation, but I"m also not logged in and don't have an account, if you do I'd suggest taking a peek, it could be by far the easiest way to go about this.

  7. shazdeh
    Member
    Plugin Author

    Posted 2 years ago #

    That requires a lot of testing and testing, to make sure it works.
    Maybe we could think up something for the next version.

  8. Phillip.Gooch
    Member
    Posted 2 years ago #

    I sat down at lunch today and hacked out a much better fix, it's a great interim until a more permanent solution can be thought up (probably in the slider script department). Since this is kinda a hacked in solution it really should be an option in the setup page, was I'm hoping you'll be able to add before the next release (so I can take the update across all blogs without worrying about it).

    First I added some additional callbacks to the options, before, after, and after load, here is my new boom_nivo_slider_options function:
    [Code moderated as per the Forum Rules. Please use the pastebin]

    Then I added a single style to nivo-slider.css, I tried to just add the style via jQuery but it wouldn't go, I have no clue why it wouldn't work but I guess it's because .nivo-slider width is being changed by the script. This is a direction to look in as it could be a simple mod to the nivo slider core to get it to work (basically change those pixels values to percent values). Unfortunately I don't have time to look into that right now. The additional style is this:

    .fullwidth-fix{
    	width: 100%!important;
    }

    I've tested it pretty extensively in the ep-twentlyeleven theme without problems, if one of mine acts up I'll blame the theme and not the fix. Like I said it be great if this could get added for the next version as a checkbox item (call if preliminary fluid width support or something IDK).

  9. shazdeh
    Member
    Plugin Author

    Posted 2 years ago #

    Sorry I didn't have access to the internet in last days.
    I didn't get the code, but in next version I've added a few action hooks and filters, so you can safely edit the plugin behavior.

  10. nathanwells
    Member
    Posted 2 years ago #

    @Phillip.Gooch
    Could you post the code to pastebin or e-mail it to me (sungkhum [at] gmail dot com). I am also looking for a way to allow for dynamic resizing for smaller resolutions, and your fix looks like the only one out there for sliders!

    Thanks,
    Nathan

  11. Phillip.Gooch
    Member
    Posted 2 years ago #

    The moderated code can be found here
    http://pastebin.com/S3xs0PaA

  12. shazdeh
    Member
    Plugin Author

    Posted 2 years ago #

    Thanks. What is .fullwidth-fix class?
    ***
    I also saw Flux Slider and Diapo sliders, have you tested those? It says that they work perfectly on mobile devices. If they're any good, I could add to the plugin.

  13. Phillip.Gooch
    Member
    Posted 2 years ago #

    they dident remove that from the post its

    .fullwidth-fix{
    	width: 100%!important;
    }

    I havent tested those yet, but of course they work nivo does, it's the resizing thats the problem. I'll take a look sometime this week, but I'm cleaning up from a server issue so it probably won't be till later.

  14. jvandelaar
    Member
    Posted 2 years ago #

    Hey guys, any update on resolving this issue?

    I've spent half a day working on this but haven't got anywhere . Will keep going and will post anything I find! Cheers

  15. Phillip.Gooch
    Member
    Posted 2 years ago #

    What exactly is the problem your having, if you modify the script and css using the code in the above post, and the js from what in the pastbin link, you should have dynamically resizable sliders (I'll probably have to work on this some more later this week, but I don't think it'll need to be changed).

  16. jvandelaar
    Member
    Posted 2 years ago #

    Thanks for the quick update Philip. The slider works great as intended and the window for the slider resizes also as intended thanks to your scripting.. How ever the images I'm using don't resize (shrink) with the slider window. I'm using the twentyeleven theme and the controls for the resizing are untouched.

  17. Phillip.Gooch
    Member
    Posted 2 years ago #

    Yeah my fix never solved that, it'll be properly sized on load, and resized when the images change, but the height won't change until the page is reloaded.

  18. jvandelaar
    Member
    Posted 2 years ago #

    Damn. Simply copy and pasting code relevant to dynamically resizing the image from the functions.php file isn't getting any closer. Thanks heaps for the fixes though Philip!

  19. tacomamama
    Member
    Posted 2 years ago #

    Bumping this up, because I very much wish this plugin were responsive. Will this ever be a feature?

  20. Jono.Rogers
    Member
    Posted 2 years ago #

    Hi guys..

    First post here..

    So luckily enough when I ran across this issue, Nivo just announced v3 which has built-in support for flexible image sizes - Nivo Blog

    So I looked at fixing this issue by upgrading to Nivo 3. Turns out it's really easy.

    Step 1.

    Download Nivo 3, overwrite all content in the nivo-slider/ directory inside the plugin dir with the new files.

    Step 2.

    Force Header Image Slider to stop using width and use max-width instead, so that Nivo will play nice..

    Change line 491 of header-image-slider.php to fix the jQuery for the auto-insert:

    Pastebin for line 491 of header-image-slider.php here: PasteBin

    For php (boom_header_image()), also change boom_header_image and boom_get_header_images, pastebin for those two methods:
    PasteBin

    Edit: Step 3:

    Fix slider-css.php

    Overwrite the relevant CSS sections with this: Pastbin

    Edit 2:

    So, I'm not sure if it was the theme I'm using (Yoko), or just strangeness - but things got weird at small resolutions. Yoko is a responsive theme and does do resizing based on media queries, so I just turned my slider off at small sizes, Pastebin

    You can check it out, working and all here

    That should be it! Yay, flexible sliders which will auto-resize. Tested in Chrome, Firefox & IE 9/10, no issues.

  21. funkwarrior
    Member
    Posted 2 years ago #

    Thanks Jono!

  22. MG7282
    Member
    Posted 2 years ago #

    Should the code in header.php also be modified? The size of my slider is not being adjusted according to the size of the browser. Also in Firefox some of the images shifted to the right. Any assistance would be greatly appreciated.

  23. stellaz
    Member
    Posted 2 years ago #

    Top draw, I only needed to completed step 1 & 2 and it resolved my issue thanks for the info Jono.Rogers & everyone else.

  24. krazykatz911
    Member
    Posted 1 year ago #

    JONO!! Thank you!

    @Stellaz - You must do all the steps. Doing just step 1 and 2, fixes it in firefox, The other steps fix it in Explorer, etc.

    Awesome Fix! Thank you!

    I am going to zip it all, and save it.

  25. krazykatz911
    Member
    Posted 1 year ago #

    Jono, everything works good, but I noticed a glitch. Sometimes the hover sensitivity is way to low, like 1-2 inches below the header picture. This causes you not to be able to select an menu page. Doesn't happen all the time, but often.

    Any ideas?

  26. krazykatz911
    Member
    Posted 1 year ago #

    Actually, Do all first 2 steps listed by Jono,skip the mod to slider-css.php.

    Everything working great now. slider-css.php mod was causing the problem I described above.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic