I feel almost embarrassed to ask this - but I have found no solution so far...

I load images into the display block that have different sizes. In order to keep the correct aspect ratio and align the content to center in the DDBlock, I have changed the stylesheet of the DDBlock standard theme:

div.views-slideshow-ddblock-cycle-vsd-default div.slide-inner img {z-index: 0; height: 480px; width: auto;
	padding-top: 0px;
	padding-bottom: 1px;
	margin-right: auto;
	margin-left: auto;
}

I have set the height of the style to 480px which is the height of my display block. I set the width to auto in order to automatically adapt the width of the picture. Then I set margin-right: auto and margin-left: auto in order to center content.

But the centering does not happen. I can change the margin values to pixels - that works. But 'auto' does not. I first thought that the 'auto' width might be responsible for that - but even when change the width to a fixed value it does not work.

Ideas are very much appreciated...

Comments

ppblaauw’s picture

ppblaauw commented
Status: Active » Postponed (maintainer needs more info)

Do you have a link to the slideshow on your internet site?

ojfam’s picture

ojfam commented

I'm also experiencing the same problem. Unfortunately, my site is still on dev machine and so I cannot show it. I wonder if it's a problem with the module/template or CSS. For the moment, I'm thinking of trying out ImageCache and will let you know how it progresses.

ojfam’s picture

ojfam commented

Used a combination of ImageCache and ImageCache Actions (scale/define canvas) and I'm happy with the results.

jussiep’s picture

jussiep commented

Hi ojfam. I have a similar problem with my slideshow. Are you able to elaborate on how you centered your slideshow using ImageCache and ImageCache Action please? Thanks.

ojfam’s picture

ojfam commented

Hello jussiep.

I used the aspect-switcher to apply different settings based on whether the image is landscape or portrait. I've included the preset for the portrait setting. The numbers 310px and 947px are the dimensions for the underlying canvas on which I then centred the image.

$presets = array();
$presets['frontpage-slideshow-portrait'] = array (
  'presetname' => 'frontpage-slideshow-portrait',
  'actions' => 
  array (
    0 => 
    array (
      'weight' => '0',
      'module' => 'imagecache',
      'action' => 'imagecache_scale',
      'data' => 
      array (
        'width' => '',
        'height' => '310px',
        'upscale' => 0,
      ),
    ),
    1 => 
    array (
      'weight' => '0',
      'module' => 'imagecache_canvasactions',
      'action' => 'canvasactions_definecanvas',
      'data' => 
      array (
        'RGB' => 
        array (
          'HEX' => '',
        ),
        'under' => 1,
        'exact' => 
        array (
          'width' => '947p',
          'height' => '',
          'xpos' => 'center',
          'ypos' => 'center',
        ),
        'relative' => 
        array (
          'leftdiff' => '',
          'rightdiff' => '',
          'topdiff' => '',
          'bottomdiff' => '',
        ),
      ),
    ),
  ),
);
BenPoole’s picture

BenPoole commented

Thank you for posting, ojfam. I tried creating a canvas_action_define_canvas similar to yours, with no success. Like your example, I set X- & Y-offsets to "center" but I did not define a width because the images will be different widths, I just want them centered regardless. Is a width required in the action? Is there another reason it would ignore the X-offset: center? (I tried it on relative size, as well as exact). Thanks.

ppblaauw’s picture

ppblaauw commented

To center images css can be used:

text-align:center;
marging: auto;

MickC’s picture

MickC commented

Hi, thanks ojfam but where do you put that code?
I am using the UI on image_cache and I assume your code is some sort of override.
I've been trying to use CSS but no luck.
Do you put that code into a custom module?

Thanks

ppblaauw’s picture

ppblaauw commented

#8
Do you have link to the slideshow on your Internet server?

ojfam’s picture

ojfam commented

I can't quite remember what happened ppblaauw, but, this method of centering didn't work for me. I think it had to do with the fact that for this method to work, the width of the DIV must be specified. I couldn't do that because the width of the images varied. So, I had to use the imagecache method.

Regards.

ojfam’s picture

ojfam commented

#966374-6: Center slide content Hi BenPoole,
Have you installed the Imagecache actions project? It contains the canvas action that you'll need. You'll need to specify the width and height of the canvas over which the image (with varying height and width) will be centred.

Just realising that imagecache doesn't import PHP code.... So, the code snippet is pretty useless.

Good luck!