New: Carousel Content Block

leftquark

Happy holidays everyone! I'm pleased to announce the addition of a new content block for displaying your photos: the Carousel Content Block :clap

Ever wanted to display your photos side-by-side while the user scrolls to the left and right? Well now you can!

You'll find the new "Carousel" content block under the "Photo" section in the Content tab of the Customizer.

Demo: http://www.aaronmphotography.com/Customizations/Carousel

Some Notes:

• The images can be sourced from any 1 gallery or from any image that you select.
  • If you source the photos from "Photos I Choose", they're sorted in the order that you select them, similar to the Folder, Gallery, Page content block
• You can select the height of the carousel: 20%, 25%, 33%, 50%, 60%, 75%, and 100%
• By default the navigation arrows are on, allowing users to jump to the next or previous photo.
• Navigation bars are hidden if you're at the very first or very last image.
• You can turn navigation arrows on or off. If they're off, the only way for users to scroll is to use the scrollbar at the bottom.
• The Carousel is HTML5 compliant and will work on any modern browser. No flash here!
• CSS customizations will work on the new content block

Some Definitions:

• Content Aware Height: Ensure that the Carousel block fits the height of the window if there's content above it. This may cause the content block to shrink so that it fits without the images being cut off. This makes it so users don't have to scroll to see the photos.
• Navigation Snap Alignment: When navigation arrows are on, this will control where the photo jumps to when the arrows are clicked.
  • Default is center: we'll make it so the photo is next photo is always in the center.
  • Left: makes it so that the left edge of the left-most photo is at the left edge of the carousel.
  • Right: makes it so that the right edge of the right-most photo is at the right edge of the carousel.
  • The best way to see this is by viewing the demo above.

As always, we'd love to hear your thoughts and feel free to post any thoughts here or over on the Feature Request Page.

jerryr

Excellent News !! I know a lot of photogs that have asked for this I am working on a new design in which this will work perfect !! stay tuned...thanks (and happy holidays !)

agallia

Great news!

David_S85

Very nice, Aaron, and a welcome addition. Isn't this carousel display what you were personally working on with your own SM site a year or more ago?

leftquark

David_S85 wrote: »

Isn't this carousel display what you were personally working on with your own SM site a year or more ago?

I did have a little "hack" that worked very similarly but this is obviously cleaner, easier to use, faster, and much much better The bright side to my 'hack' was that it made coming up with some customizations for the Content Block super easy/quick!

Dutchphoto

Nice, Some feedback and suggestions
I tried it and it's a great addition.
Viewing my site on An Ipad, I did notice and issue that's likely IPad specific.
As the hight is a percentage of the page size, the size of the carousel changes whenever the Title bar in safari minimizes and expands again. I would much prefer to have a fixed hight.

A great additional option would be to have the carousel scroll at a specified speed instead of just manual scroll.

SmugSam

Looks great! May have to give this one a go on my site....

Thanks for the update.

SmugSam

Just some thoughts from my initial play: Super easy to use! I noticed that clicking on a photo in the carousel doesn't do anything. Are there any plans to add navigation into this feature? The carousel could be a great method for me redoing my main photography page, but I would envisage a user clicking on one of the carousel photos to see/get to a bigger version and/or (more importantly) the ability to purchase.

David_S85

SmugSam wrote: »

Just some thoughts from my initial play: Super easy to use! I noticed that clicking on a photo in the carousel doesn't do anything. Are there any plans to add navigation into this feature? The carousel could be a great method for me redoing my main photography page, but I would envisage a user clicking on one of the carousel photos to see/get to a bigger version and/or (more importantly) the ability to purchase.

SmugSam raises a good point. +1. I'd also like to see that functionality built in as an option.

leftquark

SmugSam wrote: »

I would envisage a user clicking on one of the carousel photos to see/get to a bigger version and/or (more importantly) the ability to purchase.

It's something we'd love to add to it at some point. We wanted to make sure to get the carousel out to you all before the New Year so you could play, enjoy, and make your sites even better using it!

