Modify Visual Editor HTML with Masterpages

Topics: Visual editor, XSLT
Aug 29, 2011 at 1:43 PM

I have been having trouble getting a function that modifies the Visual Editor output to work correctly. I have done everything here

In the masterpage I put this in:

 

<rendering:function runat = "server">
            <f:function xmlns:f="http://www.composite.net/ns/function/1.0" name="Composite.Template.Modify">
              <f:param name="Content">
                <rendering:placeholder id = "content" title = "Content" default = "true" runat = "server" />
              </f:param>
            </f:function>
          </rendering:function>

 

In the website it gives an error saying that "the elements f:param and f:function are not closed"

When I tested the exact same function, but in a website that didn't use masterpages, it worked perfectly.

 

Thanks,

Naibla

Aug 29, 2011 at 1:54 PM

:) you're mixing apples and bananas here... you can't do that. <rendering:placeholder runat="server" /> is a asp.net control, while you're param expects an XElement.. a simple mismatch of types.

Aug 29, 2011 at 2:20 PM

maybe you should explain some more about why you would need this functionality... if you switched to masterpages im sure we can find a Asp.Net way to solve the same thing as you would otherwise have done in XSLT.

Aug 29, 2011 at 5:31 PM
Edited Aug 29, 2011 at 5:34 PM

I was trying to make a simpler way to implement the Slimbox 2 package. I was aiming for having a simple class selection for an image, which the XSTL would capture and insert the Slimbox function with the correct image source. This would make putting existing images into a Slimbox really easy.

I thought that XSLT would be a fairly easy solution. I suspect that maybe this could also be done with javascript... I'm pretty new to ASP.Net so any help if that turns out easy would be nice.

Thanks,

Naibla

Coordinator
Aug 30, 2011 at 6:43 AM

Instead of inserting Slimbox function for each image, you can insert Slimbox function once to the page template without specifying any parameters (This will only add required links to JS's and CSS's to the head of the page) . Then to display image  with in a "Slimbox" it should be in  next format:

<a href="images/image-1.jpg" rel="lightbox" title="my image"> 
  <img src="images/image-1.jpg" width="200" /> 
</a>

For more information read this article  http://docs.composite.net/C1/Packages/CompositeMediaPackages/Slimbox2.aspx#InsertImageManually

Aug 30, 2011 at 7:49 AM

The outputted image-tags should not contain any calls to javascript, so im not really sure what you expect your html to look like BEFORE and AFTER your transformation. To follow the guidelines of unobtrusive javascript, the image/a-tag should only contain a rel attribute to identify that this is something you want to be a part of the Slimbox gallery. Then you use jQuery when the document is ready to find all these hrefs and apply slimbox to them.

 

$(document).ready(function ()
{
    $('a[rel=lightbox]').click(function (e)
    {
        var a = $(this);
        var href = a.attr('href');

        // do something to add slimbox to the link/image

        e.preventDefault();
    });
}):

 

By the way, if you're new to asp.net, why not just use xslt template instead of masterpages then?

Aug 30, 2011 at 1:18 PM

Thank you! The javascript works. :)

@Burningice: I didn't actually originally create this website (or I would use XSLT), I have just been working on it. I had already gotten this slimbox to work with XSLT on a different website and was just trying to transfer the same thing over to the masterpage website.