A recently introduced feature is the ability to display a gallery as a slideshow. The images are displayed against a dark grey frame – see example in the wp.com blog announcement. That frame may not be to your liking, or may not fit the theme you’re using, but it isn’t directly customizable (yet?); so here’s a workaround:
Paste into the HTML post or page editor. Where I’ve written HEXF and HEXB, you write the hex codes for frame and border color respectively. For hex codes see “Colors” under Links 1 in my sidebar.
• If you want no frame at all and the background of your main column is white, use the hex code for white: fff.
• If the images are captioned, change the height and margin numbers to 470 and 495, respectively.
• In some themes the slideshow doesn’t behave as it should: you may need to specify an absolute width (for instance 600px) instead of 100%, or you may need to adjust the height and top margin numbers to completely cover the original frame.
• For galleries in general, see Jennifer’s reference post.
https://wpbtips.wordpress.com/
Very timely, as I just posted one on my primary blog, though I am pretty happy with both the slideshow frame as it is, out-of-the-box, and the resized image quality. (I uploaded at max of 500 pixels width/height, but that’s apparently not what’s being displayed.)
And thank you again for linking to my non-official FAQ.
Posted by Jennifer | April 16, 2010, 20:19Is this “color:#HEXF;” needed for some themes? If you try to put text into the paragraph (or into a div), the slideshow just floats over and covers most of it.
Anyway, how did you figure this out? LOL, best I managed was to set the slideshow in a div…
Posted by Tess | April 17, 2010, 05:42@Jennifer: No need to thank me: the official gallery FAQ is your post, for obvious reasons!
“I uploaded at max of 500 pixels width/height, but that’s apparently not what’s being displayed.” No it isn’t. The slideshow frame has a fixed height of 450px (for non-captioned images), and images are displayed with a minimum padding of 10px. So images higher than 430px are downsized, images lower than that are displayed in real size unless they exceed the available width.
@Tess: The text is not supposed to show up. Notice that I’m suggesting the same hex for bg color and text color: the text-color command is there to hide the text (in my test specimen I used “Hi Matt!”, hehe…), because the text is there just so that the code won’t be stripped out if you switch to visual.
How did I come up with this code? First I tried to enclose the slideshow in a div with negative margins; didn’t work. Then I tried to create a mask for the black border alone; when I threw that in at an arbitrary position (to see what happens and adjust it), I noticed that the black frame went behind it but the photos remained in front of it: so I realized I only needed a colored rectangle, not a transparent rectangle with colored borders.
But, as the last phrase of the post says, I don’t know what happens in IE (there’s something’s wrong with my laptop PC: doesn’t display slideshows at all).
Posted by Panos | April 17, 2010, 09:06“Hi Matt!” indeed. The sound you hear is me, laughing quietly.
Actually, what I did was to set the slideshow between divs, not inside divs. Tried the negative margins myself hoping to make the whole thing smaller, which didn’t work. I gave up at that point. Silly me—I’d been fooling around with Kurt’s code but I didn’t notice that it disappeared behind the slideshow. It didn’t make me think of changing the background color. Expectations, goals: find what you look for, but miss the unexpected.
So thanks for this info and for explaining your process of discovery; my post looks good now.
(Doesn’t work in IE5.1 (bet that’s not news) )
Posted by Tess | April 17, 2010, 19:54@Tess: Between divs, inside divs, with all sorts of properties, tables, you name it… I tried everything I could think of to constrain the width – no way. I wanted to, because the slideshow is designed to occupy the whole width of the main column, which looked bad in Garland, plus there’s a problem with flexible-width themes in general: it won’t shrink if you make the browser window narrower.
IE5? Oh I don’t care about that! IE5 is dead (and IE6 should be so too).
Posted by Panos | April 18, 2010, 07:56IE5, yes, no one cares.
I was making a dumb whatever… j o k e? perhaps I’ll be the last ei5user, but I’m thinking there are still people out there who are still fans of it, and have blogs (and communities or forums) who remember it fondly.
But let’s not go searching, right.
Posted by Tess | April 18, 2010, 21:53Thanks for that, Panos. Honestly, the whole image-sizing thing is giving me heartburn, especially since switching to Inuit Types on RandomActs.
Posted by Jennifer | April 24, 2010, 13:05You’re welcome. I’m afraid the “Theme Team” is too busy pushing out new themes before they fully test them and perfect them. Same goes for the slideshow (official excuse is that they know it’s got shortcomings but they wanted to make it available as soon as possible). Quite at variance with this:
“We will ensure all of our public work represents the best in coding practices, web standards, and technical excellence.
We will craft all of our themes to have a consistent user experience and meet our users expectations and hopes.”
(http://en.blog.wordpress.com/2010/04/15/the-theme-team/)
Posted by Panos | April 24, 2010, 14:27hi,
is it possible to have a graphical frame around a gallery slideshow??
I’d like to have my slideshow display inside a graphic image of a TV…so that the images look like they are “on” the TV (this is for my portfolio images).
is there a way to insert the graphic as a “background” on the page, centered, and then add the short code to the slideshow gallery, and center that (as described in another of your posts?).
thanks so much…this is all great info.
Posted by elaine | May 12, 2010, 02:09@elaine: Probably yes, but I need to see your slideshow. Note that the slideshow is supposed to be centered anyway; if you mean making it smaller and centered, it can’t be done. Also, do you have that “graphic image of a TV”?
Posted by Panos | May 12, 2010, 06:24Panos,
thank you very much for your reply. I can send you a jpeg of the TV image if you like? it will just be an illustrated graphic, with an empty or blank “screen”….do you want me to upload it here? I prefer to email it to you directly?
also: I don’t have a slideshow yet! I have been researching this and have had trouble choosing a slide show. So, I was hoping your answers to my question would inform my choice of slideshow plug in as well. Do you have a recommendation?
thanks so much for your time I greatly appreciate it.
Posted by elaine | May 12, 2010, 18:39@elaine: You’re welcome, but there’s a misunderstanding! My post and my previous reply to you refer to the WordPress slideshow. I’m only experienced in wp.com blogs, not self-hosted ones: I know nothing about plugins, and we don’t have the same software. I had worked out something similar to what you’re asking (for a Youtube video – see here), but I won’t be able to work out anything for you unless it can be used in wp.com blogs.
Posted by Panos | May 12, 2010, 20:41Panos, thank you very much. So sorry! I’ll keep looking….thanks so much for your time. elaine
Posted by elaine | May 12, 2010, 20:53it’s not working in IE 8 and other versions! :(( very unfortunate since the grey frame is very ugly and many people use IE…
Posted by ecomorfose | January 6, 2011, 15:35@ecomorfose: Thanks for letting me know! Unfortunately IE continues to ignore various web standards.
Posted by Panos | January 8, 2011, 16:03Hey Panos,
I tried that slide show tip and chose “black” as the background color. Everything worked as stated, except when I went back to the visual post editor, everything [above the point where I added the slide show] was all black – literally.
And the only way that I could edit was to switch back into the HTML editor. Which kinda’ sucks.
Is there a workaround to be able to use this without that happening perhaps? Otherwise, if this slideshow is inserted first into the post, it’s no big deal.
**There is also a tiny small gray [horizontal] line underneath the slideshow…looks like a “divider” of some sort, not sure that is needed.
Here is the example:
http://demolishmag.wordpress.com/2011/02/07/r-i-p-gary-moore-photo-commemorative/
Thanks for the tip, as the black background looked much better on Modularity Lite template!
BTW I only tested in Firefox on a PC.
Take care,
CK
Posted by Demolish Fanzine | February 12, 2011, 21:50Hello again!
1) The black in the visual editor is an unavoidable but harmless complication. That code says “place a 450px-high box 475px above this point”. That’s calculated to bring the box around the slideshow. But in the visual editor you don’t see the slideshow, you only see the one-word shortcode for it, so the black box will cover the preceding text (which is not what you’ll get in the actual post). If you need to use that trick again, just make sure the code will be the last thing you add.
2) The “tiny small gray line” is a little bit of the original frame poking out: just increase the height number a little and it’ll get covered (454 instead of 450 should be enough). You see, the slideshow doesn’t always show up exactly the same: I couldn’t possibly check this trick in a hundred different themes and provide different numbers for each theme.
Posted by Panos | February 12, 2011, 22:52I’ve looked around and I was wondering if missed it. Is there a page that explains how to change the frame color for captioned images? Or is it impossible? Thanx.
Posted by HH | February 15, 2011, 04:41The look of the WP “captioned images” is a standardized and automated formula: we don’t have access to any of its parameters, so we can’t change anything. For a different look, you’ll have to leave the caption field blank and create your own formula using HTML coding.
If you need help with that, check point 2 here first:
https://wpbtips.wordpress.com/comment-guidelines/
Posted by Panos | February 15, 2011, 14:37Thanks again for the tip(s)!
I was just bringing my experience to your attention, nothing else.
Yes – it does indeed work OK.
Take care
CK
Posted by Kinger | February 21, 2011, 22:03Yes, thanks. It’s good to have this on record here (I never use the visual editor, so I hadn’t thought of it).
Posted by Panos | February 22, 2011, 08:17Anyone know how to make the slideshow left aligned? Mine just seems to stay centered and it won’t budge?!
Posted by plogmagazine | July 24, 2011, 18:57(As I’m rather fond of saying when I see a question starting with “anyone”, this is my blog, not a forum – there are no anyones here other than me!)
The WP slideshow is configured to occupy the whole of the main column width, and you can’t change its alignment. Your slideshow isn’t centered (as opposed to left-aligned), it appears as if it’s centered because you used the trick I’m giving in this post to hide the grey frame instead of changing its color.
I can think of a way to shift the slideshow to the left (in either the CSS editor or the HTML editor), but I don’t find it reasonable to devise a workaround to modify another workaround. I would suggest you simply use a different slideshow instead. There are many available, and some of them are a lot better than WP’s.
Check this (under “Related”):
http://en.support.wordpress.com/slideshows/
This:
https://wpbtips.wordpress.com/2010/07/17/gigya-2-flickr-slideshows/
And the extraordinary collection of slideshows you can find here:
http://shongjog.wordpress.com/2010/08/23/how-to-insert-a-flickr-slideshow-in-a-wordpress-com-blog/
Posted by Panos | July 24, 2011, 20:25Haha apolgies was a bit unsure, just assumed it was a forum! Well done on being the guru here and helping everyone out, I’m sure they appreciate it as much as I do!
As for the slideshow, not so keen on the ones you’ve suggested I’m honest as I want something really plain and simple, ideally using javascript and css not flash, as I’d like it to work fine on iphones/ipads. Otherwise I would have just used the Flickr option I’ve seen you suggest in another post!
How hard would it be to use css to shift the slideshow viewer so it appears leafed aligned? Thanks
Posted by plogmagazine | July 26, 2011, 00:25(Thanks for understanding that my previous parenthesis was written in a humorous, not an offended, vein!)
Try this in the HTML editor:
<div style="margin-left:-90px;">
[slideshow]
<p etc etc etc</p>
</div>
I don’t know if and what you’ve changed re the width of your post column, so maybe you might need to play with the margin-left number.
And a word of caution: I’m a Mac user, so I don’t know if this will work in the wretched Explorer.
Posted by Panos | July 26, 2011, 13:26Of course no worries!
Ah thank you very much, once again you’ve cracked it.. although I didn’t doubt you for a second lol.
Hm.. I’ve recently been thinking to set up a site using wordpress.org instead so that I’m free to customise a lot more of it and tweak it exactly how I want. But I’m not sure as this would require a lot of time which im pretty short on the moment. Got any thoughts regarding using .org instead?
Thanks
Posted by plogmagazine | July 26, 2011, 23:11Sorry, I had forgotten your question: I don’t know anything about wp.org other than it allows you to change more things as well as select among thousands of themes, but it also means more risks and headaches plus it’s less SEO-friendly than wp.com.
Posted by Panos | July 28, 2011, 23:53See here too:
http://en.support.wordpress.com/com-vs-org/
Posted by Panos | July 31, 2011, 14:11I can not get this to code to work on the Piano theme… any ideas?
Posted by onnamerchantcrooks | August 4, 2011, 02:53a) To cover the original frame, the values must be as in my model (you’ve changed the values for width, height and margin-top).
b) You’ve written 3333 instead of 333 for color (regular hex codes have six digits, shortened ones three, not four).
Posted by Panos | August 4, 2011, 09:56Panos,
do I feel foolish… Thanks I knew had to be an oversight on my end. Thanks again for your tips and time.
Posted by onnamerchantcrooks | August 4, 2011, 17:27You’re welcome, and nothing foolish here: such mistakes can easily happen if one isn’t very experienced in HTML (especially when using a strange workaround someone else invented and you’re not sure what does what).
Posted by Panos | August 5, 2011, 01:41Hi Panos, can you tell me how to get rid of the border altogether?
Thank you!!
Posted by libraryexample | September 19, 2011, 19:38Thank you Panos.
Posted by jagit | September 19, 2011, 19:51@Jagit: You’re welcome!
@LE: By setting the colors to white (#fff). But there’s a problem with DePo Masthead (as you’ve probably seen by now): the slideshow won’t resize correctly in the narrow column of the front page. I would suggest you either use the more tag so that the slideshow won’t show on the front page or use a different slideshow instead of the wretched WP one.
Posted by Panos | September 19, 2011, 20:05Even with sugar please on top, you won’t delete my typo nonsense, but I’m still a fan:
http://en.forums.wordpress.com/topic/remove-border-from-wp-slideshow?replies=5
<3 <3 <3
Posted by Tess | September 19, 2011, 20:19But my workarounds aren’t always appreciated (in case you haven’t seen this):
http://en.forums.wordpress.com/topic/header-for-blogum-theme?replies=16
Posted by Panos | September 19, 2011, 20:26No, I hadn’t seen that.
there is a broken heart then…
</3
Posted by Tess | September 19, 2011, 22:14Well, doesn’t this sort of make use of a work-around via CSS:
http://en.forums.wordpress.com/topic/change-slider-from-vertical-to-horizontal?replies=8
(I really don’t know much about CSS but this looks like a push beyond the rules, or am I mistaken?)
Posted by Tess | September 20, 2011, 00:13Nothing is beyond the rules if you’ve bought the upgrade. Their problem with my workarounds is that they “circumvent paid upgrades” (designsimply’s words).
Posted by Panos | September 20, 2011, 03:58hmmm. Any ideas for a nice clean looking slideshow? I’ve tried a few that were suggested by the WP people (Slide.com and two others whose names escape me) but they were covered in branded things and looked terrible.
Btw, I’m surprised they kept that conversation between you and designsimply up in the forum. I understand where they’re coming from (they are a business after all, and they are providing a pretty great free service) but there’s something about their withholding/burying useful information which is decidedly underhanded.
Posted by libraryexample | September 20, 2011, 15:17You mean these three:
http://en.support.wordpress.com/slideshows/slideshare/
http://en.support.wordpress.com/slideshows/rockyou/
http://en.support.wordpress.com/slideshows/slide/
In the second and the third, the tabs below the actual slideshow can be removed.
Then there’s the Flickr slideshow:
https://wpbtips.wordpress.com/2010/07/17/gigya-2-flickr-slideshows/
Check this collection too:
http://shongjog.wordpress.com/2010/08/23/how-to-insert-a-flickr-slideshow-in-a-wordpress-com-blog/
As for your BTW, I’m not surprised they kept the conversation up because the forum is free enough (the official wp.com blog is a different story). But I was surprised to see designsimply try to dismiss my solution with stupid excuses (while she knows I’m a very experienced user and wouldn’t buy her crap), and I was surprised to see her proceed to the second response (so proving herself that the first one was just excuses). What they asked me is underhanded, of course, and in cases such as this I don’t know if they think we’re all idiots, or if they don’t realize what a bad impression they make, or if they simply don’t care and only want to keep their warning on record. (Her boss’s attitude when they can’t come up with something better is, roughly: that’s what we want and if you don’t like it get out of here.)
Posted by Panos | September 20, 2011, 19:28Is there a way to remove that box which hovers over the slideshow with my user info? And those annoying borders? And to make it start automatically? Are there settings somewhere which I’m not finding?
I guess I shouldn’t be surprised that WP is just another “Corporation” but they’re so happy and smiley about everything (and often helpful) that I was kind of fooled in to thinking they were different.
Posted by libraryexample | September 22, 2011, 18:21Please link to what you’re talking about because I don’t understand: if you’re talking about the WP slideshow, it does start automatically, and it has no hover over user info.
Posted by Panos | September 22, 2011, 19:51Or sorry, I was talking about the flickr slide show. I took it off the site because it looked so terrible.
Posted by libraryexample | September 22, 2011, 20:04Well, try the others I linked to.
(Note that I called the WP slideshow “wretched” precisely because it too has no options or settings whatsoever.)
Posted by Panos | September 23, 2011, 06:45A lot of the ones NettyGritty suggested are no longer free. The one I’m trying to embed now is from Roxio, but when I select that I want to add my show to WP, it posts it to my blog automatically. When I went into the post itself the code was this:
[Code relic removed – P.]
and after being published, only a link is coming up, no slideshow. What am I doing wrong?
Posted by libraryexample | October 6, 2011, 19:101) If you ever need to show me some code again, check point 4 here first:
https://wpbtips.wordpress.com/comment-guidelines/
2) Since the site has a post-to-WP button, it means WP considers them a “trusted partner”, and what you described shouldn’t be happening (didn’t happen in my test blog when I tried it: the slideshow showed up fine). What you described normally happens when you try to paste the actual embed code, not when you use the auto-post button (which produces an allowed shortcode). But you can skip the auto-posting and create that shortcode yourself – see here how:
https://wpbtips.wordpress.com/2010/07/22/gigya-shortcode-3-widgets/#comment-30060
Paste into HTML editor, of course.
Posted by Panos | October 7, 2011, 10:35When I tried constructing the gigya shortcode myself, the widget appeared, but it had no slide show. The link in the code doesn’t sound very specific to me (like there’s no ID number). Here’s the link to the code http://textsnip.com/6882d7
Posted by libraryexample | October 10, 2011, 17:57As I’m saying in the comment I linked to, you just take the part from <embed to </embed> and replace the first one with opening bracket + gigya, the second one with closing bracket:
http://textsnip.com/de5b0f
Posted by Panos | October 10, 2011, 18:57ohhh. I didn’t realize you were linking me to a specific comment- I was looking ta the main post. Thank you, that works great now. It looks nice and clean too (is there a way to make it keep looping instead of ending with Roxio’s site options?)
Posted by libraryexample | October 11, 2011, 16:51You’re welcome. No, looping not possible.
Posted by Panos | October 12, 2011, 02:22Hi there
Thanks for this post, i would really love to have a slideshow for my garland theme with a white background. I have tried the above codes in the html but they are still making it look like a black background on the preview. Can someone please give me the code to have a white background?
All the best
Surf Star
Posted by surf star morocco | November 19, 2011, 16:44just to clarify, a white background on the slideshows border
cheers
Posted by surf star morocco | November 19, 2011, 16:45Also asked (and answered) here:
http://en.forums.wordpress.com/topic/can-i-display-photos-as-a-slideshow-on-a-page?replies=6#post-748802
You can link or point to to the post or page in question so I can check and see if other changes are also needed.
PS This isn’t a forum, this is my blog: there are no “someones” here other than me.
Posted by Panos | November 19, 2011, 17:23thanks panos. i used this code: [slideshow]
–
but i can still see black in the preview. Does this mean i need to change the picture sizes and pixels? Can you help me specify this? our website is http://surfstarmorocco.com its a garland theme…
all the best
surf star
Posted by surf star morocco | November 20, 2011, 12:10Link or point to the page in question please (after you apply my workaround).
Posted by Panos | November 20, 2011, 16:03Hello, dear Panos
I wanted to relay this link that could interest you maybe
http://einzenphoto.wordpress.com/how-to-embed-a-picasa-slideshow-in-wordpress
I wish you the best for the rest of decembre, and a great 2012. Kiss kiss ♥
Posted by Anonymous | December 6, 2011, 06:32Anonymous? Smells like a certain mouse to me!
Thanks for the link and the wishes, and all the best to you too.
Couple of remarks re that page: a) As you know, the bit about the gallery feature is outdated, since gallery thumbnails now link to a carousel slideshow. b) You can also embed a Picasa slideshow without resorting to vodpod – just by turning the code into a gigya shortcode. So thanks as well for giving me the idea for a future post!
Posted by Panos | December 6, 2011, 11:39(I realized too late I wasn’t connected ^^ sorry! Thank you, Panos :)
Posted by lilmaouz | December 6, 2011, 20:35This worked great! I didn’t even realize I had the option of changing that ugly grey border in my slide show! Thank you Panos for the info.
Posted by Mary Maude | January 29, 2012, 23:49You’re welcome. That grey border would be awful against the dark bg of the theme you’re using. But you realize that my suggestion isn’t an official option, it’s a hack I worked out.
Posted by Panos | January 30, 2012, 03:23Official option? Hack? I just know it worked beautifully – yeah!
I don’t know much about the technical part of setting up and maintaining a web page – that’s why I use WordPress.com and not .org. I do know every time I try to find a solution to a problem I come across helpful advice from you, Time Bandit, and Jennifer. Thanks to all three of you for the extra time and work you put in to helping people like me who are seeking solutions!
BTW, my slideshow also looks great in IE – I checked.
Posted by Mary Maude | February 1, 2012, 22:37Thanks for your kind words. One of the best features of wp.com (one that WP themselves advertise) is it’s great forum, where we all help one another and learn from one another, and where you can get replies a lot faster than if you submit a ticket to Support.
To the ones you mentioned you should have added thesacredpath, tess, and airodyssey.
Thanks for the BTW too – guess it’s time for me to remove my red words of caution!
Posted by Panos | February 1, 2012, 23:14