Copied to clipboard

Flag this post as spam?

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


  • Steve 472 posts 1216 karma points
    Apr 03, 2015 @ 14:29
    Steve
    0

    Umbraco Item Tag in Razor Script?

    I am using a Razor to render a macro with multiple <umbraco:Items>. Is this not allowed? What would be the proper way to do this? Here is my code:

    @inherits umbraco.MacroEngines.DynamicNodeContext
    
        @{
            var page = Model.AncestorOrSelf("PresidentsHomePage");
    
            <div id="featureBoxWrap">
                <div class="featureBox">
            @if(page.HasValue("featureBox1Image")){
                    <div class="featureImage">
                    <umbraco:Item field="featureBox1Image" insertTextBefore="&lt;img src=&quot;" insertTextAfter="&quot; width=&quot;192&quot; /&gt;" runat="server" />
                    </div>
            }
            @if(page.HasValue("featureBox1Content")){
                <div class="featureContent">
                    <umbraco:Item field="featureBox1Content" runat="server" />
                    </div>
                    }   
                </div>
    
                    <div class="featureBox">
            @if(page.HasValue("featureBox2Image")){
                    <div class="featureImage">
                    <umbraco:Item field="featureBox2Image" insertTextBefore="&lt;img src=&quot;" insertTextAfter="&quot; width=&quot;192&quot; /&gt;" runat="server" />
                    </div>
            }
            @if(page.HasValue("featureBox2Content")){
                <div class="featureContent">
                    <umbraco:Item field="featureBox2Content" runat="server" />
                    </div>
                    }   
                </div>
    
                    <div class="featureBox">
            @if(page.HasValue("featureBox3Image")){
                    <div class="featureImage">
                    <umbraco:Item field="featureBox3Image" insertTextBefore="&lt;img src=&quot;" insertTextAfter="&quot; width=&quot;192&quot; /&gt;" runat="server" />
                    </div>
            }
            @if(page.HasValue("featureBox3Content")){
                <div class="featureContent">
                    <umbraco:Item field="featureBox3Content" runat="server" />
                    </div>
                    }   
                </div>
    
    
        </div>            
    
    }
    
  • Jan Skovgaard 11258 posts 23500 karma points MVP 7x admin c-trib
    Apr 03, 2015 @ 14:51
    Jan Skovgaard
    0

    Hi Steve

    No that combination is not allowed. It does not make any sense to combine those and as you have discovered it won't work :) Instead you should use proper razor syntax to fetch the values that you're trying to get by using umbraco:item (Which is an old syntax btw - In v7 it's @Umbraco.Field()).

    So before making an example for you I would like to know if you just need to render the chosen images for each feature box?

    Then you should be using the "TypedMedia" helper like @Umbraco.TypedMedia(page.GetPropertyValue("featureBox1Image")) - Then you can render the image into an image tag for each box. So something like this should do the trick.

    @{
    var imageBox1 = @Umbraco.TypedMedia(page.GetPropertyValue("featureBox1Image"))
    }
    
    <img src="@imageBox1.UmbracoFile" />
    

    I hope this helps.

    /Jan

  • Steve 472 posts 1216 karma points
    Apr 03, 2015 @ 14:55
    Steve
    0

    I have 3 feature boxes each with an image and content field and I am using Umbraco 6.1.6

  • Dennis Aaen 4457 posts 17970 karma points admin hq c-trib
    Apr 03, 2015 @ 14:59
    Dennis Aaen
    100

    Hi Steve,

    Since you are using the old dynamicNode Razor script, and I assume that you are using a media picker to choose the image. Then there is several options on how to get the image from the media picker.

     @{
        if (Model.HasValue("featureBox1Image")){                                   
          //option 1                             
          <img src="@Model.Media("featureBox1Image","umbracoFile")" width="@Model.Media("featureBox1Image","umbracoWidth")" height="@Model.Media("featureBox1Image","umbracoHeight")" />
          //option 2
          var selectedMedia2 = @Model.Media("featureBox1Image");
          <img src="@selectedMedia2.umbracoFile" width="@selectedMedia2.umbracoWidth" height="@selectedMedia2.umbracoHeight" alt="@selectedMedia2.Name"/>
          //option 3        
          var selectedMedia3 = @Library.MediaById(Model.featureBox1Image);
          <img src="@selectedMedia3.umbracoFile" width="@selectedMedia3.umbracoWidth" height="@selectedMedia3.umbracoHeight" alt="@selectedMedia3.Name"/>                     
        }
      }

    For the documentation take a look here: https://our.umbraco.org/documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors/Media-Picker#RazorMacro%28DynamicNode&DynamicMedia%29Example

    Hope this helps,

    /Dennis

  • Jan Skovgaard 11258 posts 23500 karma points MVP 7x admin c-trib
    Apr 03, 2015 @ 15:00
    Jan Skovgaard
    0

    Hi Steve

    Ok, but then the approach I mentioned above should be possible to do. You just need to make 3 variables for getting the images.

    Hope this helps.

    /Jan

  • Steve 472 posts 1216 karma points
    Apr 03, 2015 @ 15:17
    Steve
    0

    Dennis, what would the syntax look like for using imageGen on the <img> tags?

    <div class="featureBox">
            @if(page.HasValue("featureBox1Image")){
                var imageBox1 = @Model.Media("featureBox1Image");
                    <div class="featureImage">
                    <img src="@imageBox1.umbracoFile" width="100px"/>
                    </div>
            }
            @if(page.HasValue("featureBox1Content")){
                <div class="featureContent">
                    @page.featureBox1Content
                    </div>
                    }   
                </div>
  • Dennis Aaen 4457 posts 17970 karma points admin hq c-trib
    Apr 03, 2015 @ 15:25
    Dennis Aaen
    0

    Hi Steve,

    I think that you should be able to do something like this then.

    <div class="featureBox">
            @if(page.HasValue("featureBox1Image")){
                var imageBox1 = page.Media("featureBox1Image");
                    <div class="featureImage">
                    <img src="/[email protected]&amp;width=100px"/>
                    </div>
            }
            @if(page.HasValue("featureBox1Content")){
                <div class="featureContent">
                    @page.featureBox1Content
                    </div>
             }
    </div>        

    Hope this helps,

    /Dennis

  • Steve 472 posts 1216 karma points
    Apr 03, 2015 @ 15:36
    Steve
    0

    Dennis, for some reason it's not using the width.

  • Steve 472 posts 1216 karma points
    Apr 03, 2015 @ 15:38
    Steve
    1

    Got it :

    <img src="/[email protected]&width=100" />

  • Dennis Aaen 4457 posts 17970 karma points admin hq c-trib
    Apr 03, 2015 @ 15:38
    Dennis Aaen
    0

    Hi Seve,

    Okay perhaps you just can do this then.

    <div class="featureBox">
            @if(page.HasValue("featureBox1Image")){
                var imageBox1 = page.Media("featureBox1Image");
                    <div class="featureImage">
                    <img src="/[email protected]" width="100px"/>
                    </div>
            }
            @if(page.HasValue("featureBox1Content")){
                <div class="featureContent">
                    @page.featureBox1Content
                    </div>
             }
    </div> 

    Hope this helps,

    /Dennis

  • Dennis Aaen 4457 posts 17970 karma points admin hq c-trib
    Apr 03, 2015 @ 15:43
    Dennis Aaen
    0

    Hi Steve,

    Great that you got it to work. Happy that I could help you in the right direction. - Please remember to mark the question as solve, so other people can go directly to the solution that works for you.

    /Dennis

  • Steve 472 posts 1216 karma points
    Apr 03, 2015 @ 15:59
    Steve
    0

    What's wrong with my syntax on this if statement?

    if(page.featureBox1Content != "" && page.featureBox2Content != "" && page.featureBox3Content != ""){
  • Dennis Aaen 4457 posts 17970 karma points admin hq c-trib
    Apr 03, 2015 @ 16:06
    Dennis Aaen
    1

    Hi Steve,

    You can use the .HasValue to check if the field isn't empty.

    Try this

    if(page.HasValue("featureBox1Content") && page.HasValue("featureBox2Content") && page.HasValue("featureBox3Content")){ 

    }

    Hope this helps,

    /Dennis

  • Steve 472 posts 1216 karma points
    Apr 03, 2015 @ 16:08
    Steve
    0

    Doesn't that just check to see if the property exists?

    When I used that for the individual featureBox sections it renders even if there is nothing in the field.

  • Steve 472 posts 1216 karma points
    Apr 03, 2015 @ 16:15
    Steve
    0

    Sorry Dennis, you are correct. Thanks again for all your help!!

  • Dennis Aaen 4457 posts 17970 karma points admin hq c-trib
    Apr 03, 2015 @ 16:19
    Dennis Aaen
    0

    Hi Steve.

    The HasValue should check if the property contains a value. And HasProperty checks if the property exsist on the page.

    But perhaps you could try something like this too.

    if (!String.IsNullOrEmpty(page.featureBox1Content)) { 

    }

    Hope this helps,

    /Dennis 

  • 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