Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Autofocus Pro: Expand width of slider images? WordPress


How do I change width of slider images on the homepage in Autofocus Pro?

I've expanded the width of content area to 1000px and everything is correctly lining up on homepage, but the width of images in slider is still 800px.

Had no problem reducing height to 275px.

The images I am using are 1000px by 275px.

I have a fair understanding of PHP & CSS, and can cut/paste like a champ however, I need an answer file-by-file... do this, then do that.

Answers (5)


Duncan O'Neill answers:

Hi Webbie,

two additions to different files should do the trick;

1) Add the following code to the bottom of /wp-content/themes/autofocuspro/style.css;

/* update for wp questions 2116 */
.anythingSlider {
height: 275px;
width: 1000px;

.anythingSlider .wrapper {
height: 275px;
width: 1000px;

#main, #container, #content,
.anythingSlider ul li,
.blog #container #content #featured-slider-container .hentry.sticky {width:1000px;}
.blog #container #content #featured-slider-container .hentry.sticky {height:275px;}

2. Add the following code to the bottom of your /wp-content/themes/autofocuspro/extensions/thematic-functions.php;

/* FOR WPQ 2116 */

You might also need to revert the OTHER files you've edited above to their former state for this to work, but all other things being equal, this should do the trick.



webbie comments:

<strong><em>Aussie Aussie Aussie!

Oi! Oi! Oi!"</em></strong>

The only other thing I had to do was regenerate thumbnails.



webbie comments:

PS: I don't know the NZ cheer for "Great job!"

Duncan O'Neill comments:

Haha, cheers. We'd probably just do a haka .... again. glad it worked.


AdamGold answers:

Can you please post the URL of the site?

AdamGold comments:

If it's indeed sticky posts images, then is should be something like this:
add_image_size( 'sticky_posts', 1000, 275, true );


add_image_size( 'sticky_posts-thumbnail', 1000, 275, true );

I need your index.php to see what's exactly the value is.


Dan | gteh answers:

Add this to the end of your main CSS

.anythingSlider {width:100px;}
.anythingSlider .wrapper {width:1000px;}
.blog #content #featured-slider-container .hentry.sticky {width:1000px;}


derekshirk answers:

The first thing I would check (just to be safe) is:

When you uploaded the image did you use the WP image up loader. If so, did you select a size smaller size than 1000 x 275 such as medium?


I doubt the answer is as simple as that but I'm happy to help you solve this. Could you post the URL to your site?


Rashad Aliyev answers:

Did you solve your problem? It's depending functions and css on autofocus.

webbie comments:

This is likely not a CSS issue. I had already replaced 800px with 1000px in: style.css, default-slider-layout.css, default-layout.css, portfolio-slider-layout.css.

AF Pro uses a sticky-post's "Featured Image" for the homepage slider.

Something is re-sizing images to 800px:

- right-click on image in slider >> View Image and it's 800px wide, even though I'm uploading 1000px wide images.

- images in uploads folder are all 800px wide, but uploaded image was 1000px.

- Media Setting in WP has Large-size at Max Width: 1020.

- note that height was changed to 275px <em>(from 300px)</em> and it's working fine.

I also changed 800px to 1000px in thematic-functions.php.

Here are autofocus-settings.php revisions:

if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
set_post_thumbnail_size( 88, 88, true ); // Default thumbnail size
add_image_size( 'archive-thumbnail', 188, 188, true ); // Archives thumbnail size
add_image_size( 'single-post-thumbnail', 1000, 528 ); // Single Posts thumbnail size
add_image_size( 'front-page-thumbnail', 1000, 275, true ); // Front Page thumbnail size

// Custom AutoFocus Thumbnail Sizes
// -
function af_image_sizes( $sizes ) {
$sizes[] = 'afthumb';
$sizes[] = 'aflarge';
$sizes[] = 'afsingle';
return $sizes;
add_filter( 'intermediate_image_sizes', 'af_image_sizes' );

// Custom image size settings initiated at activation
if ( is_admin() && isset($_GET['activated'] ) && $pagenow == 'themes.php' ) {
if( FALSE === get_option('af_size_w') ) {
add_option('afthumb_size_w', '188');
add_option('afthumb_size_h', '188');
add_option('afthumb_crop', '1');

add_option('aflarge_size_w', '1000');
add_option('aflarge_size_h', '275');
add_option('aflarge_crop', '1');

add_option('afsingle_size_w', '1000');
add_option('afsingle_size_h', '275');
add_option('afsingle_crop', '0');
} else {
update_option('afthumb_size_w', '188');
update_option('afthumb_size_h', '188');
update_option('afthumb_crop', '1');

update_option('aflarge_size_w', '1000');
update_option('aflarge_size_h', '275');
update_option('aflarge_crop', '1');

update_option('afsingle_size_w', '1000');
update_option('afsingle_size_h', '275');
update_option('afsingle_crop', '0');

update_option('thumbnail_size_h', '188');
update_option('thumbnail_size_w', '188');
update_option('thumbnail_crop', '1');

update_option('medium_size_h', '288');
update_option('medium_size_w', '288');
update_option('medium_crop', '0');

update_option('large_size_h', '494');
update_option('large_size_w', '1000');
update_option('large_crop', '0');

update_option('thread_comments', '1');
update_option('thread_comments_depth', '2');

update_option( 'posts_per_page', '12');
update_option( 'date_format', __('j M ’y') );

Also tried adding <em>add_image_size( 'front-page-thumbnail', 1000, 275, true );</em> to functions.php but that didn't help.

Is there a missing "post thumbnails" command that can control AF-Pro's use of WP "Featured Image" function? <em>(Asked like I may know what I'm talking about.)</em>