Nibble

New Package - Related Links

A feature you often see on sites is a list of related links, sometimes all external, sometimes mixed with internal links.

relatedLinks1

relatedLinks3

By default umbrao doesn’t have a dedicated related links datatype, you could use the richtexteditor to manage an unordered list, or maybe even have the links as child documents. But I found a custom ‘related links’ datatype would be a better way in doing this.

So here it is ….

After installing and adding the new datatype to a documenttype, it will render like this:

relatedlinks4

 

First a listbox with the option to move an item up and down and to delete an item (first select the item and then hit the button).

Next is the link title with an new window checkbox next to it (checked by default)

Underneath that you can view the different url types.

  • External Url
  • Internal Url (node number)
  • Internal Url (content picker)

External url is basicly for every link that isn’t a link to a content node. Just type in the url and hit add.

Internal Url (node number) you can use in case you know the node number of the content page you want to link to. Fill in node number and hit add.

Internal Url (content picker)

Fill 1 one of those 3 and hit the corresponding add button to add the link to the list.

After hitting the save button the links will be saved as xml.

<links>
<link type=”external” title=”google” link=”http://google.com” newwindow=”1″ />
</links>

To display the links on your template you’ll create a new xslt (with macro).

Example of an xslt that will render the related links (alias of the related links property in this example is ‘link’):

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE xsl:Stylesheet [ &lt;!ENTITY nbsp “&#x00A0;”> ]>
<xsl:stylesheet 
    version=”1.0″ 
    xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” 
    xmlns:msxml=”urn:schemas-microsoft-com:xslt”
    xmlns:umbraco.library=”urn:umbraco.library”
        xmlns:relatedLinks.library=”urn:relatedLinks.library”
    exclude-result-prefixes=”msxml umbraco.library relatedLinks.library”>
 
 
<xsl:output method=”xml” omit-xml-declaration=”yes”/>
 
<xsl:param name=”currentPage”/>
 
<xsl:template match=”/”>
<ul>
<xsl:for-each select=”relatedLinks.library:getRelatedLinks($currentPage/data [@alias = ‘link’])/links/link”>
<li>
<xsl:value-of select=”./@newwindow”/>
<a href=”{./@link}”>
<xsl:if test=”./@newwindow = ‘1′”>
<xsl:attribute name=”target”>_blank</xsl:attribute>
</xsl:if>
<xsl:choose>
  <xsl:when test=”./@type = ‘external’”>
    <xsl:attribute name=”href”><xsl:value-of select=”./@link”/></xsl:attribute>
  </xsl:when>
  <xsl:otherwise>
    <xsl:attribute name=”href”><xsl:value-of select=”umbraco.library:NiceUrl(./@link)”/></xsl:attribute>
  </xsl:otherwise>
</xsl:choose>
<xsl:value-of select=”./@title”/>
</a>
</li>
 
 
</xsl:for-each>
</ul>
 
</xsl:template>
 
</xsl:stylesheet>

Xslt as text: download

The package was made for v3, but it should also work on v4 (if the db is sql server).

Related links package: download

Thanks to Dieter De Paepe (my summer intern), who did a great job putting this idea into practise.

29 Comments so far

  1. Hartvig on October 14th, 2008

    Cool stuff. A couple of comments:
    1) I’d remove the node id text field, so you only have one way of adding internal links (that would make the UI self explaining instead of having two ways of entering internal links)
    2) Wouldn’t it be possible to save them on the data element itself by overriding the toXml method on the IData class? That way you wouldn’t need a db lookup, but have the xml directly inside the data element like this:

    That would make it a *very* neat control (in fact I’d love to see it in the core).

    Keep it up!

    /n

  2. Warren Buckley on October 14th, 2008

    This looks a great package Tim - one get it submitted to the repository and two make it part of the core as a default dataType that Umbraco ships with.

    Warren

  3. Ruben Verborgh on October 14th, 2008

    Cool Tim!

    Regarding v4: I’ll post instructions soon on how to make packages compatible with version 3/4 and every database. Only minor changes are required.

    Ruben

  4. Morten Bock on October 14th, 2008

    Maybe also add a media picker?

    Often you want to link to “Related Documents” in form of PDF’s or similar.

    Is the relation one way, or does it go both ways?

  5. Jesper ordrup on October 14th, 2008

    .. I wish this one were available 10 days ago :-)

    Great work, Tim.

    Thanx
    Jesper

    ps…. I &/%€/& captcha :-)

  6. Petr Snobelt on October 14th, 2008

    Hi Tim,
    thanks for nice package. I also recommend override toXML. And I’m interested how to use pagepicker in own controls. Is it possible to view sources?

    Petr

  7. Mizan on October 14th, 2008

    Tim,

    Thanks for providing the package - I originally requested this.

    I have a problem - it installs but the datatype does not appear. Please help (again).

  8. Mizan on October 15th, 2008

    Tim,

    Ignore the last post - somehow it appeared but don’t know how. Thanks.

    Another question, if I want to import list of previously stored related links, which field do target using a usercontrol? Each node/page has about 3 to 4 related links. I previously used an import tool built using usercontrol from an example in Umbraco forum to import content.

  9. Tim Geyssens on October 15th, 2008

    Hi Mizan, when importing, just make sure you stick to the xml format described in the post.

  10. Darren Ferguson on October 15th, 2008

    Hi Tim,

    Cool stuff.

    My suggestion: Have the control be smart enough to automatically remove links to internal nodes that no longer exist. The problem that I’ve had with related links before is that they become a maintenance nightmare. I guess you could check in the XSLT to see whether a node existed….

    Also, second Niels’ suggestion. Only 1 way to pick an internal node.

    Darren

    PS: Mollom iq quite annoying!

  11. Kenneth Solberg on October 15th, 2008

    Very nice Tim!

  12. Mizan on October 15th, 2008

    Tim,

    Thanks for the reply.

    Have I have this right?

    My related link property is named rhRelatedLinks and I am entering 3 related items. So the property would set to (programmatically):

    rhRelatedLinks = without the …

    You have been so helpful - many thanks

  13. Dan on October 24th, 2008

    This is just what i need! Thanks! I second the comment above that all it needs is a media picker as well. This would make it really useful. Any chance this could be added?

    Thanks

    Dan

  14. Ismail Mayat on October 28th, 2008

    Tim,

    When you add link but don’t give title the link is not added but you are not warned that you need to add title.

    This is one killer package nice work mate.

    Ismail

  15. Remco on November 12th, 2008

    Hi!

    I was wondering if there’s any source of this? I want to build my own custom datatype, but I can’t find any tutorials on it. The thing is, it will look like this datatype. Can you help me with this?

  16. Tim Geyssens on November 12th, 2008

    @Remco, I mailed you the source. You can also find the source for this datatype at codeplex (since it’s been added as a default datatype to umbraco)

  17. Dan on November 24th, 2008

    Would it be possible to get the source for this? I’d like to amend it so that:

    1. Media items can be chosen as the link;
    2. You can chose if the link is a text link or an image link.

    Many thanks

    Dan

  18. Biagio on November 28th, 2008

    Are Related Links saved into Db? where and how?

    Bye

  19. a on May 12th, 2009

    a

  20. edwin on July 9th, 2010

    Hi everyone, can I pass the alias ‘link’ in a parameter from the macro?

  21. ashok on August 9th, 2011

    how to add this “New Package - Related Links” to our umbraco.
    It would be great if i get the steps to install thuis control

  22. Delaware on August 31st, 2011

    Thanks for this interesting article. I’ve book marked this page because I hope you write more articles soon, I will definataly share this.

  23. cxxcvxc on December 2nd, 2011

    vxvcxv

  24. hetal on December 17th, 2011

    hey, there is remove link button.

    But can we have edit title/edit link button? It will be better as one can change Link title easily when needed as link is not changing just title is changing.

    Otherwise we have to delete whole link, create new link and shift it to proper position using up-down buttons.

  25. Lewes on February 8th, 2012

    Thanks for this interesting article. I have book marked this page because I really hope you post more articles soon, I will definataly share this.

  26. Dan on April 23rd, 2012

    great article thanks for the help! http://www.rank-1.co.uk is my site if people what to take a look.

  27. omeprazole on April 26th, 2014

    Cigarette smoking - Cigarette smoking may aggravate heartburn in some folks.
    Take this medication by mouth at least 1 hour before a meal, usually once daily or as directed by your doctor.
    A qualified golfer is equipped with particular equipments that are needed to play the game.

  28. Lelia on April 28th, 2014

    This piece of writing is truly a fastidious one it assists new the web viewers, who are wishing for blogging.

  29. crea tu marca personal Online on October 17th, 2015

    De ahí que ees prdciso aprender a gestionar la confianza y eel
    valor que proporciona la Mara Personal.

Leave a Reply