Wordpress Themes - WP Forum at BFA - Smugmug Slideshow integration not showing up properly

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)

- - Smugmug Slideshow integration not showing up properly (http://forum.bytesforall.com/showthread.php?t=20856)

Smugmug Slideshow integration not showing up properly

Smugmug slideshows (a flash code option available to smugmug users, copy paste) does not show up correctly on a post when viewed with either Chrome of Firefox. It does show up properly when viewed with Internet Explorer. I emailed Smugmug and the help guy posted them on his blog as a test and they worked. I then went back to mine and changed the theme to Twenty Twelve and it worked.

Here's the page on my blog using Montezuma (does not display correctly with Chrome or FF)

http://nymboida.net/2013/08/28/rfs-b...oto-slideshow/

and here it is on the Smugmug support guys test page (displays correctly)

http://www.andykimmell.com/blog/

The above leads me to conclude it's something with Montezuma any ideas ?

I'm not sure how you get the slideshow onto your page, but in the <embed> tag, can you try changing the width and height attributes to a style attribute with width and height properties?

For example, change this:

Code:

<embed src="http://cdn.smugmug.com/ria/ShizamSlides-2013072402.swf" flashVars="AlbumID=31499873&AlbumKey=8mJcXh&transparent=true&bgColor=&borderThickness=&borderColor=&useInside=&endPoint=&mainHost=cdn.smugmug.com&VersionNos=2013072402&width=600&height=600&clickToImage=true&captions=true&showThumbs=true&autoStart=true&showSpeed=true&pageStyle=black&showButtons=true&randomStart=false&randomize=true&splash=http%3A%2F%2Fwww.smugmug.com%2Fimg%2Fria%2FShizamSlides%2Fsmugmug_black.png&splashDelay=0&crossFadeSpeed=350" width="600" height="600" wmode="transparent" type="application/x-shockwave-flash" allowScriptAccess="always" allowNetworking="all" ></embed>

to this:

Code:

<embed src="http://cdn.smugmug.com/ria/ShizamSlides-2013072402.swf" flashVars="AlbumID=31499873&AlbumKey=8mJcXh&transparent=true&bgColor=&borderThickness=&borderColor=&useInside=&endPoint=&mainHost=cdn.smugmug.com&VersionNos=2013072402&width=600&height=600&clickToImage=true&captions=true&showThumbs=true&autoStart=true&showSpeed=true&pageStyle=black&showButtons=true&randomStart=false&randomize=true&splash=http%3A%2F%2Fwww.smugmug.com%2Fimg%2Fria%2FShizamSlides%2Fsmugmug_black.png&splashDelay=0&crossFadeSpeed=350" style="width:600px;height:600px;" wmode="transparent" type="application/x-shockwave-flash" allowScriptAccess="always" allowNetworking="all" ></embed>

Quote:

Originally Posted by CrouchingBruin (Post 103437)

I'm not sure how you get the slideshow onto your page,

Copy from smugmug (you just hit the "copy embed code" button after setting the parameters you want eg size etc then paste that copied code (from the clipboard) into WP (the "text" tab selected)

I tired what you suggested and it worked ! So thank you very much for that. I am still confused however as when I pasted the original copied code and changed the theme from Montezuma to a different theme it does display correctly.

If I look at the source code for the test from the Smugmug support staff

http://www.andykimmell.com/blog/

he similarly has width="600" height="600" and it works when viewed in Chrome ?

What is Monetzuma doing that is affecting this ?

and thanks so much for your time !

In your content.css virtual file, you'll see this CSS rule:

Code:

embed {

        max-width:                                 100% !important;         

        border:                                         none; 

        height:                                         auto;

}

What was happening is that this CSS rule was overriding the inline attributes for the <embed> tag. According to the CSS rules of precedence, inline CSS is supposed to override any external CSS, i.e., inline CSS has the highest precedence, which is why the particular modification that I suggested worked, it overrode the CSS height rule for <embed> in the content.css file. I don't know what the "correct" precedence rules are, if any, concerning external CSS and inline attributes, but apparently different browsers treat them differently: Chrome and Firefox allows external CSS to override inline element attributes, at least with regards to width and height. It should be noted that the width and height attributes have been deprecated in HTML 4.01 in favor of using CSS (i.e., designers should be using CSS width and height properties instead of width and height attributes).

You could have commented out the height property for the embed element in the virtual CSS file, but you don't know how that would affect other embed elements that you might have outside of the SmugMug slideshows.