Copied to clipboard

Flag this post as spam?

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


  • jonok 297 posts 658 karma points
    Sep 20, 2016 @ 06:18
    jonok
    0

    How to display an image from a media picker?

    I'm trying to display an image from a media picker. The code below is attempting to just display the image url as a string, but it returns the JSON for the media object (I think). How do I get the image url from this string using razor? And also how do I access any crops on the media object?

    <fo:block span="all">
        @if(Model.imagePropertyName != null) {
          @Model.Media("imagePropertyName", "umbracoFile")
        }
     </fo:block>
    

    Am I doing this the wrong way? Any help would be greatly appreciated.

  • Michaël Vanbrabandt 863 posts 3348 karma points c-trib
    Sep 20, 2016 @ 06:37
    Michaël Vanbrabandt
    0

    Hi jonok try this:

    @if(Model.imagePropertyName != null) {
           var _image = Umbraco.Media(Model.imagePropertyName);
    
          _image.GetPropertyValue("umbracoFile");
    }
    

    /Michaël

  • jonok 297 posts 658 karma points
    Sep 20, 2016 @ 07:08
    jonok
    0

    Hi Michaël, when I try that I get this error:

    The type or namespace name 'Media' does not exist in the namespace 'Umbraco' (are you missing an assembly reference?)

  • Michaël Vanbrabandt 863 posts 3348 karma points c-trib
    Sep 20, 2016 @ 07:10
    Michaël Vanbrabandt
    0

    Can you show me the full code of where you are calling this?

    /Michaël

  • jonok 297 posts 658 karma points
    Sep 20, 2016 @ 07:21
    jonok
    0

    It's from within the PDF Creator example razor file. I've modified the '[PDF] Razor Example' to display a media picker image. This is the razor code:

        <%@ Master Language="C#" MasterPageFile="~/masterpages/PDFMaster.master" AutoEventWireup="true" %>
        <asp:content ContentPlaceHolderId="PdfContentPlaceHolder" runat="server">
         <umbraco:Macro  runat="server" language="cshtml">
            @inherits umbraco.MacroEngines.DynamicNodeContext
            @using FergusonMoriyama.Pdf
            @using System.Xml
            @using umbraco.IO
    
            @{
              Response.ContentType = "text/xsl";
              Response.AppendHeader("X-Pdf-Render","true");
    
              // -- Uncomment this to force the browser to download the PDF.
              // Response.AppendHeader("X-Pdf-Force-Download","darren.pdf");
            }
    
            <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:ibex="http://www.xmlpdf.com/2003/ibex/Format">
               <!-- Sets standard PDF Metadata -->
              <ibex:properties
                title="@Model.Name"
                author="@Model.WriterName"
                subject=""
                keywords="metat,bacon,sheep"
                creator="PDF Creator for Umbraco" />
    
              <!-- Uncomment below to add protection to the PDF - optionally specify a password -->
              <!-- <ibex:security deny-print="true" deny-extract="true" deny-modify="true" user-password="" owner-password=""/> -->
    
              <!-- This defines a simple page layout with a heder and a footer -->
              <!-- See http://www.w3schools.com/xslfo/obj_layout-master-set.asp -->
              <fo:layout-master-set>
                <fo:simple-page-master master-name="master" page-width="210mm" page-height="297mm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
                  <fo:region-body margin-top="1.5cm" margin-bottom="1.5cm" column-count="2" column-gap="0.5cm"/>
                  <fo:region-before region-name="header" extent="3cm"/>
                  <fo:region-after region-name="footer" extent="1.5cm"/>
                </fo:simple-page-master>
              </fo:layout-master-set>
    
               <!-- Main content starts within page sequence -->
              <fo:page-sequence master-reference="master">
    
                <!-- Doucment header -->
                <fo:flow flow-name="header">
                  <fo:block>
                    <fo:inline font-family="Arial" font-size="23pt" color="#3399ff">
                      @Model.Name
                    </fo:inline>
                  </fo:block>
    
    <fo:block span="all">
        @if(Model.imagePropertyName != null) {
          @Model.Media("imagePropertyName", "umbracoFile")
        }
     </fo:block>
    
                </fo:flow>
    
                <!-- Doucment footer -->
                <fo:static-content flow-name="footer">
                  <fo:block font-size="8pt" color="#aaaaaa">
                    <fo:block text-align-last="justify">
                      @Model.Name by @Model.WriterName - @DateTime.Now
    
                      <fo:leader leader-pattern="space"/>
                      Page <fo:page-number/> of <fo:page-number-citation ref-id="last-page"/>
                    </fo:block>
                  </fo:block>
                </fo:static-content>
    
                <!-- Document Body -->
                <fo:flow flow-name="xsl-region-body">
                  <fo:block>
                     @ParseRichText(FoHelper.Instance.GetRichTextNodes(@Model.BodyText))
                  </fo:block>
    
                  <!-- Having this before the closing tag of the body flow allows us to have a pager in the footer -->
                  <fo:block id="last-page" keep-together.within-page="auto"></fo:block>
    
                </fo:flow>
    
              </fo:page-sequence>
    
            </fo:root>
    
            @helper ParseElement(XmlNode node) { 
              <!-- @node.Name -->
              switch(node.Name) 
              {
                case "p":
                  <fo:block margin-bottom="0.5cm">
                    @ParseRichText(node.ChildNodes)
                  </fo:block>
                  break;
                case "strong":
                  <fo:inline font-weight="bold">
                    @ParseRichText(node.ChildNodes)
                  </fo:inline>
                  break;
                case "em":
                  <fo:inline font-style="italic">
                    @ParseRichText(node.ChildNodes)
                  </fo:inline>
                  break;
                case "a":
                  <fo:basic-link color="blue" text-decoration="underline" external-destination="url('@node.Attributes["href"].Value')">
                    @ParseRichText(node.ChildNodes)
                  </fo:basic-link>
                  break;
                case "u":
                  <fo:inline text-decoration="underline">
                    @ParseRichText(node.ChildNodes)
                  </fo:inline>
                  break;
                case "ol":
                  <fo:list-block margin-bottom="0.5cm">
                    @ParseRichText(node.ChildNodes)
                  </fo:list-block>
                  break;
                case "ul":
                  <fo:list-block margin-bottom="0.5cm">
                    @ParseRichText(node.ChildNodes)
                  </fo:list-block>
                  break;
                case "li":
                  <fo:list-item>
                    <fo:list-item-label>
                      <fo:block>-</fo:block>
                    </fo:list-item-label>
                    <fo:list-item-body>
                      <fo:block margin-left="0.5cm">
                       @ParseRichText(node.ChildNodes)
                      </fo:block>
                    </fo:list-item-body>
                  </fo:list-item>
                  break;
                case "img":
                  var docRoot = IOHelper.MapPath("~/");
                  <fo:block>
                    <fo:external-graphic src="@docRoot/@node.Attributes["src"].Value" content-width="9cm"/>
                  </fo:block>
                  @ParseRichText(node.ChildNodes)
                  break;
              }
          }
    
          @helper ParseRichText(XmlNodeList nodes) {
            foreach(XmlNode node in nodes) {
    
               switch(node.NodeType)
               {
                   case XmlNodeType.Text:
                     @node.Value
                     @ParseRichText(node.ChildNodes);
                     break;
                   case XmlNodeType.Element:
                     @ParseElement(node);
                     break;
                   default:
                     @ParseRichText(node.ChildNodes);
                     break;
               }
            }
          }
          </umbraco:Macro>
    
        </asp:Content>
    
  • 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