Home Page Slideshow

JesseDavidPhotography

Hi,

I'm having a problem with the home page slideshow. It is cutting off the outer portion of the images. It is as if it is not re-sizing. It looks as if it is zoomed in. I've tried changing settings, but no setting even seems to go with the issue.

Are there image dimensions I should be aware of, or am I missing something?

Thanks!

I'm on a Macbook Pro 13"
Full business version of Smugmug
http://jessedavidphotography.smugmug.com/

Smug Eric

It tries to fill the height of the browser with the image. So if the browser's dimensions don't match the dimensions of the image then part of the image will be cropped.

thenickdude

To add to this, if you want a slideshow that doesn't crop off edges, use the Slideshow content block instead of using a Slideshow background for the page.

vdotmatrix

lamah wrote: »

to add to this, if you want a slideshow that doesn't crop off edges, use the slideshow content block instead of using a slideshow background for the page.

where does one find a slideshow content block

Hikin' Mike

vdotmatrix wrote: »

where does one find a slideshow content block

Customize > Add Content Blocks > Photo > Slideshow

JesseDavidPhotography

I'm looking to have a full background slideshow on the home page, but I don't want it to auto-crop the images. Any suggestion on ratio or dimensions that I can set (crop) my photos to when I export them from Lightroom?

Ideally, the background images would fit the screen and be responsive to different screen sizes.

denisegoldberg

JesseDavidPhotography wrote: »

...full background slideshow on the home page, but I don't want it to auto-crop the images. Any suggestion on ratio or dimensions that I can set (crop) my photos to when I export them from Lightroom?

I don't believe you are going to find a dimension that always works since the size and shape of the browser window is not under your control.

--- Denise

JesseDavidPhotography

Thanks for all the replies. But I can't keep from thinking there must be some kind of solution to this. Perhaps CSS.

Here's my thought process:

I am assigning an image to display on a page as a background. The code tells it to stick in the center (vertically and horizontally) it appears, because I have parts of the top, bottom, left and right of the image cut off. As a photographer, I have reasons for wanting to control what part of the image displays, and ideally I'd like all of it to show (at least on browser windows that are fully expanded). As a fairly well developed photography specific site, the creators of Smugmug must have also thought of this.

When I resized the images, they showed up the same way, but pixelated, as if stretched to some fixed dimension that would be big enough for bigger browser windows open in big screens. So I conclude that there are reference points with which the images outer edges are assigned to adhere to, regardless of image size or browser size.

I don't understand why so much of the image is cut off and why Smugmug users seem to have no control over the placement and display.

Other questions:
Isn't Smugmug responsive in this way? (the background)
Is there a CSS fix to this problem that I can implement?
Is anyone at Smugmug aware of this problem?
Am I missing something very simple?

Thanks all

thenickdude

When I resized the images, they showed up the same way, but pixelated, as if stretched to some fixed dimension that would be big enough for bigger browser windows open in big screens. So I conclude that there are reference points with which the images outer edges are assigned to adhere to, regardless of image size or browser size.

No, the image is just scaled up until the window is completely covered, no more, no less. This means that if your image is in portrait orientation, it will need to be scaled up a good amount in order for the left and right sides of the window to be touched by the photo. And of course, since the photo is a taller shape than your monitor, that means that the photo will be cut off at the top and the bottom.

If you are seeing the image cut off on all sides, that should not be happening. Make sure that you haven't zoomed in in your webbrowser (press CTRL + zero or command + zero to reset your browser's zoom). Also make sure that you aren't using an old, unsupported version of Internet Explorer like version 8.

vdotmatrix

vdotmatrix wrote: »

where does one find a slideshow content block

yes thank you

JesseDavidPhotography

Thanks, everyone.

I decided to create a visual of what exactly was happening to help me see the whole picture.

-The sides of the image weren't cut off at all.
-The vertical anchor is in the center, so it cuts off the top and bottom equally.

Possible solution: When necessary, I'll try to crop the images to a wider size to help control how they display (at least on most modern browsers/monitors-not necessarily mobile).

One suggestion: One feature that would be great is the option to anchor the image on the top, bottom or center. Sometimes the bottom could be cut without changing the image much, sometimes cutting the top is better. Especially if I add text overlays to the home page images, eg categories or places. Just an idea.

Cheers,

Jesse

thenickdude

You can top-align the image by using this CSS:

.sm-user-ui .sm-page-background .sm-image.sm-tile-limit-width {
    top: 0;
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

Centre aligned is the default, you can also bottom align:

.sm-user-ui .sm-page-background .sm-image.sm-tile-limit-width {
    top: 100%;
    -moz-transform: translate(0,-100%);
    -ms-transform: translate(0,-100%);
    -o-transform: translate(0,-100%);
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%);
}