-
Posts
-
Hello!
Lets start form what I think is true:
If I limit an Easy Slider to a container of 1/2, then it will simply adapt its size according to the screen resolution, correct? Then, the real size of the images will depend on the screen resolution. On my 1366px width screen for example, it has a width of 427px. Then if the image that loads into the slideshow is set to 495×400, the images will always shrink.
Second assumption: From quality point of view, it is always better to shrink an image instead of stretching it.
And now the question:
How big can the screen resolution be so that the images are shrunk and after which screen resolution do the images stretch if I choose 495×400 as image size that loads into the slideshow?
How can I calculate this? Is it linear? If with 1366px width I take 427px of image, then for 1680px width, do I take 525px and then the images would stretch instead of shrinking?
Should I better choose 710×575 if I want my web to shrink images instead of streching them for resolutions up to 1920 × 1080?
If I am messing up concepts, please just correct me. I do not have a high resolution screen in order to try…
I hope this makes sense to you!
Hi ksakkos!
Your 1st and 2nd assumptions are correct, this is the way images work on enfold theme, they have some custom css properties, that allows them to behave correctly when you have a responsive site, basically what this does is the following, e.g. Your containers is 300 x 400, you can place an image in there 600 x 800, and it will look and behave correctly, the good thing about doing this is that you already have a retina ready image since you have the double of the container size ( 2px x a single 1px ).
One of the downsides of doing these ( placing a bigger image inside an smaller container ), is that the browser needs to recalculate the image proportions, hence will take more time to render those on your page, ( you will start experiencing some delays once you have a decent amount of images on a single page.
So if you know that you won’t have an excessive amount of images, you could place a bigger image and not having to worry about window sizes.
TL;TR Yes you can use the biggest image that you have available.
Hope this answer your questions.
Regards,
DavidHello!!!
Thanks for the reply!
I think I am still a little bit confused, lets take it totaly practical:
I have a page where I have placed twp 1/2 containers one next to the other. Inside the left one, O placed an Easy Slider and I chose 495×400 for the images that loads into the slideshow. But when I make a screenshot of the web, I can see that the width is 427px, instead of 495. Then I suppose that there has been a resize. Here is how it looks like:
(http://i58.tinypic.com/1556jnl.png )I have painted the squares of the containers and some other things just for showing what I mean.
1st question: This 427px comes out because of my native resolution 13666×768? What is exactly the 495×400 in the enfold theme for, then?
As I don´t know the answer with security, I suppose that yes.
2nd question: If my native resolution was 1920 × 1080, which would be the size instead of 427px?
I guess that as a web is always seen in different screen resolutions, resizing cannot be avoided. I just suppose that rescaling down is better, so I wonder how I have to do it to asure this.
Thank you for your help !!!
Hi!
1.) The “Slide Image Size” option will not re-size the actual slider. This option is the selection of thumbnail sizes that you want to use for the slider. Selecting larger images will give you crispier and better image quality. The slider will inherit the size of the container so if you place it on a one third column, it will have the same size as the column plus minus padding, margins etc.
2.) Basically, all you need to do is upload large images something like 1900px in width. The theme will automatically trim it down into smaller thumbnails. You can find the thumbnail sizes on functions.php, you can adjust those if you want.
$avia_config['imgSize']['widget'] = array('width'=>36, 'height'=>36); // small preview pics eg sidebar news $avia_config['imgSize']['square'] = array('width'=>180, 'height'=>180); // small image for blogs $avia_config['imgSize']['featured'] = array('width'=>1500, 'height'=>430 ); // images for fullsize pages and fullsize slider $avia_config['imgSize']['featured_large'] = array('width'=>1500, 'height'=>630 ); // images for fullsize pages and fullsize slider $avia_config['imgSize']['extra_large'] = array('width'=>1500, 'height'=>1500 , 'crop' => false); // images for fullscrren slider $avia_config['imgSize']['portfolio'] = array('width'=>495, 'height'=>400 ); // images for portfolio entries (2,3 column) $avia_config['imgSize']['portfolio_small'] = array('width'=>260, 'height'=>185 ); // images for portfolio 4 columns $avia_config['imgSize']['gallery'] = array('width'=>710, 'height'=>575 ); // images for portfolio entries (2,3 column) $avia_config['imgSize']['masonry'] = array('width'=>705, 'height'=>705 , 'crop' => false); // images for fullscreen masonry $avia_config['imgSize']['entry_with_sidebar'] = array('width'=>710, 'height'=>270); // big images for blog and page entries $avia_config['imgSize']['entry_without_sidebar']= array('width'=>1030, 'height'=>360 ); // images for fullsize pages and fullsize sliderRegenerate the thumbnails using this plugin after: http://wordpress.org/plugins/regenerate-thumbnails/
Best regards,
Ismael
- You must be logged in to reply to this topic.