Page tree

Problem


I would like to resize images within slideshows in Extend or force the images to display in a specific size. 


Products affected: Extend

Versions affected: Any

Solution


Currently, you cannot resize slideshow images or force them to display as a specific size within the Extend Slideshow interface.

However, you can use embedded CSS code to override the image sizes manually. This change affects all slideshows in the channel.

 To manually overwrite slideshow image sizes

 

  1. Navigate to the Channel Layout screen that contains the slideshow that you want to modify.
  2. In the drop-down list, select Custom Code> Add/Edit Local Code.
  3. To insert the CSS code, select Palette > Embedded CSS block.
  4. Copy and paste the following code within the CSS block. You can modify the width and height values.
.carousel-inner {
  position: relative;
  width: 111px;
  height: 222px;
  overflow: hidden;
}


.carousel .item > img {
  display: block;
  height: 222px !important;
  width: 111px !important;
  line-height: 1;
}


.slide {
   width: 111px !important;
   height: 222px !important;
}