Image scale display methods and zoom buttons
Posted: 28 Jul 2008, 23:47
In the release of Imagevue beta 20080728, we added improved options for how to display and scale images in the gallery. As many of you understand, there is no straightforward solution to optimizing the display of images. You may for example want your viewers to see large good-quality images, yet you need them to be viewable on computers with both high and low screen resolutions. If everyone in the world was using the same size screens, it would have been easy, and we would have modified the gallery layout and all images for that size! Unfortunately, we are not that privileged, so we need to optimize layout and image sizes based on a compromise solution.
As an interesting example of both the scale methods and the zoom buttons, I would first like to show an example:
1. Go here!
2. Click the "Go fullscreen" button in the maincontrols at the bottom of the screen.
3. Roll mouse over image, and click the "Zoom in" button until image is at its maximum(usually 3 clicks)
4. Now enjoy a truly fullscreen and full-size image experience!
The display methods:
In the theme configuration files under the <image> node, there is now a setting called <scale> with 4 options:
By default, it is set to "fitmargin" which allows the gallery to scale down any image to fit within the gallery margins. Let's look at the settings:
fitmargin
Allows the gallery to scale down any image to fit within the gallery margins. This allows the image to be displayed on any screen size, also providing sufficient space for the navigation. Depending on screen size and image size, the image may be displaying at its original size if it fits within the required margins, or it may be scaled down to fit within the required margins. Images are never scaled up beyond their original size.
original
This setting displays the image at its original size no matter what screen size the user has. Depending on the size of the image, and the size of the screen, the image may be entirely visible on screen, or it may be larger than the screen area, and therefore cropped. This setting is different from the 3 other settings in the way that it does not conform to screen/stage size in any way.
fitstage
This setting displays the entire image at maximum size in the screen/stage without cropping away anything from the image. This means that the image will either border the vertical- or the horisontal limits of the screen/stage. When this option is set, image may either be smaller or larger than its original size, depending on screen/stage size and original size.
croptostage
This setting covers the entire screen/stage area with the image. To achieve this, some part of the image, either horisontally or vertically, is hidden. This method scales the image proportionally until both sides hit the vertical and horisontal limits of the screen/stage. Depending on screen/stage size and original image size, the image may either be smaller or larger than the original size. This setting also depends on the aspect of the screen vs. the aspect of the image. If both aspects are landscape(which is most common), only a minimal part of the image will be hidden. If however the image is portrait, a large part of it will be hidden because the image will be scaled to fit the screen/stage width.
The zoom buttons:
The zoom buttons that appear when rolling over an image toggle through the 4 states mentioned above. However, it is quite common that there are only 3 states available. Example:
If the viewer is on a screen size that accommodates the entire original image in "fitmargin" state, then the "original" state will be excluded because it will be visually identical to the "fitmargin" state.
Another thing to be aware of, is that the stacking order of zoom states may differ. Example: In many cases, the "original" state may represent a larger image than both the "fitstage" and "croptostage" settings.
Change default display method:
Although we reocmmend sticking to the default "fitmargins", you can change the default display method by editing your theme in admin and selecting image->image->scale. Make a choice of default scale method. Keep in mind that the margin setting only applies for the "fitmargin" state.
As an interesting example of both the scale methods and the zoom buttons, I would first like to show an example:
1. Go here!
2. Click the "Go fullscreen" button in the maincontrols at the bottom of the screen.
3. Roll mouse over image, and click the "Zoom in" button until image is at its maximum(usually 3 clicks)
4. Now enjoy a truly fullscreen and full-size image experience!
The display methods:
In the theme configuration files under the <image> node, there is now a setting called <scale> with 4 options:
Code
fitmargin, original, fitstage, croptostage
fitmargin
Allows the gallery to scale down any image to fit within the gallery margins. This allows the image to be displayed on any screen size, also providing sufficient space for the navigation. Depending on screen size and image size, the image may be displaying at its original size if it fits within the required margins, or it may be scaled down to fit within the required margins. Images are never scaled up beyond their original size.
original
This setting displays the image at its original size no matter what screen size the user has. Depending on the size of the image, and the size of the screen, the image may be entirely visible on screen, or it may be larger than the screen area, and therefore cropped. This setting is different from the 3 other settings in the way that it does not conform to screen/stage size in any way.
fitstage
This setting displays the entire image at maximum size in the screen/stage without cropping away anything from the image. This means that the image will either border the vertical- or the horisontal limits of the screen/stage. When this option is set, image may either be smaller or larger than its original size, depending on screen/stage size and original size.
croptostage
This setting covers the entire screen/stage area with the image. To achieve this, some part of the image, either horisontally or vertically, is hidden. This method scales the image proportionally until both sides hit the vertical and horisontal limits of the screen/stage. Depending on screen/stage size and original image size, the image may either be smaller or larger than the original size. This setting also depends on the aspect of the screen vs. the aspect of the image. If both aspects are landscape(which is most common), only a minimal part of the image will be hidden. If however the image is portrait, a large part of it will be hidden because the image will be scaled to fit the screen/stage width.
The zoom buttons:
The zoom buttons that appear when rolling over an image toggle through the 4 states mentioned above. However, it is quite common that there are only 3 states available. Example:
If the viewer is on a screen size that accommodates the entire original image in "fitmargin" state, then the "original" state will be excluded because it will be visually identical to the "fitmargin" state.
Another thing to be aware of, is that the stacking order of zoom states may differ. Example: In many cases, the "original" state may represent a larger image than both the "fitstage" and "croptostage" settings.
Change default display method:
Although we reocmmend sticking to the default "fitmargins", you can change the default display method by editing your theme in admin and selecting image->image->scale. Make a choice of default scale method. Keep in mind that the margin setting only applies for the "fitmargin" state.