Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > An Updated Links Library/Category manager via XML
IceHeart. (Guild Admin) 12/17/2008 3:58 PM EST : An Updated Links Library/Category manager via XML
IceHeart.
Posts: 110
Posts With Wolves

Well, I was looking to add a 'help and resources' section to our site .. (called 'Shadowpedia' in our parlance.. ) but i was rather unhappy with either the 'links' manager' or the 'library' they don't  allow to have nested categories, the library pops in its own content box and the navigation is not very friendly etc..  so I decided to make up one of my own, by taking advantage of a seldom-used option in GP.. the XMl/XSLT box..
The results can be seen at our site in:
http://shadowsouls.guildportal.com/Guild.aspx?GuildID=143288&TabID=2355383

Advantages:
- a nicer friendlier navigation
- nested categories
- Automatic Hide or Drop/down categories
- automatic formatting using the standard GP classes
- automatic identification of empty categories
- combined with the forums tweak from Ransim (original post here) in a right box, it will give you a smashing way to enable a categorized list via your own forums (as we did in our own site)
- you can host the Data list anywhere in the net, so this should work also for non-paying sites
- best of all, the transformation is done AT the GP server, so there are no real delays

Disadvantages:
-at this time, this does NOT work for non-paying GP websites. Unfortunately, non-paying GP sites do not have the XML/XSLT content box. I've been trying to find a workaround, but have been unable to do so (iframe and single-origin rules...)
- you have to edit the DATA XML file manually  and reupload it every time you make changes (but IMHO, this is a minor thing compared to the advantages )
- you have to be careful with some characters - single double quotes and ampersand, and make sure you keep them enclosed in  the <!CDATA[[  ...  ]]> section  (read on and you will understand this one, but once you see it, you'll realize its also a minor thing. i tried to get round this as much as I could, but havent found a way yet..)
- if your 3rd party host server where you save the list is down, obviously your list won't display..

How to create it:
1. Copy the following DATA template to your notepad and save it to a file in your PC. we will call this file "MyLinksData.XML" Note the XML file extension.

<?xml version="1.0" encoding="utf-8" ?>
<Categorized_Links_List>
  <Category name="Category1">
    <!-- This is a comment-->
    <Link name="Link11- Google"><![CDATA[http://www.google.com]]></Link>
    <Link  name="Link12-Yahoo"><![CDATA[http://www.yahoo.com]]></Link>
  </Category >
  <Category name="Category2">
       <Category name="Sub category 2.1">
          <Link name="Link211- Google"><![CDATA[http://www.google.com]]></Link>
        </Category >
        <Category name="Sub category 2.2">
            <Link  name="Link221-Ransim's post for right side box annotations"><![CDATA[http://admins.guildportal.com/Guild.aspx?GuildID=3780&TabID=27537&ForumID=25682&TopicID=7698853&Page=1#38506091]]></Link>
        </Category >
  </Category >
  <Category name="Cat -3 Mottie- Funny Links ">
    <Link name="30-Second Bunny Theatre"><![CDATA[http://www.angryalien.com]]></Link>
    <Link name="Ctrl+Alt+Del"><![CDATA[http://www.ctrlaltdel-online.com/comic.php]]></Link>
  </Category>
  </Categorized_Links_List>

2. Modify the categories names and links as needed..
To add a new category, simply add a new category block:
  <Category name="new category name here">
...
</Category>
To add more links, add a link block:
    <Link name="new link name here"><![CDATA[newlink url here]]></Link>
be careful to keep the link within the enclosing CDATA block. If the link includes additional parameters, such as Ransim's link to these forums, it will break the list if its not within a CDATA block. be careful not to add extra spaces either.

3. Copy the following XSLT template to Notepad and save it to a different file.
Do NOT  modify it. We will call this file "MyLinksTransform.xsl" . note the XSL file extension.

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output method="html" indent="yes"/>

  <xsl:template match="/">
    <xsl:element name="div">
      <xsl:attribute name="id">
        <xsl:value-of select="concat('IdDiv_CategoryList_',generate-id())"/>
      </xsl:attribute>
      <xsl:element name="script">
        <xsl:attribute name="id">
          <xsl:value-of select="concat('IdScr_ToggleList_',generate-id())"/>
        </xsl:attribute>
        <xsl:attribute name="type">text/javascript</xsl:attribute>
        function ToggleList(listID){
        if(document.getElementById('IdLst_Cat_'+listID).style.display=="none")
        {document.getElementById('IdLst_Cat_'+listID).style.display="block";document.getElementById('IdSp_Toggle_'+listID).innerHTML="[ - ] "; }
        else
        {document.getElementById('IdLst_Cat_'+listID).style.display="none";document.getElementById('IdSp_Toggle_'+listID).innerHTML="[ + ] "; }
        }
      </xsl:element>
      <xsl:element name="ul">
        <xsl:attribute name="id">
          <xsl:value-of select="concat('IdLst_Cat_',generate-id())"/>
        </xsl:attribute>
        <xsl:attribute name="style">margin-left: 0em; padding-left:0em; list-style:none;</xsl:attribute>
        <xsl:apply-templates />
      </xsl:element>
    </xsl:element>
  </xsl:template>

  <xsl:template match="Category">
    <xsl:variable name="CatID">
      <xsl:value-of select="generate-id()"/>
    </xsl:variable>
    <li>
      <div class="ForumCategoryHeader">
        <xsl:element name="a">
          <!--Keep the line below as a single line, otherwise we'll get extraenous characters in output and the click wont work-->
          <xsl:attribute name="onclick"><![CDATA[ToggleList(']]><xsl:value-of select="$CatID"/><![CDATA[')]]></xsl:attribute>
          <xsl:attribute name="style">cursor:pointer;</xsl:attribute>
          <xsl:element name="span">
            <xsl:attribute name="id">
              <xsl:value-of select="concat('IdSp_Toggle_',$CatID)"/>
            </xsl:attribute>
            <xsl:value-of select="'[ + ] '"/>
          </xsl:element>
          <xsl:value-of select="@name"/>
        </xsl:element>
      </div>
      <xsl:element name="ul">
        <xsl:attribute name="id">
          <xsl:value-of select="concat('IdLst_Cat_',$CatID)"/>
        </xsl:attribute>
        <xsl:attribute name="style">margin-left: 1em; padding-left:1em; list-style:none; display:none;</xsl:attribute>
        <xsl:variable name="ChildCount">
          <xsl:value-of  select="count(descendant::*)"/>
        </xsl:variable>
        <xsl:choose>
          <xsl:when test="$ChildCount>0">
          <xsl:apply-templates/>
          </xsl:when>
          <xsl:otherwise >
            <li>There are no items in this category yet</li>
          </xsl:otherwise>
        </xsl:choose>
      </xsl:element>
      <div style="height:0.5em"/>
    </li>
  </xsl:template>

  <xsl:template match="Link">
    <li>
      <div class="NormGridRow">
      <xsl:element name="a">
        <xsl:attribute name="href">
          <xsl:value-of select="." />
        </xsl:attribute>
        <xsl:attribute name="target">
          <xsl:value-of select="'_blank'"/>
        </xsl:attribute>
        <xsl:value-of select="@name"/>
      </xsl:element>
      </div>
    </li>
  </xsl:template>

</xsl:stylesheet>

When you save this file, make sure the line marked with the red comment is kept in a single line. Some editors will try to reformat it. Thats why I suggest just use plain old Notepad for this...


4. Upload both files to GP/axiom files  or anywhere else in the net.
you will then get two links.. we'll call them:
           htttp://my-host/link-to-mydata.xml
           htttp://my-host/link-to-mytransform.xsl

whatever are your links, just replace accordingly...

5. Create a new page in your GP portal. For simplicity, I assume you will create a new page, but you can add the box pretty much anywhere. If you dont, you can skip this step.

6. Add a XML/XSLT Box  to your page
Once you have added this box, fill in the links you obtained in the previous step..

7. Optional- Right side content display:
Add a HTML Content box to the page, and include the following code (Thanks Ransim!)

<script type="text/javascript">
$(document).ready(function() {
    $('.LeftContentZone a').click(function(){
                                 
        var toLoad = $(this).attr('href')+' td.MessageBodyCell1:first';
        $('#content').show('fast',loadContent);
        function loadContent() {
            $('#content').load(toLoad,'')
        }
        return false;
       
    });

});   
</script>

<div id="content">
Stuff to replace here
</div>

This will give you a dynamic categorized list in the left that you can populate anyway you want, and a right side display content box that will take the links.
if the links are 'internal' to guildportal, for example, forums, it will display them in that box; if they are 'external', it will display them in a new browser page/tab.


Hope somebody finds this useful!!!
Cheers,
Ice

Edit/ P.S:  Two very easy to use and free XML editors you can use:
- Microsoft's XML Notepad:   http://www.microsoft.com/downloads/details.aspx?familyid=72d6aa49-787d-4118-ba5f-4f30fe913628

- XML Marker 1.1: http://www.download.com/XML-Marker/3000-7241_4-10202365.html


TopBottom

Kaysi (Guild Admin) 12/18/2008 10:24 AM EST : RE: An Updated Links Library/Category manager via XML

Kaysi
Posts: 445
Fingers of Fury!

Oh wow! Thank you very much!
Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
TopBottom

IceHeart. (Guild Admin) 12/20/2008 3:23 AM EST : RE: An Updated Links Library/Category manager via XML
IceHeart.
Posts: 110
Posts With Wolves

Extra tweak: Have a Categorized Image Gallery to a facebox

You can use the code as above to have a static Image gallery such as it is, by doing the right side content box.

If, instead, you want to simply link to a facebox for your images, then do the following:

1. Follow steps 1-3 in the original Post.

2. Change the XSLT template as follows:


In the XSLT template, that we are calling "MyLinksTransform.xsl" , go to the line 81-ish, find the code below:

...
        <xsl:attribute name="target">
          <xsl:value-of select="'_blank'"/>
        </xsl:attribute>

        <xsl:value-of select="@name"/>
...

and ADD the following three lines highlighted in red, so the code now looks as:

...
        <xsl:attribute name="target">
          <xsl:value-of select="'_blank'"/>
        </xsl:attribute>
        <xsl:attribute name="rel">
          <xsl:value-of select="'facebox'"/>
        </xsl:attribute>

        <xsl:value-of select="@name"/>

...


Note the double quote-single quotes around the facebox word....

3. Follow the rest of the instructions, and skip Step 7

Bingo.. you now have a Categorized Gallery list that pops out to a facebox on each link.

Enjoy!!
TopBottom

IceHeart. (Guild Admin) 12/20/2008 3:59 AM EST : RE: An Updated Links Library/Category manager via XML
IceHeart.
Posts: 110
Posts With Wolves

Aw shucks..  I was about to test this in my free test site, but it appears the XML/XSLT content type is not available for free sites..

I'll try to work an update so it can be used in a free site as well

Meantime, hope this is useful for the rest..
TopBottom

Mottie (MVP) 12/20/2008 5:59 AM EST : RE: An Updated Links Library/Category manager via XML
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Wow, nice work you've done here IceHeart!!

I was thinking about an easier way for you to adapt this to work on free sites... I don't know if you know about jQuery, but I found a nice plugin called "accordian" that opens the menus in a similar way. Maybe it will help you?

I've uploaded it to my GP account, and you are welcome to use it:


Also, you know more about XSLT than I do, have you been able to get the XSL Content box in the XML/XSL Transformation Editor to work? 
TopBottom

IceHeart. (Guild Admin) 12/20/2008 2:54 PM EST : RE: An Updated Links Library/Category manager via XML
IceHeart.
Posts: 110
Posts With Wolves

Sweet!  Thanks Mottie.
I'd like to think that even thou rusty, I 'm still dangerous enough around  JavaScript, but I confess I'm entirely new to JQuery, so I'll poke around and get something going.
I'll update this using that plugin. This might come in handy for another project I have up my sleeve (An updated image gallery .. kinda mixing 3 things.. this drop down style "library", a tweaked version of 'your' mini player, and  Ransim's rightside box.. Stay tuned for that one in a couple days. )
_____

The major problem I'm finding in trying to adapt this to work for free sites, and the original reason why I went the XML/XSLT way, is the Single origin rule, and the fact that the GP site vs the Axiom Filestore trigger that rule. (Rather dumb that they do, imho, by the way). So you cannot have code from one site/page accessing data from another, (and I don't know enough to, nor do I want to go hacks way).

Either A- you rebuild everything in an IFrame, and still will miss functionality, as the iframe cannot modify the parent page, and some functionality will not work correctly, e.g, facebox among others.. or B- you find a way to store everything within the GP domain.. (typically forums) or C- you have the Server access those 3rd party links and do the work for you ,  hence, use the XML/XSLT box.

I thought about using the forums as a 'storage medium', for more 'technical' data, in much the same way it's been done for other content.  But it felt 'cleaner' to do it via the XML way 1st.,  and I was fearing the mix of forum-html vs true content would be a headache, but it may still work. If you (or anybody else) has any other suggestions, they are most welcome.

_____

The XSL Content window in the XML/XSLT Editor box does work -occasionally-, but I have tried only extremely simple conversions there. It's far easier for me to edit outside when the template gets larger.  Once I go back and paste more complex stuff, it goes bonkers.
I believe the problem is more one of how the editor formats/saves that content than anything else, but I have really not put myself to track it. I'll take a look later and see if I can find something a little more detailed.

Cheers,
Ice
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%