Increase slideshow width

theinnerground · Member · Jan 16, 2015 at 4:53 am
Copy link

Add topic to favorites
Hello,
I am trying to increase the size of my slideshow on the first page of my site. It is here:
http://www.theinnerground.com

I want the slideshow to extend to the outer edges of the screen – take a look at my friends site for a good example:
http://cabecadacabra.com/

Thank you!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 16, 2015 at 8:40 pm
Copy link
At best, this would be difficult to do. What you are seeing on the site you reference is a featured page slider, not a slideshow. I would suggest looking through the Theme Showcase for themes with Featured Content Sliders. One that comes to mind is Superhero, which has a very large, featured post slider.
theinnerground · Member · Jan 17, 2015 at 7:31 am
Copy link
I guess I didn’t ask my question well. Could someone help me figure out how to this using css without changing my theme?
Thank you…
thesacredpath · Member · Jan 17, 2015 at 8:19 pm
Copy link
You asked your question just fine, but Studio has some limitations when it comes to slideshows. It sets a maximum height for the slideshow container of 410px, and uses a maximum image width of 660px, and although those can sort of be overridden with CSS, things go awry when someone views it on a tablet or phone; the images don’t scale proportionally and get all distorted.

Take a look at my test site here. To get this, here is what you have to do.

1. Images have to be 1200px wide x 410px high.
2. Edit your home page and delete the existing gallery slideshow and insert a new one using the 1200px x 410px images.
2. In the “Media Width field below the CSS edit area at Appearance > Customize > CSS, enter 1200 for the width.
3. Paste in the following CSS at the very bottom of your existing custom CSS.
```
#main {
    max-width: 1200px;
}
#gallery-1466-6-slideshow .slideshow-slide img {
    width: 100%;
}
```
Using the above, you will get a degradation in image quality since we are asking the browser to scale a 660px wide image up to 1200px wide. Sorry, this can’t be helped. Again, it is a limitation of the slideshow implementation in Studio. Doing it as I’ve outlined above is the only way I know of to keep the image proportions correct for all window/screen widths in Studio.
thesacredpath · Member · Jan 17, 2015 at 8:23 pm
Copy link
Instead of the code above, use the following, which limits this change to the home page.
```
.home #main {
    max-width: 1200px;
}
.home #gallery-1466-6-slideshow .slideshow-slide img {
    width: 100%;
}
```
I did not remove or change the left sidebar area, and this change keeps the slideshow within the bounds of the content area.
thesacredpath · Member · Jan 17, 2015 at 8:25 pm
Copy link
Sorry, one more thing. The code above has the gallery id stuff for my test site. After inserting the gallery on your home page, you will have to inspect the HTML and find the #gallery-XXXX-X-slideshow and get the numbers for your particular gallery. Each gallery will have a unique number.

[Edit: This change won’t show, probably, in the Customize preview, but should show on your site.]
theinnerground · Member · Jan 26, 2015 at 9:48 pm
Copy link
Ok, I will have to play with this a bit this week to see how it looks – it will take some time to change the photo sizes.

But I thought of one other possibility. Shouldn’t it be easy to somehow just increase the size of photo width for the slideshow, so that the slideshow width equals width of the page. So not as a page slider or header, but just increasing the slideshow width?
I am not sure if this what you did in these instructions, but it seems so complicated for something I thought would be an easy change.
Thank you again, I am not so css savvy, so I apologize if I repeat questions that were already answered or if it isn’t possible to make this any simpler – which is how it sounds :D
Thank you very much for your help!
thesacredpath · Member · Jan 28, 2015 at 2:09 am
Copy link
Shouldn’t it be easy to somehow just increase the size of photo width for the slideshow, so that the slideshow width equals width of the page. So not as a page slider or header, but just increasing the slideshow width?

I wish it were that easy. The size of the photo is set in the theme files, and we cannot edit those to set the base size. That means we are asking the browser to enlarge a smaller photo, which will result in a loss in quality.

Give the above code a try and if you have problems, let us know.

No items found.