1

I have setup a views slideshow, but is anyone able to help me with centering the images in the middle of the slideshow? Some images are not very wide and they are aligned to the left of the slideshow. I would like all images to be in the center to make it look better.

The site I'm working on is here

I have tried adding the following codes to my css but none of them work:

.views-field-field-image-fid img { border-style:solid; border-width:1px; display:block; margin-left: auto; margin-right: auto; position:relative; text-align:center; }

and

.views-field-field-slideshow-image {
     display:block;
     margin-left:auto;
     margin-right:auto;
}

I still cant seem to get it working, I've tried a few other css selectors that I found online as well. Im new to drupal views and quite new to Drupal.

Thank you.

  • your slideshow is in home page? – Bala Nov 6 '13 at 12:13
3

You need to use image styles to get all the images the same size.

From the admin menu, Configuration > Media > Image styles.

Create a new image style, with a scale and crop attribute to the exact dimensions for your slideshow. Name it "slideshow-image".

Then go back to the slideshow settings on your views slideshow, and select "slideshow-image" as image style.

Now every image will be the same width and height, regardless of the dimensions you upload them in.

  • The detriment of this method is that you loose control of what is beeing displayed, although one can get used to the automatism... – Volker Nov 6 '13 at 12:42
  • Yes, but it is a much better alternative if he is expecting his client to upload the photos. Most of my clients don't know how to resize an image in photoshop, or even mspaint. This method makes it much easier for the end user. If he is just doing the slideshow himself, and it isn't grabbing content from articles where his client uploaded an image, then yes, your method of resizing images in photoshop is better. – Collins Nov 6 '13 at 12:46
  • Point taken! :) – Volker Nov 6 '13 at 12:53
  • Glad I could help :) – Collins Nov 6 '13 at 14:44
2

The images in the slideshow are absolute positioned by the script. The easiest way to achieve what you want, is not related to drupal. Just prepare all your images in the same way for the slideshow-size in an image-editor, like e.g. photoshop.

It looks even better... :)

0

Thank you everyone for your answers. The way I accomplished this was to center the views slideshow main frame in the center of the page. I then did what Chris suggested and applied an image style to the slideshow images. Works perfectly.

Not the answer you're looking for? Browse other questions tagged or ask your own question.