jerryr

Hi - here is what I came up with for the new carousel content block.
http://www.db-weddings.com/Portfolio-Wedding

Feedback I have received so far :
- Excellent ! Glad SmugMug implemented the new carousel content block
- Would like to have the images in the carousel content block 'clickable' - like the slideshow, collage, etc...
- When the arrows are enable, have the photos scroll left/right to show the entire photo

Great job overall !!
jerry

leftquark

jerryr wrote: »

- When the arrows are enable, have the photos scroll left/right to show the entire photo

Could you explain this one a bit more? I'm having a hard time understanding it Do you want it to automatically move left and right just a little bit so that the nav arrows temporarily don't cover the photo?

jerryr

Hi - the customer I worked with indicated that it would be nice that when you click on the left arrow it displays the full image of the left image. The right image(2) would not display in full.
Not sure if that is possible or not...
Excellent job on this !! jerry

leftquark

jerryr wrote: »

Hi - the customer I worked with indicated that it would be nice that when you click on the left arrow it displays the full image of the left image. The right image(2) would not display in full.

The default action is to jump to the "center" of the image, however, we have options for "Left" and "Right", which you can see in the demo I posted here: http://www.aaronmphotography.com/Customizations/Carousel

It's the setting called "Navigation Snap Alignment". Let me know if that's not what they wanted.

jerryr

hi - ok - let me give it a try and I will let you know thank you

jerryr

Hi - yes - that is what is requested. I say give it a try on the new carousel slideshow - thanks - jerry

sarasphotos

Hi,
just a couple of notes on the carousel. I've now got it working nicely for my home page but on the first couple of attempts I encountered a slight glitch.

First I chose a smart gallery as the source and what I noticed is that when I first loaded the page (in logged-off mode) the last two or three pictures from the gallery loaded and there was no possibility to scroll further (even after pushing F5). If I then visited any other page and came back to the home page the gallery then displayed in the correct order and I could scroll through all of the pictures (about 200). The behavior was the same in Win 8.1/64-bit IE11 and Firefox and Win 7/64-bit IE9 & Firefox. Then I noticed that there were some pictures in the gallery that didn't belong there, so I modified the smart settings and excluded a keyword and experienced a different strange behavior.

This time on first loading of the page it was absolutely blank (except for the header) and pushing F5 did not help at all. When I browsed to any other page and went back to home, then home displayed correctly. And I did check the original gallery - it displayed correctly the entire time.

Now it's working just fine - I chose a non-smart gallery with a small number of photos.

And any chance of getting an auto-scroll/endless loop option added??

Thanks for the swell new feature.

Cheers,

Sara

leftquark

Hmm ... that's strange. I've tried re-creating the issue you've had using Smart Galleries and I can't get the issue to repeat

Endless-loop has been one of the 2 most requested features since we released it. Auto-Play/Auto-Scroll tend to sound more like a Slideshow. Could you describe the use case for why you'd use the Carousel with auto-scroll but not a slideshow?

sarasphotos

Hi Aaron,

I actually thought about the slideshow vs carousel issue when I wrote my post. For me a looping carousel has a very different dynamic visual impact than a slideshow - namely, you're seeing multiple photos moving across the entire screen rather than just one image in a window. Probably one would set the movement value to be pretty slow so as not to be disturbing. I like the idea of a little motion on the home page (at least right now I like it - in a couple of months my taste and ideas may change :-) ).

In the case of my current home page, the wide horizontal carousel works well with the menu bar so I adopted it right away. I do however miss the movement and personally I find the horizontal scroll bar slightly disturbing to a clean optic. I wish there was an "only arrows, no scroll bar choice" (is there a customization?).

Thanks again, Sara

leftquark

sarasphotos wrote: »

For me a looping carousel has a very different dynamic visual impact than a slideshow - namely, you're seeing multiple photos moving across the entire screen rather than just one image in a window. Probably one would set the movement value to be pretty slow so as not to be disturbing.

