Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Peter Duncanson 430 posts 1358 karma points c-trib
    Jun 03, 2011 @ 17:50
    Peter Duncanson
    0

    Custom icon based on content in the page?

    I've got a need to show some additional information "at a glance" that I'd like to do by showing different icons in the content tree (think of twibbons on twitter).

    I'm assuming the backend does this for unpublished items, is there anyway to do your own customer icon mods on the fly based on the actual data in a content item? An example would be to show if a product in the back end was flagged as "not on sale".

    Ideas, solutions or thoughts please :)

  • Lee Kelleher 3945 posts 15163 karma points MVP 10x admin c-trib
    Jun 03, 2011 @ 17:56
    Lee Kelleher
    1

    Hi Peter,

    Sounds similar to the Icon Picker package... with a twist of intelligence!

    ... or grab the source from Matt's Media Icons package and adapt accordingly.

    Cheers, Lee.

  • Tim 1193 posts 2655 karma points c-trib
    Jun 03, 2011 @ 18:06
    Tim
    0

    Like Lee says, the code from Matt's mediaicons should show you how to do it from a code point of view.

    The only issue that I can see would be that to check what's in the page, you'd have to load the Document to check, which could be quite slow, if the document has a LOT of properties, or the content tree has 100's+ of nodes in it. That said, I've done similar for fairly large sites, and the performance hit hasn't actually been all that bad.

    :)

  • Peter Cort Larsen 388 posts 922 karma points
    Oct 04, 2012 @ 10:53
    Peter Cort Larsen
    0

    Hi,

    Based on the code from Matt's mediaicons,  i can get icons based on nodeName.

    Offcourse it requires some icons and an idea of what the nodenames will be. My situation was sports, so its easy to predict the names. Could be extended with a call to Bing translatyion, if your site have multiple languages.

    Here is the new version of Matt's Appbase.cs: 

    In the  line containing this :nodeItem.ContentType.Alias == "SportAndActivityPage" || nodeItem.ContentType.Alias == "CategoryPage"
     , you can specify which bode types to filter on.

    using System;
    using System.IO;
    using umbraco.BusinessLogic;
    using umbraco.cms.businesslogic.media;
    using umbraco.cms.presentation.Trees;
    using umbraco.IO;
    using umbraco;
    using umbraco.cms.businesslogic.web;
    using umbraco.NodeFactory;
    using System.Net;
    using umbraco.cms.businesslogic.language;

    namespace TheOutfield.UmbExt.MediaIcons.Logic
    {
    public class AppBase : ApplicationBase
    {
    public AppBase()
    {
    BaseTree.BeforeNodeRender += BaseTree_BeforeNodeRender;
    }

    protected void BaseTree_BeforeNodeRender(ref XmlTree sender, ref XmlTreeNode node, EventArgs e)
    {
    var ext = "";
    var nodeFileProp = "";


    if (node.NodeType == "media")
    {

    var mediaItem = new Media(Convert.ToInt32(node.NodeID));
    if (mediaItem.ContentType.Alias != "Folder")
    {
    var mediaFileProp = mediaItem.getProperty("umbracoFile");
    if (mediaFileProp != null)
    {
    var mediaFile = mediaFileProp.Value.ToString();
    if (!string.IsNullOrEmpty(mediaFile) && mediaFile.LastIndexOf(".") < mediaFile.Length)
    {
    ext = mediaFile.Substring(mediaFile.ToLower().LastIndexOf(".") + 1);
    }
    }
    }
    if (!string.IsNullOrEmpty(ext))
    {
    var iconUrl = string.Format("/umbraco/images/umbraco/{0}.gif", ext);
    if (File.Exists(IOHelper.MapPath(iconUrl)))
    {
    node.Icon = ext + ".gif";

    }
    }
    }
    if (node.NodeType == "content")
    {
    Document nodeItem = new Document(Convert.ToInt32(node.NodeID));
    if (nodeItem.ContentType.Alias != "Folder")
    {


    if (nodeItem.ContentType.Alias == "SportAndActivityPage" || nodeItem.ContentType.Alias == "CategoryPage")
    {
    nodeFileProp = nodeItem.Text;

    if (nodeFileProp != null)
    {

    //Find icon that match text
    string iconPath = IOHelper.MapPath("/umbraco/images/umbraco");
    string[] dirs = Directory.GetFiles(iconPath, "*");
    if (dirs.Length > 0)
    {
    foreach (string dir in dirs)
    {
    string filename = System.IO.Path.GetFileNameWithoutExtension(dir).ToLower();
    string lowerCasenodeFileProp = nodeFileProp.ToLower();

    if (lowerCasenodeFileProp.Contains(filename))
    {
    ext = filename;
    }
    }
    }

    if (!string.IsNullOrEmpty(ext))
    {
    var iconUrl = string.Format("/umbraco/images/umbraco/{0}.gif", ext);
    if (File.Exists(IOHelper.MapPath(iconUrl)))
    {
    node.Icon = ext + ".gif";
    }
    }
    }
    }
    }

    }
    }
    }
    }
  • Lee Kelleher 3945 posts 15163 karma points MVP 10x admin c-trib
    Oct 04, 2012 @ 11:00
    Lee Kelleher
    0

    Looks good Peter.

    Alternative option is a package we recently developed called Page State Icons - which can add a small overlay icon to the node's icon. Uses XPath against the node.

    Currently only does overlay icons, but could be modified to replace the entire image/icon.

    Cheers, Lee.

  • Hendy Racher 861 posts 3844 karma points MVP 2x admin c-trib
    Oct 04, 2012 @ 11:46
    Hendy Racher
    0

    Hi, on a related note thought it might be worth mentioning the Auto Icons package as a quick way of setting the default icons for document / media types based on their aliases (it's a file naming convention - similar to the above, over back office configuration).

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies