scale down preview image on small screens
|
salamich
Joined: 2012-08-11
Posts: 7 |
Posted: Wed, 2012-08-15 09:14
|
|
Hi everyone I'm using the widewind theme and I would like to switch to bigger image previews. Unfortunately this screws up the display on smaller screens with the menu overlapping the image etc. Is there an easy way to let the browser scale down the image if the width is too big? Thanks a lot! |
|
| Login or register to post comments |
Posts: 1633
It can be done, but EASY way? Probably not if you don't already know how to do it.
The only relatively easy way would be to define a set width, but that defeats the purpose and intent of the widewind theme.
Posts: 25949
I guess one could use jquery to get the browsers window size:
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
then I bet there is some other jquery method to scale the images if the browsers window is smaller.
I would use the theme chooser to detect mobile devices and deliver the mobile theme. perhaps it could be adapted to detect window size as well.
Will it be worth the effort for people with smaller screen resolutions? What size are we talking about?
Does this work:
http://www.ollicle.com/projects/jquery/imagefit/eg/
Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
Posts: 7
Thanks for your replies!
The main culprit is my iPad which, despite it's 2048x1536 resolution, still seems to render the pages at 1024px width. I'm already using the iMobile theme for regular browsing, but I still need to access the main page now and then.
I was hoping to avoid extensive JS hacks so I can easily maintain my modifications in the future. After playing around with the HTML output I found that the following comes pretty close to what I want:
instead of the default output:
Is there a way to get my theme to output this code instead?
Posts: 1633
The method @floridave is describing is likely a better option because it's theme-based.
The only other way is to change core files, which should be avoided if possible. I'm not sure that I remember which file, but if you're in the mood to tinker around, back up everything. Then look for modules > gallery > models. Copy the items.php file to your theme > models (you may have to create that folder, but I think it'll still work). Play away. Report back.
I haven't tested, but I can later this weekend if you haven't figured it out by then.
And, yes, changing this file could be a big deal, so be cautious.
EDIT: I'm actually thinking that copying the file won't work; you may have to actually replace the original file, which, of course, is more of a risk AND will be affected every time you update Gallery.
Posts: 25949
I'm not about to test much but this might be a solution:
add to the css:
.g-resize { max-width: 400px; max-height: 400px; width: expression(this.width > 400 ? "400px" : true); height: expression(this.height > 400 ? "400px" : true); }Adjust the 400s as you need.
Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
Posts: 7
You're totally right. Modifying core files is not an option, so I had a closer look at jquery.imagefit.js floridave suggested and it really does exactly what I wanted. I only had to add the following code to the <head> of a local copy:
What's the proper way to add such modifications to my own theme?
Posts: 25949
That could be done in a theme or as a module. If you have a theme slightly modified already best bet is to create a copy of the theme and give it your name.
http://codex.gallery2.org/Gallery3:Themes#Duplicate_and_deploy_your_copy_of_the_default_theme
you need to create a copy of that file and put in on your server. then use the path to it and not stealing the content/bandwidth from the other site.
Should not take much time to make that a module.
Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
Posts: 25949
Are we reinventing the wheel here?
Does this do waht you are after:
http://codex.gallery2.org/Gallery3:Modules:fittoscreen
Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
Posts: 7
Not exactly, this module resizes based on the entire page size minus a fixed pixel amount instead of using the picture's parent container. Unfortunately a static CSS doesn't seem work either as the browsers don't care about the aspect ratio so you end up with square pictures.
The jquery.imagefit.js script works perfectly though. Now I just have to find an elegant way to get my theme to output that code in the head
Posts: 25949
Ok here is a module:
please test and let me know
Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
Posts: 7
Awesome, this works like a charm! There's a just slight delay until the image is loaded and resized, but compared to the extensive modifications needed for individual "max-width" and "max-height" tags this seems like a perfect solution.
Thanks a lot for all your help!
Posts: 7887
in this example I simply edited photo.html.php and added inline style
<?= $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize", "style" => "width:100%;max-width:{$item->resize_width}px;height:auto;")) ?>no javascript involved.
although I had to restyle #g-content
<style> #g-content{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width:100%; margin-right: 260px; padding: 0 20px; } </style>-s
All New jQuery Minislideshow for G2/G3
Posts: 1633
@suprsidr: That method gives two height and width declarations: one from the pre-existing code and one from the code you used. Does it matter if the two conflict? Will all browsers just honor whichever one comes last?
Posts: 7887
the style will be preferenced.
although crappy old unsupported IE would fail on max-size - force chrome frame on those few.
but we're talking modern and mobile here.
-s
All New jQuery Minislideshow for G2/G3
Posts: 7
@suprsidr: Cool, thanks for sharing! Seems to work great.
Posts: 25949
Updated the wide wind theme with suprsidr changes. Cheers!
Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
Posts: 7887
this would work across all modern browsers.
IE6/7 did not support max-width but who cares about those 2 people ;)
-s
All New jQuery Minislideshow for G2/G3