Home page top rotating image size

[Durenda Wood]

Hello,

I am working on replacing the rotating pictures at the top of the home page. I had it set to 1280 by 720 and when I replaced the first slide it changed the size to 1280 by 450. I changed the 450 to 720 in the images.php file but it did not change in on the website. The first image is way shorter than the rest of the sliders.

[Bill Robbins]

Good Morning Durenda,

When you change any image sizes in WordPress (in a theme, plugin or in the Settings > Media screen) the changes will only affect future uploads. To change images that have already been uploaded, you’ll need to use the regenerate thumbnails plugin. It’ll add a new screen to your tools menu that you can use to change images that have already been uploaded.

Let me know if you run into trouble,
Bill

[Durenda Wood]

Thanks Bill for such a fast reply.

I just uploaded a new image and it changed it to 1280 by 800 and the image is actually set to 720. Can you explain that? Or will that plugin fix that too?

[Bill Robbins]

Would I would try doing is dragging the image from the site to your desktop and then open it up in a photo editor to verify the dimensions of the actual image file. Depending on how everything is set, the image may be stretched to fill the width which could make it taller than expected. That’s typically what’s going on when an image ends up taller than expected in a slider.

[Durenda Wood]

I modified the image before I uploaded it in photoshop The actual size of the image is 1152 by 720.

This is the code for images.php

$post->ID, ‘post_status’ => ‘inherit’, ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘order’ => ‘ASC’, ‘orderby’ => ‘menu_order ID’) );

$results = array();

if ($photos) {
foreach ($photos as $photo) {
// get the correct image html for the selected size
$results[] = wp_get_attachment_image($photo->ID, $size);
}
}

return $results;
}

// Adds reminder of image sizes
function organizedthemes_display_sizes( $translated ) {

global $post;

if ( get_post_type($post) == ‘post’ ) {
$translated = str_ireplace( ‘Featured Image’, ‘Featured image (1280w x 720h)’, $translated );
}

if ( get_post_type($post) == ‘page’ ) {
$translated = str_ireplace( ‘Featured Image’, ‘Featured image (1280w x 720h)’, $translated );
}

if ( get_post_type($post) == ‘slide’ ) {
$translated = str_ireplace( ‘Featured Image’, ‘Featured image (1280w x 720h)’, $translated );
}

if ( get_post_type($post) == ‘staff’ ) {
$translated = str_ireplace( ‘Featured Image’, ‘Featured image (370w x 370h)’, $translated );
}

return $translated;

}

add_filter( ‘gettext’, ‘organizedthemes_display_sizes’ );
add_filter( ‘ngettext’, ‘organizedthemes_display_sizes’ );

[Bill Robbins]

That’s what is then. The image’s width (1152) is smaller than the image size’s width (1280). The browser will stretch the image to fill the full width of 1280 pixels which will cause the image in your browser to grow in height. If you’ll resize your image in Photoshop so that it’s 1280 pixels wide that should keep the browser from stretching it and thus making it taller.

[Durenda Wood]

I made all of the images the exact same size and it worked perfectly, Thank you for your help!

[Bill Robbins]

Anytime Durenda. Have a great week 🙂

[Author]

Posts