Resize slideshow

[Jacque Garner]

How do I change the size of the slideshow? I create all my images to fit our big screen in the church (1280×960). Obviously, I’m not wanting a slideshow that size, but the proportions are very different for the PROGRESS theme.

Does that even make sense?!?!?! Sorry if this is a dumb question, I’m new at this.

Thanks so much for your help!

Jacque
http://www.newvisionwestmoreland.com

[Jacque Garner]

And a 2nd question:

How do I make the image fill the entire widget box on my home page?

[Bill Robbins]

Duane,

Thank you for your business first of all. I can completely understand not wanting to resize all those images. Here’s how to change the aspect ratio so they fit:

1. Go to the Appearance section of your WordPress control panel and select “Edit.”
2. From the list of files on your right, choose functions.php and look for this spot (line: 162)

   
   add_image_size('single', 960, 400, true);
   

3. Change the 400 to 720 and save your changes.

That should make the aspect ratio match your current slides. The change won’t affect any images you’ve already uploaded though. To change those, you’ll either need to use a plugin called Regenerate Thumbnails or upload the files again.

---

You can make the images fill the entire widget box. Here’s how to do that:

1. Go to the theme options page and select the styling tab.
2. At the top, choose “yes” to include custom styling.
3. Scroll down to the bottom and you’ll see a box labeled “Custom CSS”
4. Paste this into the box:

   
   .home-widgets .widget_sp_image {
   	padding: 0;
   	width: 31.24%;
   }
   
   .home-widgets .widget_sp_image img {
   	margin: 0 0 -5px;
   }
   
   @media only screen and (min-width: 320px) and (max-width: 599px) {
   	
   	aside.home-widgets .widget_sp_image {
   		padding: 0;
   	}
   	
   }
   @media only screen and (min-width: 600px) and (max-width: 767px) {	
   	
   	aside.home-widgets .widget_sp_image {
   		width: 47.5%;
   		padding: 0;
   	}
   }
   

5. Update your settings.

That will take out the black padding around the image widgets for you. It will still be present at a small resolution, like a iPhone help in landscape mode because the images in the widget aren’t large enough to fill it. Once the screen shrinks to a certain point, the widgets at the bottom of the home page actually get larger temporarily.

---

If you have any questions, let me know,
Bill

[Jacque Garner]

Thanks so much for your quick response!

I got the widgets changed. THANK YOU!!!!

However, I’m still having trouble with the slider. I deleted all the slides and reloaded. It still took over the page. I then went to photoshop and resized it to 960×720 and it still took over.

I’m sure I’m missing something very simple, so thank you so much for your help!

Jacque
http://www.newvisionwestmoreland.com

[Bill Robbins]

Jacque,

I found a spot where you had been editing the style.css file that was a step in the right direction:

.flexslider { 

	width: 960px;
	height: 720px;
	margin: 0; 
	padding: 0;
	overflow: hidden;
}

That spot you may want to adjust though is this one, near the very bottom:

#slideshow {
		height: 400px;
	}

It sets the height when the slideshow is on a larger screen. Try changing that and if it works better for you. If you’ll set the other part back to its original code:

.flexslider { 
	width: 100%;
	height:auto;
	margin: 0; 
	padding: 0;
	overflow: hidden;
}

you’ll be able to still have it be responsive too.

If you have any questions or trouble, let me know,
Bill

[Author]

Posts