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 1360 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 4026 posts 15836 karma points MVP 13x 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 2675 karma points MVP 4x 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 421 posts 1038 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 4026 posts 15836 karma points MVP 13x 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 863 posts 3849 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).

Please Sign in or register to post replies

Write your reply to:

Draft