Shape 5

Joomla Templates => Traction - Club => : mywebguy July 15, 2013, 09:31:22 AM



: Image Gallery Plugin - Recommendation
: mywebguy July 15, 2013, 09:31:22 AM
I'm having difficulty getting any of the image gallery plugins on JED to play nicely with the Traction Template in IE9. I was wondering if anyone else was using an image gallery on their Traction site that they would recommend?

Thanks in advance!


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 15, 2013, 11:09:13 AM
Hello,

Have you tried any of our extensions such as the Image and Content Fader? All extensions should work provided they are coded properly so they don't conflict with any other site scripts.

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 15, 2013, 06:19:16 PM
Thanks for the reply and I have looked at all of the image extensions here. As I'll be posting a ton of images the plugins make the most sense as I can load them to a single folder for the event, add an article with the plugin code pointing to the folder and it will create thumbs, etc.

I think I've tried everything available on the JED site and they all break the template in IE9... some IE8 as well (according to browsershots.org). I have contacted the developer for the Sigplus plugin (I use it on other sites) and he said that doesn't know what might be creating the conflict. He said he'd look at it if he gets the chance but as it's not been reported elsewhere it doesn't appear that it's a major priority.

I've tried the JQuery plugin as suggested but couldn't get that to help and I've posted on the hire a coder section ($40) but no bites so far.

Really need to get this sorted if possible but obviously don't know where else to go.


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 15, 2013, 06:55:54 PM
Hello,

The only thing I can suggest would be to install those 3rd party plugins and then try and disabling all the scripts you can within the Template to see if they are conflicting with each other.

These scripts are:

Multibox
S5 Box
Lazy Load Images

That is really the only scripts that would ever cause a conflict like this. If those are disabled it is most likely coming from another extension you have added.

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 15, 2013, 07:09:22 PM
Thank you, I will try that but it's the css that breaks (doesn't show background image or text styles) so might the scripts be responsible for this?


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 15, 2013, 07:26:11 PM
Hello,

Could you post a URL with one of these 3rd party extensions enabled with an improper layout?

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 15, 2013, 07:33:44 PM
Thanks, I have tried disabling those scripts in the Vertex framework but it had no impact. I am currently testing disabling the third party styles in the general tab in Vertex (waiting for the screen shot). When it pops up (says about 10min) I'll load the screenshot and a link to the page if it doesn't fix the issue.

Thanks again for your time and support!


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 15, 2013, 07:39:19 PM
NP

If it is just a CSS issue I can most likely see where its coming from.

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 15, 2013, 07:47:35 PM
OK, that had no effect... a link to the page is http://www.tampabayboater.com/vessels/5-25-13-1 and I'm loading the screen shot for IE9 below.


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 15, 2013, 08:02:19 PM
Hello,

From what I could see it seems to be working. Could you be a bit more specific on how it is supposed to look? I am not familiar with the extension so I am not sure. It definitely looks like you have a ton of images showing. Is there a max amount of items you can set in the settings?

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 15, 2013, 08:11:22 PM
The plugin is working fine it's just on that page there is no background image for the page or text styling.


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 15, 2013, 08:23:22 PM
Hello,

They just haven't accounted for the J3.0 Bootstrap CSS changes. I think I found a workaround for now.

Remove the following code block on the server:

bootstrap-default.css - line 721

pre {
    background-color: #F5F5F5;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px 4px 4px 4px;
    display: block;
    font-size: 13px;
    line-height: 20px;
    margin: 0 0 10px;
    padding: 9.5px;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}

Add the following code block to the custom.css:

div.sigplus-gallery > ul {
    background-color: #F5F5F5;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px 4px 4px 4px;
    display: block;
    font-size: 13px;
    line-height: 20px;
    margin: 0 0 10px;
    padding: 9.5px !important;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}

Also from what I can tell the border isn't supposed to be there by default. It is generated by bootstrap. You can simply remove that line if you don't want any border at all.

-Mike

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 16, 2013, 08:45:55 AM
Thanks for your time and suggestions. I have removed the code suggested on templates/traction/css/bootstrap/bootstrap-default.css, and added the suggested code on templates/traction/css/custom.css and get the same... No image background and no text styling in IE9.


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 16, 2013, 10:15:42 AM
Hello,

