Is there a way to configure resizing in the browser?

Nista

Joined: 2009-04-05
Posts: 9

Posted: Tue, 2010-12-07 12:57

Hi Everyone,

I'd like my images to be re-sized in the browser based on screen resolution.
So far I haven't been able to find any info indicating if this is possible or not.
Does anyone know? Any info would be helpful.
Thanks,
Nista

nivekiam

Joined: 2002-12-10
Posts: 16504

Posted: Tue, 2010-12-07 17:52

EDIT: Sorry wrong thread....

To answer your question. I'm sure it can be done with javascript, just don't know how to go about it off the top of my head. What size image do you want to resize to the browser size? The thumbs? Resize? Full size only?

____________________________________________
Like Gallery? Like the support? Donate now!

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Tue, 2010-12-07 20:46

$('img').css({'width':parseInt($('img').width()*.50), 'height': 'auto'});

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

Nista

Joined: 2009-04-05
Posts: 9

Posted: Wed, 2010-12-08 00:47

Thanks for the response, to clarify, I'd like the browser to be able to re-size the 900x600 image that is normally returned (not the full size one produced by the double square icon).
Suprsidr, I'm new to Gallery, where do I add this line? In one of the template files?
Thanks,
Nista

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Wed, 2010-12-08 02:46

In my gallery embed template (I mainly use it for playing around) I check the viewport size and adjust the number of rows & columns depending on the size.(resize the window and watch it reconfigure itself)
Similar could be done for image scaling with a bit of jQuery like I posted above.
This would simply resize the image in the browser, not load a smaller derivative image.

But for me to post further script, I'd need to know more specifics like what size image vs. what size viewport

AND BTW if you have gallery build a smaller resize like 640px it would display that first before the 900px image. As seen again in my sample.
-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

Nista

Joined: 2009-04-05
Posts: 9

Posted: Wed, 2010-12-08 14:05

Hi Suprsidr,

I don't find a embed template in my gallery directories and your sample link doesn't work, but looking at the embed template.. that's exactlt what I'd like to do just for image size.

I'm using the stock gallery 2 distro, version 2.2.5.
Here is an example of an image that I'd like to resize.
http://photography.cpdouglas.com/v/flora/longwood/2008/_D3S0721MMXW.jpg.html
They are generally portrait mode and on screens of lower resolution the viewer has to scroll
vertically to view the entire image. It would be perfect if they could see the entire image without scrolling.
Thanks,
Nista

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Wed, 2010-12-08 17:11

at the bottom of gallery2/themes/carbon/templates/local/theme.tpl <- you may have to copy the original here
just above:

  </body>
</html>

add:

        {literal}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <script>
            $(function(){
                $("#gsImageView img").css({'height': parseInt($(window).height() - 240), 'width': 'auto'});
                window.onresize = function(){
                    $("#gsImageView img").css({
                        'height': parseInt($(window).height() - 240),
                        'width': 'auto'
                    });
                }
            });
        </script>{/literal}

Clear your template cache and test.
You may have to change the 240 to suit your site.
my example - have fun and resize your browser window.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

Nista

Joined: 2009-04-05
Posts: 9

Posted: Thu, 2010-12-09 03:22

Thanks much, but when I add the script I get a blank page and I don't see any errors in the apache logs.
I did some googling and it seemed that I needed to add
<script src="https://www.google.com/jsapi?key=API_ID" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
to the header. I did that, but it doesn't seem to make a difference.
Any idea what I'm doing wrong?

Nista

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Thu, 2010-12-09 04:01

Ah yes, I forgot we were inserting into a smarty template.
I amended the above code, surrounded it in {literal} tags

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

Nista

Joined: 2009-04-05
Posts: 9

Posted: Thu, 2010-12-09 04:30

It looks like it works!
I'll play with it a bit more tomorrow, but I can't thank you enough for all your help
Thanks again..
Nista

HappyMini

Joined: 2011-05-21
Posts: 6

Posted: Sat, 2011-06-18 15:18

Sorry to bump this old topic, but I got a question about it.

Is there any way to set a max size? So the smaller images won't get blurry?

