Stretched images in the slideshow and pager spacing (Fixed)

What functionality of the ddblock module are you using?
Basic or advanced options?
Do you have a link to the Internet site?

Set image height and with is part of the basic slideshow options.
For advanced slideshow you would need to adjust the CSS of the ddblock theme you use.
Disable height or width setting of the image.

Hope this helps you further, please let me know.

To make this thread useful for other users, can you explain what you did to solve your issue.

Hello Phillip,

I am currently dealing with this same issue. The problem in my case is that I have many images in portrait format (height>width), and so far I have not found a way to tweak out the CSS file so DDblock can show the slides without stretching the photograph to fill all the frame. The closest I was to a solution was making the image show in real proportion but with their lower area UNDER the slideshow pager area (covering almost half of the image).

My question is: is there any CSS or PHP code I can add to the slideshow to display images in their real proportion (obviously, making the images smaller)? The only functional solution I came with is pasting the image on a grey background where width>height, and I don't like how it looks. The example is in http://krs.kadchi.com/node/15

Thanks in advance.

#5 When you don't use the height and width in the CSS of your slideshow the images will be shown in original size, (see e.g. http://www.fbeelen.com/design).

You would need to place the pager at the top of the slideshow like is done at the example otherwise it would be at another place with each different format.

The slidetext would need to be placed not on the slide but e.g. next to the slide like is done at the example.

Hope this helps you further, please let me know.

Certainly, I deleted the height and width from the CSS line and the images are shown on their original size. I could keep all my images at the same size, so I wouldn't need to move the pager. But something I am not able to do yet is keeping centered every vertical image inside the space (I am not an expert in CSS, as you may have realized). What changes needs the CSS to center the images?

Thanks again
DAVID
http://krs.kadchi.com/node/15

#7 david_p

You can give div.slide a width the same as the container and make it important so it will override the width of the element and add a display:block to the img tag.

div.ddblock-cycle-upright50 div.slide{
  width:496px!important;
}
div.ddblock-cycle-upright50 div.slide-inner img{
  display:block;

Hope this helps you further, please let me know.

Done! After messing up things a little bit (as usual), I came up to this:

div.slide{display:none;left:0;position:absolute;top:0;width:496px!important;}
div.slide-inner img{display:block;height:303px;margin-left:auto;margin-right:auto;}

Thanks a lot. Just one question: any idea why the grey division (spacer-horizontal, I think) between the second and third rows of pagers is not showing up?

Sorry I did not put the existing CSS elements in the classes, and showed only the ones to add.
What you have now, was what I meant.

For the pager space issue: the $number_of_items is probably set to 6 in the ddblock-cycle-pager-content-chromatic_blue40l.tpl.php file

$number_of_items = 6; // total number of items to show
$number_of_items_per_row=3; // number of items to show in a row

These setting defines where horizontal and vertical spacing is added.

In your case you could set it to 12 with four rows of items.

Hope this helps you further, please let me know.

P.S.
Please make different post for different issues, so they are useful for other users.
Changed issue title

Yes, now it´s working smoothly. And I´ll remember to post different issues with another entry (sorry about that). Thank you very much, and have a great week!

Set status to fixed.
Changed issue title.