That is something I would suggest contacting the developer about then. I have verified that none of the templates CSS files are interfering by temporarily removing all of it. From what I can tell they just haven't compensated for J3.0s bootstrap CSS overrides.

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 16, 2013, 06:07:41 PM
Thanks again Mike and I have contacted the developer. The strange thing for me is that I've tried 3 or 4 image gallery plug ins and they all have the same issue in IE9 with this template. As I'm wedded to the template and the galleries, emailed the developer and posted a request here for hire a coder I'm at a loss... Thanks again for your time though.

If anyone else has any ideas, or has an image gallery plugin that plays well with this template in IE9 I would be forever grateful for your post!


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 16, 2013, 07:16:00 PM
Alright,

Let me know what the developer comes up with.

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 16, 2013, 08:12:19 PM
He's told me that it's not a high priority as it's not been reported with other templates. If he get's the chance, he'll have a look... but it's nothing that I can afford to wait for.


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 16, 2013, 08:29:18 PM
Alright,

Have you tried using a "stock" J3.0 template to see if the issue still persists?

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 17, 2013, 06:39:05 PM
Outstanding recommendation... thanks! I'll do so ASAP and repost.


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 18, 2013, 02:52:28 PM
When I change the default template to one of the versions that ships with Joomla the pages with the plugin do display correctly in IE9.

It's unfortunate but perhaps it's time to look at another template?


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 18, 2013, 06:01:02 PM
Hello,

I am still not 100% sure what the extension is supposed to look like. Could you take a screenshot of the Extension in IE9 using the "stock" template and how the intended layout is. Then take a screenshot using our Template in IE9 showing how the layout isn't correct.

Then I will compare the two and see where the coding is coming from.

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 19, 2013, 03:48:20 PM
Thanks again for sticking with this... I absolutely love the template (feel that it's perfect for this site) but need the functionality of the plug in. If you'd like Admin or FTP privileges please let me know. I'll add the attachments in three posts as I got an error when I tried to put them all into one.

This is how the template looks in IE10, Chrome, Firefox (displays perfectly)


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 19, 2013, 03:49:30 PM
This is how the same page is displayed in the Fruitshop template in IE9. Notice the template images and text formatting is as it should be.


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 19, 2013, 03:50:37 PM
This is how the same page is displayed in IE9 with the Traction template (notice there is no background image, no text/link formatting)


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 19, 2013, 05:35:15 PM
Hello,

That actually looks like an issue with your specific browser or machine. I tested this in my version of IE9 on 2 different systems and this is what it looks like.

See Attached

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 19, 2013, 06:54:18 PM
Yes, it has been reported that it displays fine in IE9 when running compatible but I have IE9 installed on a laptop so can see it exactly as browsershots.org every time. I've also had a couple of unfortunate displays when sharing with others on their machines.

Please feel free to run the page on browsershots.org but I can assure you it's an issue.


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 19, 2013, 07:13:38 PM
Hello,

I checked our demo using browsershots as well as browserstack. I was able to see the issue on your copy but not on any of our demo pages.

How are you calling your background? It looks like the CSS is being overridden and calling it somewhere else on the site.

The only other thing I could think of that would be affecting any of this would be a 3rd party extension since it doesn't occur in my fresh local installation here:

mysportwiki.com/traction 

Or on our demo site here:

shape5.com/demo/traction

It has to have been something you have modified or added that isn't working properly in IE9. It is also extremly odd that it works perfectly fine when using IE9 standards under Development Tools.

I have also sent an email to our development team to see if they can notice anything else.

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 19, 2013, 07:52:43 PM
Thank you, please let them know that I have attempted disabling all third party extensions with the exception of the plug in and get exactly the same results in browsershots. Also, I have had the same experience with all of the non-commercial image gallery plugins available on JED... they work fine in the demo template but not in traction.

The only line in the custom.css file relates to display of the maps. I did test taking that out and it had no effect. Can you get sigplus running on your demo traction site so that it displays fine on browsershots in IE9?

Thanks again for all of your time/help!


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 20, 2013, 08:23:15 PM
Hello,

See below for the response from our Developer who tested your site:

I tested his site out in IE9 and it works perfectly fine on our end and shows just like the other browsers. I wouldn't check it on those emulator sites that are in the post as they very often are different than an actual installed version of the browser.

From the looks of his screenshots it would seem that either the site is losing internet connection or not allowing some files to load, not a formatting issue with the template. To test this change the fonts to Arial. The main body font is set to a google font, which pulls directly from google's server. So if the font shows correctly when changing to arial (because that doesn't need a google call) then something on his browser is blocking google fonts, and probably the background image too.

