One of the features in the Gallery module for Kopage is the option to have your gallery displayed as a slideshow. However, if low-resolution images are used for the gallery, particularly portrait-styled images, then they may be distorted owing to the fact that the slideshow will, by default, stretch the images so that they fit the width of the page.
While this may not be a problem when viewing the slideshow on a small screen, such as a mobile phone or tablet, the distortion of the your images is visible on a computer monitor.
To counter this issue, you can make a simple adjustment to your website by doing the following:
1. Click on the Magic Button.
2. Select Design.
3. Select Custom Code.
4. Enter the following string of code on a new line:
<style>.swiper-container{max-width:60%}</style>
5. Save the changes.
The string above is designed to limit the width of your images to 60% of the page width, thus limiting any image distortion.
This amount can be adjusted by editing the percentage value. If, for example, you want your images to be limited to 40% of the page width, then you would enter the string as follows:
<style>.swiper-container{max-width:40%}</style>
Note: This will affect all slideshows in your website, which means that widescreen images will also be limited.
- 4 Users Found This Useful