Nista Joined: 2009-04-05 Posts: 9	Posted: Tue, 2010-12-07 12:57
	Hi Everyone, I'd like my images to be re-sized in the browser based on screen resolution. So far I haven't been able to find any info indicating if this is possible or not. Does anyone know? Any info would be helpful. Thanks, Nista
	XUser login Username: * Password: * Create new account Request new password
nivekiam Joined: 2002-12-10 Posts: 16504	Posted: Tue, 2010-12-07 17:52
	EDIT: Sorry wrong thread.... To answer your question. I'm sure it can be done with javascript, just don't know how to go about it off the top of my head. What size image do you want to resize to the browser size? The thumbs? Resize? Full size only? ____________________________________________ Like Gallery? Like the support? Donate now!

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Tue, 2010-12-07 20:46
	$('img').css({'width':parseInt($('img').width()*.50), 'height': 'auto'}); -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

Nista Joined: 2009-04-05 Posts: 9	Posted: Wed, 2010-12-08 00:47
	Thanks for the response, to clarify, I'd like the browser to be able to re-size the 900x600 image that is normally returned (not the full size one produced by the double square icon). Suprsidr, I'm new to Gallery, where do I add this line? In one of the template files? Thanks, Nista

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Wed, 2010-12-08 02:46
	In my gallery embed template (I mainly use it for playing around) I check the viewport size and adjust the number of rows & columns depending on the size.(resize the window and watch it reconfigure itself) Similar could be done for image scaling with a bit of jQuery like I posted above. This would simply resize the image in the browser, not load a smaller derivative image. But for me to post further script, I'd need to know more specifics like what size image vs. what size viewport AND BTW if you have gallery build a smaller resize like 640px it would display that first before the 900px image. As seen again in my sample. -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

Nista Joined: 2009-04-05 Posts: 9	Posted: Wed, 2010-12-08 14:05
	Hi Suprsidr, I don't find a embed template in my gallery directories and your sample link doesn't work, but looking at the embed template.. that's exactlt what I'd like to do just for image size. I'm using the stock gallery 2 distro, version 2.2.5. Here is an example of an image that I'd like to resize. http://photography.cpdouglas.com/v/flora/longwood/2008/_D3S0721MMXW.jpg.html They are generally portrait mode and on screens of lower resolution the viewer has to scroll vertically to view the entire image. It would be perfect if they could see the entire image without scrolling. Thanks, Nista

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Wed, 2010-12-08 17:11
	at the bottom of gallery2/themes/carbon/templates/local/theme.tpl <- you may have to copy the original here just above: </body> </html> add: {literal}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script> $(function(){ $("#gsImageView img").css({'height': parseInt($(window).height() - 240), 'width': 'auto'}); window.onresize = function(){ $("#gsImageView img").css({ 'height': parseInt($(window).height() - 240), 'width': 'auto' }); } }); </script>{/literal} Clear your template cache and test. You may have to change the 240 to suit your site. my example - have fun and resize your browser window. -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

Nista Joined: 2009-04-05 Posts: 9	Posted: Thu, 2010-12-09 03:22
	Thanks much, but when I add the script I get a blank page and I don't see any errors in the apache logs. I did some googling and it seemed that I needed to add <script src="https://www.google.com/jsapi?key=API_ID" type="text/javascript"></script> <script language="Javascript" type="text/javascript"> to the header. I did that, but it doesn't seem to make a difference. Any idea what I'm doing wrong? Nista

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Thu, 2010-12-09 04:01
	Ah yes, I forgot we were inserting into a smarty template. I amended the above code, surrounded it in {literal} tags -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

Nista Joined: 2009-04-05 Posts: 9	Posted: Thu, 2010-12-09 04:30
	It looks like it works! I'll play with it a bit more tomorrow, but I can't thank you enough for all your help Thanks again.. Nista

HappyMini Joined: 2011-05-21 Posts: 6	Posted: Sat, 2011-06-18 15:18
	Sorry to bump this old topic, but I got a question about it. Is there any way to set a max size? So the smaller images won't get blurry?

Is there a way to configure resizing in the browser?

XUser login