-Mike



: Re: Image Gallery Plugin - Recommendation
: mywebguy July 20, 2013, 08:34:24 PM
OK, so I'll do this as well but please pass along the fact that anytime this page is viewed in IE9, that doesn't have IE10 installed it displays the same... every time in browsershots which counts on different contributors machines, every time on my laptop, and every time I've been reviewing the site with others in IE9.

Would it be reasonable to request that someone else try the native template with the plug in and test on browsershots (it's been reported at least a couple of times that it displays fine in compatibility mode).

CLARIFICATION: In which style sheet, and where, should I add the call for the font.... or is it in the template manager that it should be selected?


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 20, 2013, 09:23:13 PM
Hello,

In the Template Manager.

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 21, 2013, 07:44:05 AM
OK, changed the font to Arial in the template manager and get the same results in browsershots.org and my local laptop.


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 21, 2013, 05:36:55 PM
Hello,

Could you try installing a fresh copy of the Site Shaper to a sub-directory of your site such as /s5test and see if the issue still occurs? I tested this on 2 different systems and servers with out latest site files and it wasn't occurring on my end nor can I see it happening in my versions of IE9 on your current site.

We have a tutorial which explains how to install a site shaper to a sub-directory with a new database in our Tutorials section.

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 21, 2013, 07:33:42 PM
That would be of no assistance as we'll still come back to the fact that for some reason the developers do not trust the display of browsershots and no one on that end seems to have IE9 as their latest version.

It would be extremely helpful if you could view the site on a machine that has IE9 as it's latest version of Internet Explorer and/or have other forum members who are in that boat to chime in.

I've  seen the issue on several machines outside of browsershots as another company that I am associated with has it on all of their machines... no matter the machine, connection, permissions... it's ALWAYS the same result in IE9.


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 21, 2013, 08:13:20 PM
Alright,

I will have them take a second look with the additions you made to the thread and let you know.

-Mike


: Re: Image Gallery Plugin - Recommendation
: mywebguy July 22, 2013, 04:29:35 AM
The issue has been resolved thanks to the developer! It IS a bug in IE8/9 that I guarantee will effect others using the Traction Template (perhaps other templates from Shape 5 when using additional plugins).

After a rather lengthy investigation of the problem, I have managed to find out what makes IE 8 and IE 9 not display the background image when sigplus is enabled. Surprising as it may seem, sigplus has absolutely nothing to do with the issue. IE 8 and IE 9 seem to have a hard-wired limit on the maximum number of <link> and <style> elements they can process on the page. The exact value of the limit is not documented anywhere but seems to be around 40. Once the total number of <link> and <style> elements exceeds the value of this "magic number", the style definitions in excess are ignored. This was the reason why IE 8 and IE 9 were ignoring the background image and the page font face; both of these were defined in an inline <style> element, relatively late in the page <head> section. (IE 10 appears to work as normal in this respect.)

Once I have discovered the existence of this particularly annoying bug in IE 8 and IE 9, it was easy to find a solution: I have enabled CSS compression on your template configuration page. This merges several CSS files into a single large file and compresses the result by removing white-space and unnecessary rules. As a side-effect, it reduces the number of <link> and <style> elements in the HTML source. Once CSS compression is enabled, the site appears to work in all browsers.

I guess the most troubling/frustrating aspect of this entire issue (has been going on for some time, and reported in at least a couple of threads) is the response that the issue didn't actually exist. It does, even if it isn't seen by those with IE10 installed, and I would appreciate your time in passing it along to others moderating the forum as a likely first solution for issues with display in IE9.

It also may be a good idea to use a tool such as Browsershots.org to test the display in different browsers as whatever method is being used now didn't catch it.

Thanks again for all of your time on this issue, I know it must have been frustrating from your end as well!


: Re: Image Gallery Plugin - Recommendation
: mikenicoll July 22, 2013, 11:34:11 PM
NP

Glad it all got sorted. I replied to your last PM as well.

-Mike