Quantcast
Viewing all articles
Browse latest Browse all 426

Flexslider in a block with fixed images

My requirement is a block containing a fixed list of images, not a view or an image field.

Visit Administration » Structure » Blocks and select Add block.

Create a block named Home page banner.

Set Block description to Flex slider with a fixed list of images.

For the initial test of the block, set the Block body to Test Flex slider with a fixed list of images.

In Region settings, select the Content region for this test. You can change it later.

Under Visibility settings, select Only the listed pages. Enter <front> in the page list.

Save the block. Visit the home page to see the result.

Image size

Flex Slider removes the size attributes from your image elements and resizes the images to 100% of the containing element.

.flexslider .slides img {
    display: block;
    width: 100%;
}

I looked for an easy way to override it. Setting the image style to none did not fix the problem. I placed a style in the block to set width:auto.

When the style changes settle down, I might update the theme.

If you have many different size blocks containing slideshows, you might want to practice with the width setting in the optionset.


Viewing all articles
Browse latest Browse all 426

Trending Articles