I've always sort of thought that motion, and especially automatic motion is part of a "slideshow" feature. People typically think of slideshows as the thing you click play and it goes (or auto-plays on page load). The carousel was meant to be more interactive. What you're asking for is actually a Slideshow transition style that "Slides" the photos left/right as they load. We kinda-sorta do this already with the "Slide Left" or "Slide Right" transitions but they don't slide very far and fade far too quickly. I'll certainly jot this down as a Slideshow Transition Feature Request though!

sarasphotos wrote: »

I wish there was an "only arrows, no scroll bar choice" (is there a customization?).

There is! We can globally turn off all carousel horizontal scroll-bars using:

/* Disable the horizontal scrollbar on the bottom */
.sm-component-carousel-scroll {
  overflow-x: hidden !important;
}

It's a better bet, though to call out the specific content block (aka "widget") by going into the HTML and finding the widget-ID. In my Customizations sample page I could disable the 2nd one from having a scrollbar by using it's widget ID. The benefit to this is that you don't accidentally disable it for a Carousel you don't want. If you want to disable it for all carousel's then your best bet is the code above

/* Disable the horizontal scrollbar on the bottom */
[COLOR="Red"].sm-page-widget-9183581[/COLOR] .sm-component-carousel-scroll {
  overflow-x: hidden !important;
}

You'll need to change the part in red to make it work on your site.

sarasphotos

Thanks for the quick response and the customization tip! (BTW, what are you doing working so late?)

Yes, (automatic) motion is part of a slideshow but it can also be part of a carousel's properties. What I like about a potential auto-scroll carousel feature for my home page is that the user is not always confronted with the same static image/set of images. And let's face it, there are still a few users out there that don't automatically understand what an arrow is for. (I support over 100 end-users daily and am constantly amazed at how unsavvy people can be.

Cheers,

Sara

PB775A

super! share sarasphotos point of view completely!
Indeed I agree for 100% with Sarasphotos on this, possibility to remove the scroll bar and a slight automatic movement to the left or to the right so the carousel becomes a sort of autoscrolling carousel
This would greatly pimp up the homepage :-)
But anyway, thanks SmugMug for bringing this. Philippe

sarasphotos wrote: »

Hi Aaron,

I actually thought about the slideshow vs carousel issue when I wrote my post. For me a looping carousel has a very different dynamic visual impact than a slideshow - namely, you're seeing multiple photos moving across the entire screen rather than just one image in a window. Probably one would set the movement value to be pretty slow so as not to be disturbing. I like the idea of a little motion on the home page (at least right now I like it - in a couple of months my taste and ideas may change :-) ).

In the case of my current home page, the wide horizontal carousel works well with the menu bar so I adopted it right away. I do however miss the movement and personally I find the horizontal scroll bar slightly disturbing to a clean optic. I wish there was an "only arrows, no scroll bar choice" (is there a customization?).

Thanks again, Sara

W.W. Webster

Was/is consideration being given to offering Carousel as a Gallery Style?

leftquark

W.W. Webster wrote: »

Was/is consideration being given to offering Carousel as a Gallery Style?

You must be in my brain because that was the first question I asked! We wanted to roll it out as a content block first, collect feedback, and then we'll consider adding it as a gallery style.

W.W. Webster

leftquark wrote: »

You must be in my brain because that was the first question I asked! We wanted to roll it out as a content block first, collect feedback, and then we'll consider adding it as a gallery style.

mbridge87

Hello all,

Just saw this addition! Some of you may remember I spent a long time creating a custom (ish) gallery for my site . I really like the carousel feature here but would love to combine some elements with the gallery I already have. Maybe this is exactly what will happen when / if it becomes a gallery style but I thought I'd ask anyway. The combo would be:

1) Image carousel
2) Photo's underneath which can also be used for navigation (like my gallery)
3) Lightbox (like my gallery)
4) I'd also love to be able to scroll by simply clicking and dragging as well as the usual arrows. I can foresee a lot of people trying to do that.

