Copied to clipboard

Flag this post as spam?

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


  • Ben Marte 13 posts 34 karma points
    Jul 23, 2014 @ 16:59
    Ben Marte
    0

    Conditional html rendering

    I'm a new umbraco user and I'm trying to display HTML based on node Ids  it currently works but I want to render some of these if they are a child of a specific node as well.

    I know there's a IsAncestorOrSelf helper which I've tried to use but it keeps giving me errors.

    Here's the code that I have working so far.

    @if(Model.Id == 1052){
    <h1>
    <a title="KnowHow" href="index.html">
    <img alt="KnowHow" src="knowhow/images/fielding-systems.png">
    </a>
    </h1>
    }
    @if(Model.Id == 1053){
    <h1>
    <a title="KnowHow" href="index.html">
    <img alt="KnowHow" src="knowhow/images/scada-visor.png">
    </a>
    </h1>
    }
    @if(Model.Id == 1054){
    <h1>
    <a title="KnowHow" href="index.html">
    <img alt="KnowHow" src="knowhow/images/field-visor.png">
    </a>
    </h1>
    }

    I want to check if the currentpage is an ancestor or is the page itself in order to display the html code, if that makes sense.

    Thanks.

  • Dan Lister 416 posts 1973 karma points c-trib
    Jul 23, 2014 @ 18:10
    Dan Lister
    0

    Hi Benjamin,

    I would personally avoid using IDs within your view logic. You can not guarantee the IDs will be the same on different environments. I'd suggest adding a new property to your parent page document type to select an image to display:

    var parentOrSelf = Model.Content.AncestorOrSelf("docTypeAlias");
    if (parentOrSelf != null)
    {
        var image = Umbraco.TypedMedia(parentOrSelf.GetPropertyValue<int>("imageAlias"));
        if (image != null)
        {
            <img src="@image.Url" />
        }
    }
    

    But to answer your question, you could do something as follows assuming you want to look at nodes directly underneath the current home page:

    var parentOrSelf = Model.Content.AncestorOrSelf(2);
    if (parentOrSelf != null)
    {
        if (parentOrSelf.Id.Equals(1052))
        {
            <img src="knowhow/images/fielding-systems.png" />
        }
        else if (parentOrSelf.Id.Equals(1053))
        {
            <img src="knowhow/images/scada-visor.png" />
        }
        else if (parentOrSelf.Id.Equals(1054))
        {
            <img src="knowhow/images/field-visor.png" />
        }
    }
    

    Thanks, Dan.

  • Stephen 94 posts 254 karma points
    Jul 24, 2014 @ 03:53
    Stephen
    0

    Hi Benjamin,

    If you are going down that route I would use:

    var parentOrSelf =Model.Content.AncestorOrSelf(2);
    if(!String.IsNullOrEmpty(parentOrSelf.Id.ToString()))
    {
    switch (parentOrSelf.Id.ToString()) {
    case "1052":
    <img src="/forum/umbraco-7/using-umbraco-7/knowhow/images/fielding-systems.png" alt="" />
    break;
    case ....
    }

    But I am not sure what you are actually trying to do.  I can't see any reason why you would code this.  I would also add it to the document type, and pull it from there.

    Code along the lines of 

    <img src='@Umbraco.Field("imageFieldName")' />

    This can easilly be done using the "insert umbraco page field" at t top right of the editor. This is likely to be plenty in your template. I am of couse assouming your are using MVC in umbraco 7.

    Let us know if you are trying to do somethign different to this, or if you need more info.

    Thanks Stephen

  • Ben Marte 13 posts 34 karma points
    Jul 24, 2014 @ 05:42
    Ben Marte
    0

    First of all thanks both of you for trying to help and answering my questions, I really appreciate it.

    I'm trying to make a website that will have 3 different product sections and I would like to display a different logo in the template based on the section they are in.

    I am putting this code in a scripting file which created a macro as well so I'm not sure if I need to put this in a xlst file, I'm still tryinig to understand all the terminologies and how things work in Umbraco so it's most definitely me either doing something wrong or not understanding things.

    I just want to know if the node id is the specified id or if a document is a child of either of these ids so it knows it's in one of these sections and it displays the correct logo.

    If I use a custom property in the document type I would have to set it for each document I create and change it manually for each so it knows which logo to display (at least  thats how I understand it, which can be totally wrong) I have a lot of learning to do so thanks for your patience and taking the time to respond to my questions as dumb as they may be.

  • Stephen 94 posts 254 karma points
    Jul 25, 2014 @ 07:37
    Stephen
    0

    Hi Benjamin,

    The code provided should do that for you. The number in "AncestorOrSelf(2)" depends where you need to start from in the tree, with the home page usually being 1, next level 2 and so on.  So I am guessing no changes required for your code.

    Looking at the code you have provided it looks like you are doing this is a razor script, personally I would have just coded it straight into the template, but that will require slightly differnt code (@CurrentPage). Let me know if you need further advice on this.

    The alternate method, with be just to create 3 templates relating to the page type and hard code the image.  Then you just need to be correct template is picked for each page.  You may be able to nest this, but at 6:30am my brain just isn't in gear yet to make suggestions on how.

    Hope you get your solution to work, let us know how you get on.

    Thanks

    Stephen

  • Allan Molsen Larsen 22 posts 192 karma points
    Jul 25, 2014 @ 10:47
    Allan Molsen Larsen
    1

    Hi Ben

    I would also avoid using IDs in the code due to maintability.

    If I understand you correctly you have probably two document types for your product handling.

    • product section document type (I'll refer to this as productSection)
    • product document type (I'll refer to this as product)

    In your content you have something like:

    -root
        -pageX (of some document type)
        -pageY (of some document type)
        -product group 1 (of type productSection)
           -product A (of type product
           -product B (of type product
           -product C (of type product
        -product group 2 (of type productSection)
           -product D (of type product
           -product E (of type product
           -product F (of type product
        -product group 3 (of type productSection)
           -product G (of type product
           -product H (of type product
           -product I (of type product
    

    If I understand you correctly you want an image depending on the productSection on the product page. The simplest way would be to add a property on the product section where you can select the image (lets call it productSectionImage).

    On the template page for the product you can get the value of an ancestor property like:

    <h1>
     <a title="KnowHow" href="index.html">
      <img alt="KnowHow" src="@Umbraco.Field("productSectionImage", recursive: true)">
     </a>
    </h1>
    

    If you use a Macro and scripting file you can get the value of an ancestor property like:

    <h1>
     <a title="KnowHow" href="index.html">
      <img alt="KnowHow" src="@Model._productSectionImage">
     </a>
    </h1>
    

    Note the underscore in @Model._productSectionImage

  • Stephen 94 posts 254 karma points
    Jul 25, 2014 @ 11:50
    Stephen
    0

    Good show Allan,

    I completely forgot that VERY simple solution.  I would go with that too.

    >> <imgalt="KnowHow"src="@Umbraco.Field("productSectionImage", recursive: true)">


  • Allan Molsen Larsen 22 posts 192 karma points
    Jul 25, 2014 @ 12:38
    Allan Molsen Larsen
    0

    My example before was based on "productSectionImage" being of property type "text" (a textbox)

    In your situation you want a media picker which returns an ID of the media.

    Then the template page example would be:

    <h1>
     <a title="KnowHow" href="index.html">
      <img alt="KnowHow" src="@Umbraco.Media(Umbraco.Field("productSectionImage", recursive: true).ToString()).Url">
     </a>
    </h1>
    

    And the Macro and scripting file (if inheriting from umbraco.MacroEngines.DynamicNodeContext) example would be:

    <h1>
     <a title="KnowHow" href="index.html">
      <img alt="KnowHow" src="@Library.MediaById(Model._productSectionImage).Url">
     </a>
    </h1>
    
  • Ben Marte 13 posts 34 karma points
    Jul 31, 2014 @ 16:19
    Ben Marte
    0

    Guys thank you all for the different examples, in the end due to my limited knowledge with Umbraco and deadlines I ended up making 3 templates since they also needed different search parameters.

    I do appreciate you guys answering my questions though and I will keep experimenting with umbraco and use this method to refactor what I did going forward, so thanks.

Please Sign in or register to post replies

Write your reply to:

Draft