Default Slider Image Size?

[socialkenya]

I’d like to crop all my slider images to exactly fit the slider area so there’s no background showing (my client hates the green strip at the top of slides you can see at http://thetalismanhotel.com/equatoriateak). I had cropped all the images for a different theme entirely, but the client changed her mind, and I’d like to make the slider images fit this area perfectly in Akita.

I thought I saw this in the documentation somewhere, but now I can’t find it. I believe the width was 960px, but I don’t know the height.

Thanks in advance for your help.

Cheers,
JC

Topic

[Jason Bobich]

Hello,

The crop size is 960×350, and all of the image sizes for the theme are listed on the Item Details page over on ThemeForest under “Image Sizes” —

http://themeforest.net/item/akita-responsive-wordpress-theme/1530025

[socialkenya]

Well, I found that sizing in the documentation last night, but the images are still cropping oddly and not filling out the entire slider section. If you’ll check my other site at http://socialkenya.com, you’ll see that the full-sized slider image actually fills out the entire space, leaving no textured background above it. But on the site-in-progress, all the images are cropped down, leaving that textured border at the top that my client absolutely doesn’t want. I haven’t tweaked either theme in this area, and I’ve tried uploading slider images that are the exact same dimensions as the ones on the Social Kenya website that fill the slider area … but they still show up as cropped down on the in-progress site.

What am I missing here?

Thanks,
JC

[Jason Bobich]

I’d need to a see a live link to the site you’re having the issue with to tell you what you’re doing on that one. Can you get a working example of the issue up online so I can see it?

[socialkenya]

It was in my first post: http://multiani.com/equatoriateak. No matter how I size the images, they all crop down and leave the green textured border at the top. Not the case at http://socialkenya.com, which has one full-sized slider that fills the whole area.

Thanks,
JC

[socialkenya]

PS – I’ve already made sure that the default “Large” image size under Settings: Media is larger than necessary to avoid the weird cropping, but it’s doing it anyway. Also tried regenerating thumbnails…nope. Doesn’t help.

[socialkenya]

I think I might be inching closer to an answer due to Chrome’s Inspector. Here are two screenshots. The first shows the slider dimensions:

http://tinypic.com/r/3581c9s/4

And the second shows the div.slide-body attributes:

http://tinypic.com/r/2yyy545/4

The difference between the slide’s default size and the slide-body size is 40 pixels (350 vs 390). Should I actually crop my slider images to 960px x 390 px to get them to fill that entire area and leave no green textured border at the top?

Thanks,
JC

[Jason Bobich]

Aw, I remember now, this is the link that sometimes comes up but generally shows me a Bluehost 404 error page.

Luckily, I just got a glimpse at the link before it went back to a BlueHost 404 error. Your problem is because of some Custom CSS you’ve put into your site. You’ve added 20px of top and bottom margin to all images in your site, no matter where they’re located. That’s what you’re seeing in the slider.

Copied from your Custom CSS:

img {
    -webkit-box-shadow: 0px 5px 5px #888888;  /* Saf3-4, iOS4, Android2.3+ */
    -moz-box-shadow: 0px 5px 5px #888888;  /* Firefox 3.5-3.6 */
    box-shadow: 0px 5px 5px #888888;  /* Opera 10.5, IE9, FF4+, Chrome6+, iOS5 */
    margin-top: 20px; margin-bottom: 20px;
    }

If this is your intention, then you’d need address this specifically in the slider now to accommodate your customization something like this:

.flexslider img { margin-top: 0; margin-bottom: 0; }

Tons of ways you could do this, just one example.

[socialkenya]

Oy! Of course! That was the custom CSS I added to give drop shadows to all other images (per client’s request).

Makes sense now.

THANKS!

JC

[Author]

Replies