Contoso theme problem

Topics: General, Writing themes
Apr 22, 2011 at 4:59 PM

Hello,

 

When following the instructions in the Contoso theme for adding the javscript slider to the header, when I paste:

<script src="Themes/Contoso/Scripts/easySlider.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
                $(document).ready(function() {
                    $("#slider").easySlider({
                        prevText: '',
                        nextText: '',
                        speed: '1600',
                    });
            });
// ]]></script>
<div id="slider">
<ul>
<li><img src="Themes/Contoso/Content/Images/Gallery/feature01.jpg" alt="Orchard Rocks" /></li>
<li><img src="Themes/Contoso/Content/Images/Gallery/feature02.jpg" alt="Orchard FTW" /></li>
<li><img src="Themes/Contoso/Content/Images/Gallery/feature03.jpg" alt="Orchard Time" /></li>
</ul>
</div>

Into the HTML view of the editor and hit update, it removes the <script> tags, any ideas why?

Regards,

TJ Havens

Apr 22, 2011 at 5:21 PM
Edited Apr 22, 2011 at 5:22 PM

It's a TinyMCE setting preventing things like script / object tags being inserted into HTML.

See following discussion for workaround:

http://orchard.codeplex.com/discussions/245373

Apr 22, 2011 at 5:29 PM

I'm not sure what the solution is, I looked in that file and dont find any of that....

Apr 22, 2011 at 5:35 PM

I guess extended_valid_elements was removed in 1.1 - but maybe TinyMCE has certain elements restricted by default.

Are you sure Body-Html.Editor.cshtml isn't being overridden anywhere else, e.g. in the Contoso theme itself?

...And is it actually the body editor you're using - it's not a HtmlField or anything is it?

Coordinator
Apr 22, 2011 at 7:31 PM

valid_elements and extended_valid_elements were modified. At first extended_valid_elements was removed but it was later put back in a different form. Your orchard-tinymce.js file should have these:

   valid_elements: "*[*]",
   extended_valid_elements: "script[type|defer|src|language]"

If not, then I don't get it. Somehow it didn't make it into 1.1 even though it is in source control. Can you confirm if it looks like this for you?

Apr 22, 2011 at 7:55 PM
Edited Apr 23, 2011 at 2:10 AM

Yes, I found it in the orchard-tinymce.js file. What do I do now....

tinyMCE.init({
    theme: "advanced",
    mode: "specific_textareas",
    editor_selector: "tinymce",
    plugins: "fullscreen,autoresize,searchreplace,mediapicker",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo,|,mediapicker,|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,|,code,fullscreen",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    convert_urls: false,
    valid_elements: "*[*]",
    // shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
    extended_valid_elements: "script[type|defer|src|language]"
});

Coordinator
Apr 23, 2011 at 5:11 AM

That is the correct file. So I guess that's not it. What browser are you using? Try clearing your cache?

Apr 24, 2011 at 9:33 PM

Ok, now I have another weird problem related to this theme and the slider. I have added an HTML widget to the DEFAULT layer FeaturedImage zone and the Image does not show up on the Blog Post pages.. It shows the ALT tag instead of the image, it shows the images on all other pages in that zone.

Regards

Coordinator
Apr 25, 2011 at 8:06 PM

Unclosed tag maybe? Check the markup on that page.

Apr 26, 2011 at 5:53 PM

That page doesn't have any  markup at this time, its the Blog Post page... Here are the links....

 

Home Page - http://www.hurstindustriez.com/

Blog Page - http://www.hurstindustriez.com/blog

Blog Post Page - http://www.hurstindustriez.com/blog/fms-x-nate-dino-tee-drop-tfl

Still working on site styles and such...

Any ideas what is causing this....

Regards,

TJ Havens

Coordinator
Apr 26, 2011 at 5:57 PM

Looks like the image src is a relative path from the current location, Themes/Contoso/Content/Images/Gallery/beatsanddimes.jpg

Add a ‘/’ to the beginning of the src and you should be good to go -> /Themes/Contoso/Content/Images/Gallery/beatsanddimes.jpg

Apr 26, 2011 at 6:14 PM

Thank you, I love Orchard and this team rocks... Thanks for all the quick responses....

Apr 28, 2011 at 11:38 AM
Edited Apr 28, 2011 at 11:56 AM

The problem with the script tags only seems to affect IE9.  If you use the IE Developer tools to change the rendering mode to IE8 or IE7, then you can insert scripts correctly.  Change it back to IE9 and it fails.

There are other side effects as well, the cancel and update buttons don't close the window either.  And if you open the HTML mode and it already has a script in it, it will rename it to <mce:script> (thought it will still strip it out if you click update)

Apparently this seems to be a bug in version of tinymce prior to 3.4, so maybe updating the version of tinymce is in order.

I updated tinymce to 3.4.2 and it seems to work correctly for IE9.  Just download the latest version, and copy the contents of the tiny_mce folder to Modules\TinyMCE\Scripts and replace all the files.

Coordinator
Apr 28, 2011 at 7:24 PM

Can you please file a bug for that?

Apr 28, 2011 at 11:04 PM

Done.

Apr 30, 2011 at 7:15 PM

Ok, now when trying to modify the FeaturedImage with a different scrip, it dosent work, here is my new script:

<!-- include jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<!-- include Cycle plugin -->
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js" type="text/javascript"></script>
<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.homeslide').cycle({
  fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
 });
});
</script>
<div style="height: 329px;">
<div style="padding: 0px; height: 329px; width: 1042px;">
 <div class="homeslide"> 
         <img src="/Themes/Contoso/Content/Images/Gallery/beatsanddimes.jpg" width="1042" height="329" /> 
         <img src="/Themes/Contoso/Content/Images/Gallery/beatsanddimes.jpg" width="1042" height="329" />
         <img src="/Themes/Contoso/Content/Images/Gallery/beatsanddimes.jpg" width="1042" height="329" />
         <img src="/Themes/Contoso/Content/Images/Gallery/beatsanddimes.jpg" width="1042" height="329" />
 </div>
</div>
</div>

Now, look at the page here: http://www.hurstindustriez.com/ 
I have the same script working here, its the rectangle box that fades in middle of screen: http://store.hurstindustriez.com/
Any ideas on why the script wouldnt be working?
Regards,
TJ Havens
Apr 30, 2011 at 9:05 PM

At first glance it could be that you're including an old version of jQuery when the page is probably already including a newer version. Use @Script.Require("jQuery") instead to make sure the version is included that's consistent with Orchard and only included once.

May 1, 2011 at 5:44 PM

Can you give me an idea of how tom implement this?

Regards,

TJ Havens

Coordinator
May 2, 2011 at 5:30 AM

Just replace that script tag with @Script.Require("jQuery")

May 2, 2011 at 6:43 PM

Which one, there are 3:

<!-- include jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<!-- include Cycle plugin -->
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js" type="text/javascript"></script>
<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.homeslide').cycle({
  fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
 });
});
</script>
Coordinator
May 2, 2011 at 8:33 PM

The first one (the actual jQuery).

Nov 4, 2011 at 11:01 AM

how can i make the contoso theme  slider....slide automatically i am not able to figure it out

Coordinator
Nov 4, 2011 at 5:51 PM

There is a readme file in there if I'm not mistaken that explains it.