Video icon on thumbnails

sarahk · April 13, 2014

I feel like I'm missing something, so hopefully someone has a tip for me.

I use the Collage landscape view for my galleries. Many of my galleries are a mix of photos and videos. I feel like it used to show a video/play icon on the thumbnail (my memory may not be correct though). Anyway, as it appears right now, there is no icon on the thumbnail even when you hover over it to tell you that it is a video. The only time I see any type of video icon is if the photo has a caption. This caption will appear when you hover, and the caption is preceded by an icon of a video camera if that thumbnail is for a video.

Is there a way to have the video camera icon appear even if there is no caption? I'd love to have a small video icon with no hover, but I would settle for having it only on a hover as long as it showed up when there is no caption. I have way too many videos to go back and add captions to them all.

If you want to see an example, go here: http://sarah-k.smugmug.com/Video/Lauren-William-videos-2014/

These are all videos, but the last one has a caption, so you can see the difference.

I did find one workaround which is to change the setting "Show Filenames", but then in the caption area, the filename of the image appears, and I don't really like that. Also, I did notice that the icon does appear in the Smugmug gallery style. But, I'm pretty happy with Collage landscape, and I don't really want to switch back just to get the icon (that I swear used to show up...)

brandofamily · April 13, 2014

sarahk wrote: »

I feel like I'm missing something, so hopefully someone has a tip for me.

I use the Collage landscape view for my galleries. Many of my galleries are a mix of photos and videos. I feel like it used to show a video/play icon on the thumbnail (my memory may not be correct though). Anyway, as it appears right now, there is no icon on the thumbnail even when you hover over it to tell you that it is a video. The only time I see any type of video icon is if the photo has a caption. This caption will appear when you hover, and the caption is preceded by an icon of a video camera if that thumbnail is for a video.

Is there a way to have the video camera icon appear even if there is no caption? I'd love to have a small video icon with no hover, but I would settle for having it only on a hover as long as it showed up when there is no caption. I have way too many videos to go back and add captions to them all.

If you want to see an example, go here: http://sarah-k.smugmug.com/Video/Lauren-William-videos-2014/

These are all videos, but the last one has a caption, so you can see the difference.

I did find one workaround which is to change the setting "Show Filenames", but then in the caption area, the filename of the image appears, and I don't really like that. Also, I did notice that the icon does appear in the Smugmug gallery style. But, I'm pretty happy with Collage landscape, and I don't really want to switch back just to get the icon (that I swear used to show up...)

I don't know about NEW SM, but in old sm I made a special icon in PS by adding a video icon to the center of the image and then chose that as my thumbnail.

sarahk · April 13, 2014

brandofamily wrote: »

I don't know about NEW SM, but in old sm I made a special icon in PS by adding a video icon to the center of the image and then chose that as my thumbnail.

Thanks for the suggestion. I think it would probably be easier to just add a caption to all my videos... Thanks though!

thenickdude · April 15, 2014

Try CSS like this:

.sm-tile-video .sm-tile-content:after {
	text-transform: none;
	font-style: normal;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	padding:0 8px 8px 8px;
	background-color:rgba(0,0,0,0.4);
	
	vertical-align:middle;

	font-family: 'SmugMug Icon Font Regular';
	font-size: 24px;
	
	content:'\e116';
	position:absolute;
	top:50%;
	left:50%;
	
	/* Tune to center properly: */
	margin-top:-15px;
	margin-left:-12px;
}

Looks like:

sarahk · April 23, 2014

Thanks! I will try this out tomorrow!

sarahk · April 24, 2014

Thank you so much, Lamah! It works perfectly! This saves me from having to use the Smugmug view!

akcorcoran · April 30, 2014

Hi - can I add that to the CSS for the whole website, so it ell automatically apply to all videos I upload? That would be awesome!

akcorcoran · April 30, 2014

akcorcoran wrote: »

Hi - can I add that to the CSS for the whole website, so it ell automatically apply to all videos I upload? That would be awesome!

Hi - I'm back - ok, so I tried it and the answer is YES but there is something funky going on with the size when it is shown in Smugmug View on the actual video that is enlarged for viewing (looks great on thumbnails) - do I just need to replace the icon?

I'm assuming I could possibly change out the icons generally within the css code? I might go for the white round ones - they are a little hard to see b/c my videos are often performances in dark theaters so the background is dark. Thanks for the help!

Screen%20Shot%202014-04-30%20at%202.59.26%20PM-M.png

akcorcoran · April 30, 2014

It's weird b/c there is a little white one used in the corner when you're in the organization view - that would be fine… hmmm...

thenickdude · April 30, 2014

Maybe something like this instead?

.sm-gallery-tiles-container .sm-tile-video .sm-tile-content:after {
	text-transform: none;
	font-style: normal;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

        color:white;
	
	font-family: 'SmugMug Icon Font Regular';
	font-size: 59px;
	
	text-shadow: 0px 0px 5px rgba(100, 100, 100, 1);
	
	overflow:visble;
	
	content:'\e32f';
	position:absolute;
	top:50%;
	left:50%;
	
	opacity:0.9;
	
	/* Tune to center properly: */
	margin-top:-40px;
	margin-left:-18px;
}

Looks like:

akcorcoran · April 30, 2014

Hi - That's exactly what I'm thinking but for some reason it was black when I put the CSS in my website? I only previewed the change, I didn't publish them - would that make a difference?

akcorcoran · April 30, 2014

That's so strange - I would LOVE for it to be the white circle you've got in your example? Any suggestions?

Screen%20Shot%202014-04-30%20at%2010.19.04%20PM-M.png

thenickdude · May 1, 2014

Ah, that must have been due to my SmugMug theme. I've edited a line "color: white;" into the code in my previous post which should fix that up, give it a go.

DodgeV83 · July 6, 2014

THANKS!!! This has been bugging me for months!

thenickdude wrote: »

Maybe something like this instead?

.sm-gallery-tiles-container .sm-tile-video .sm-tile-content:after {
	text-transform: none;
	font-style: normal;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

        color:white;
	
	font-family: 'SmugMug Icon Font Regular';
	font-size: 59px;
	
	text-shadow: 0px 0px 5px rgba(100, 100, 100, 1);
	
	overflow:visble;
	
	content:'\e32f';
	position:absolute;
	top:50%;
	left:50%;
	
	opacity:0.9;
	
	/* Tune to center properly: */
	margin-top:-40px;
	margin-left:-18px;
}

Looks like:

mrdrew · March 18, 2015

Awesome. To enter the CSS for your entire site, log into your gallery.
Customize > Content and Design
In top right, select "Entire Site" instead of "Main Page" (default selected)
scroll to bottom right, click + on CSS and HTML
drag CSS somewhere on to the left pane
copy/paste the CSS code in from above
done!

rebecca615 · January 30, 2017

This works perfectly and looks great! Now everyone can easily see that my videos are videos. Thank you so much!

Video icon on thumbnails

Comments