Would that be possible with CSS or is it worth just waiting to see if it will be added to gallery styles with those features?

Thanks,

Max

sarasphotos

Oh, Max, my jaw is still hanging open in amazement. That is exactly the style I have wanted for my SmugMug style galleries since I joined a year and a half ago. Did you have to enter the code for every gallery separately or is it a change to the theme or gallery css? Would you consider sharing??? :-)

BTW, love your portraits!

Cheers, Sara

mbridge87

Hi Sara,

Thanks for the compliments. Of course I don't mind sharing! It was the community here that helped me figure this out, people like Leftquark, so I am more than happy to share.

It's just the default gallery style with some CSS to alter things. I have CSS in two places on my site, on page and in the theme settings. As far as I can remember there is nothing in the theme settings so it should work with just this:

/* ================================================
= MOVE THUMBNAILS BELOW PHOTO IN SMUGMUG LAYOUT =
================================================ */
/* Move the thumbnails below the photo
This section of code works for all browsers except FireFox. */
.sm-gallery-smugmug .sm-gallery-images.yui3-g {
webkit-flex-direction: column !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}

/* Make the photo fit the width of the page so it's larger */
.sm-gallery .sm-gallery-images .sm-gallery-image-container {
width: 100% !important;
}

/* Make the thumbnails fit the width of the page
Also push it down 20 pixels so it's not so close to the captions. ALTER THIS TO YOUR LIKING */
.sm-gallery .sm-gallery-images .sm-gallery-tiles-container {
width: 100% !important;
margin-top: 0px !important;
}

/* Make it so the thumbnails don't have a specific height + align centrally
YOU'LL WANT TO ADJUST THIS SO YOU GET THE # OF ROWS OF THUMBS YOU WANT.
THE BIGGER THE NUMBER THE MORE ROWS YOU GET. */
.sm-gallery-tilesnav {
min-height: 100px !important;
margin-left: auto;
margin-right: auto;
}

/* shift tiles over to align centrally */
.sm-gallery-smugmug .sm-gallery-tiles {
max-width: 86%;
margin-left: auto;
margin-right: auto;
}

/* align thumnails pagination centrally */
.sm-gallery-tiles-bar {
margin-left: auto;
margin-right: auto;
}

/* Remove owner buy + captions */
.sm-user-ui .sm-gallery-smugmug .sm-tile-info, .sm-button-image-share, .sm-gallery-header {
display: none;
}

.sm-gallery-tiles-pagination {
display: none;
}

/* remove captions, title and keywords from lightbox */
div.sm-user-ui div.sm-lightbox-content div.sm-lightbox-info {
display:none;
}

Hopefully that will do it for you. Let me know if you have any trouble with it. Although bare in mind I am no expert and others on here will definitely be more knowledgeable.

Max

denisegoldberg

mbridge87 wrote: »

...Of course I don't mind sharing! It was the community here that helped me figure this out, people like Leftquark, so I am more than happy to share.
...

Max -
I have to agree with Sara - your altered gallery style looks awesome. I've moved away from smugmug-styled galleries but with your changes I might switch some of my galleries to use this too.

Thanks!

--- Denise

silvio000

I just implemented carousel on my homepage and it is AWESOME!!!

Now i would LOVE to have it as a gallery style.

Thanks,

Sílvio Oliveira
www.silviooliveira.net

mbridge87

Denise,

Thanks! Again I cannot take too much credit here. The community here really helped. I wasn't very keen on the galleries out of the box either hence spent literally weeks figuring this out, writing posts, tinkering etc.

If anyone manages to make extra alterations to this let me know, I'd love to see them.

I do quite a lot of user testing on my site. You can do three free tests a month here http://peek.usertesting.com/ . Point being some people get confused with the double arrows. It would be nice if I could move the two arrows which change photos, not the ones which change thumbnails, up to the side and make them bigger. Really I'd just love the carousel to work in the way I described in my initial post.

Max