Customising image size in slider?

[eklyx]

Using Akita to build site for artist friend. Working my way through documentation and videos (I’m old-school!). Two questions:

1. Although the full-width slider image size is given as 960×350, we want to use different proportions to show paintings (960×473). I’ve discovered that an <img /> tag in a custom slide doesn’t crop the image to 350 (exactly what we want!) but I’m not sure my artist friend will be able to cope with html! Is there a way of changing the default image depth from 350 to 473 on the “simpler” image slide option?

2. Is there any documentation available on what options are available with Custom slides – i.e. how to use the Setup Custom Content box?

Many thanks…Rob.

Topic

[eklyx]

Oops. That’s an image tag I’m referring to under question 1 (angle brackets were removed!).

[Jason Bobich]

Hello Rob.

1. You can use this plugin to change the dimensions of the crop size that gets applied when you upload each image:

http://wordpress.org/extend/plugins/theme-blvd-image-sizes/

2. No, apologies, but there is no documentation on this. I’m not sure what I’d write about to be honest. It’s essentially just a blank block that you can put your custom HTML into if that’s what you want to do. I think, if anything, right now there is some confusion with it because of some weird things happen with stripping certain HTML out when saving. I’ve improved this in the next update.

[eklyx]

Jason,

My apologies in advance that this is so long, but artists don’t like their images cropped!

Followed your advice. Installed image-sizes plugin (and Regen Thumbs one) but after several attempts, still not there. Since you probably know the answer (and can therefore save me hours of testing and frustration!) I ran another simple test, as follows.

1. Set the slider full width size to 960×500 (Internal ID: slider-large; Current Image Size: 960×500)

2. Added a slide with one clean image (not previously uploaded) – TestThumbs-960×473

These are the image sizes generated (found them in MAMP uploads folder – local install on Mac):

TestThumbs-960×473-45×45.jpg
TestThumbs-960×473-70×70.jpg
TestThumbs-960×473-130×130.jpg
TestThumbs-960×473-200×125.jpg
TestThumbs-960×473-240×150.jpg
TestThumbs-960×473-320×200.jpg
TestThumbs-960×473-472×295.jpg
TestThumbs-960×473-542×292.jpg
TestThumbs-960×473-195×96.jpg
TestThumbs-960×473-200×98.jpg
TestThumbs-960×473-300×147.jpg
TestThumbs-960×473-600×295.jpg
TestThumbs-960×473-620×305.jpg
TestThumbs-960×473-940×463.jpg
TestThumbs-960×473.jpg

(I expected to find a TestThumbs-960×473-960×473.jpg thumb?).

If the slider is in Content area on page – image is not cropped but is “resized” to fit within page margins – image displays with proportions intact at 908×448 (same width as divider, etc.) ???

If I move the slider above content area it does stretch full width (no page margins) but goes back to 960×350 size (and is cropped to fit those proportions).

As I said earlier I can get result we want using an image tag in Custom Slide Area, but I’d like to give artist friend control without having to cope with html.

Can you advise on some way we can “force” image in slider to full width and to display at 960×473?

All the best…Rob.

[Jason Bobich]

(I expected to find a TestThumbs-960×473-960×473.jpg thumb?).

This crop size wouldn’t exist because that is the size of the image you’re uploading. There’s no need for WordPress to save two copies of the same image.

If the slider is in Content area on page – image is not cropped but is “resized” to fit within page margins – image displays with proportions intact at 908×448 (same width as divider, etc.) ???

Yes, this is exactly correct. You’re using a responsive theme with the potential to place a slider in tons of scenarios with all kinds of potential container widths. If a container results to a certain width in conjunction with the elements around it, and you put an image in it that is larger than that, what would be a better alternative that the image scaling to fit? If this didn’t happen, you’d have an image sticking out/breaking the layout of the site.

Can you advise on some way we can “force” image in slider to full width and to display at 960×473?

All right, so here’s where I think the confusion in this is. — I don’t think your image is being cropped incorrectly. That part you have now have setup correctly. Specifically in the featured area, there is CSS to create a uniform slider height across image and video slides. Now that you’ve got images at the size you want, you just need to override this. Try putting this in your Custom CSS:

#featured .element-slider .standard-slider-wrapper li.slide { height: auto; }

==========

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[eklyx]

Jason,

Thanks for taking the time to respond. Unfortunately it doesn’t seem to do the trick so I’ll try a new example from scratch again tomorrow when my brain is more alert (it’s late in the evening here and I can’t face trying to understand the CSS right now!).

All the best and thanks again…Rob.

[Jason Bobich]

I’m sure there’s a simple answer. If you can get a working example online, I’d be glad to take a look at it.

[eklyx]

Jason,

There is a simple answer – re-reading the documentation and your instructions!

I started out to set up an online example from scratch and decided to watch the videos again to make sure I understood the “issues”.

Along the way it hit me – I was putting your CSS fix in the wrong place (I put it into styles.css!). Egg on face big time 🙂

Fix worked in Custom CSS box under Theme options and in custom.css file within assets folder in child theme.
(Incidentally why are css and images folders in child theme assets folder shown in red with red “x” beside them?)

So thank you. Problem solved!

All the best…Rob.

[Author]

Replies