Copied to clipboard
  • Mikkel Johansen 227 karma points
    Dec 29, 2011 @ 22:53
    Mikkel Johansen
    0

    Go from build-in "Media Picker" to DAMP

    I am running Umbraco v. 4.7.1

    On my site I am using the standard build-in "Media Picker" datatype.

    Is it possible to change the datatype on a property to a datatype using DAMP?

    If I do it right now it clears all the medias picked on the nodes.

    /Mikkel

  • Bjarne Fyrstenborg1882 karma points c-trib
    Dec 29, 2011 @ 23:16
    Bjarne Fyrstenborg
    1

    Hi Mikkel

    You can easily change the datatype on the property, but yes you would have to select the media nodes as DAMP create it's a xml node <Damp fullmedia=""> under the property alias node.
    Under the DAMP datatype settings I use Full media xml.. I'm not sure how it looks when using id instead.

    If you take a look in /App_Data/umbraco.config file and search for DAMP and you have change the datatype and published the node you will see something like:

    <productImage>
                  <DAMP fullMedia="">
                    <mediaItem>
                      <Image id="1163" version="6ef8e0f6-bcc8-4a10-806e-5b633f71d218" parentID="1161" level="3" writerID="0" nodeType="1032" template="0" sortOrder="1" createDate="2011-08-25T12:00:58" updateDate="2011-08-25T12:00:58" nodeName="Product A1" urlName="producta1" writerName="Admin" nodeTypeAlias="Image" path="-1,1160,1161,1163">
                        <umbracoFile>/media/1163/productimageA1.png</umbracoFile>
                        <umbracoWidth>338</umbracoWidth>
                        <umbracoHeight>338</umbracoHeight>
                        <umbracoBytes>122466</umbracoBytes>
                        <umbracoExtension>png</umbracoExtension>
                        <crops>
                          <crops date="23/10/2011 20:35:59">
                            <crop name="productSmallThumb" x="0" y="0" x2="338" y2="338" url="/media/1163/productimageA1_productSmallThumb.jpg" />
                            <crop name="productThumb" x="0" y="0" x2="338" y2="338" url="/media/1163/productimageA1_productThumb.jpg" />
                            <crop name="productMediumThumb" x="0" y="0" x2="338" y2="338" url="/media/1163/productimageA1_productMediumThumb.jpg" />
                          </crops>
                        </crops>
                      </Image>
                    </mediaItem>
                  </DAMP>
    </productImage>

    where productImage is the alias of my property using DAMP as datatype...

    in the xslt file I then get the image this way where I use the Image Cropper in media section:

    <xsl:for-each select="./productImage/DAMP/mediaItem/Image">   <img src="{./crops//crop [@name='productSmallThumb']/@url}" alt="{$productName}"/></a>
    </xsl:for-each>
    

    or you could get it this way:

    <xsl:for-each select="./productImage/DAMP/mediaItem/Image">   <img src="{concat('/ImageGen.ashx?Image=250',./umbracoFile)}" id="productImage" alt='{$productName}' title="{$productName}" width="250" />
    </xsl:for-each>
    

    Let me know if it works.. :)

    Bjarne

  • Mikkel Johansen227 karma points
    Dec 30, 2011 @ 00:59
    Mikkel Johansen
    0

    Thanks, DAMP is making it easy for both developers and editors :-)

    Right now my task is to implement DAMP on a site that has alot of nodes with Media Picker properties. And was hoping that I just could switch the datatype on these properties. I have tried with DAMP datatype using ID, but with no luck.

    /Mikkel

  • Bjarne Fyrstenborg1882 karma points c-trib
    Dec 30, 2011 @ 01:16
    Bjarne Fyrstenborg
    0

    Okay.. yes I have tried that too.. but I don't think it's possible as DAMP creates nodes in the xml-structure, where I think the media picker just use an media node id.

    But if you use full media xml in the settings for DAMP, modify the xslt for the image, change the datatype for the properties and then republish the entire site or the nodes which use these properties. Then I think it should work..

    Some are using multiple media pickers on their nodes to pick multiple images or pick a folder which contains the images.. but with DAMP you can easily pick multiple images from different folders.

    Bjarne

  • Jeroen Breuer9854 karma points admin mvp c-trib
    Dec 30, 2011 @ 20:06
    Jeroen Breuer
    0

    Hello,

    The default media picker of Umbraco can only store 1 media item and only the id so it's stored as an interger in the database. DAMP has the option to only select the id, but it can be multiple id's which will be stored in a csv format. This means it can't be stored as an interger, and needs to be stored as a nvarchar. If you change the int values in the database to the nvarchar field it should work. Here is a blog on someone who also tried this: http://www.proworks.com/blog/2011/03/29/fix-yet-another-media-picker-4-for-upgrade-from-umbraco-4-0-x-to-4-5-2/.

    Jeroen

  • Anthony Candaele2044 karma points
    Jan 01, 2012 @ 21:07
    Anthony Candaele
    0

    Hi Jeroen,

    Is there a way to get at the id property of the media item, in your example <Image id="1163" .... />


    I would have to get at this property to create a new DynamicMedia item in Razor:

    dynamic mediaItem = @item.Media("Here I should get the id property of the Image");

    Thanks for your advice,

    Anthony

  • Jeroen Breuer9854 karma points admin mvp c-trib
    Jan 02, 2012 @ 12:44
    Jeroen Breuer
    0

    Hi Anthony,

    It depends on which version of Umbraco you are using. If it's 4.7.1 I think you can do this:

    using umbraco.MacroEngines.Library;
    @Library.MediaById(id)

    There are multiple ways to do it. Read these blogs for more info:

    http://umbraco.com/follow-us/blog-archive/2011/2/24/umbraco-47-razor-feature-walkthrough-%E2%80%93-part-2

    http://umbraco.com/follow-us/blog-archive/2011/9/22/umbraco-razor-feature-walkthrough%E2%80%93part-8.aspx  

    Jeroen

  • Anthony Candaele2044 karma points
    Jan 02, 2012 @ 17:52
    Anthony Candaele
    0

    Hi Jeroen,

    Yeah, I already consulted that blogpost and tried this:

    @foreach (var in nodes)
                    {
                        dynamic file @n.Media("uBlogsyPostImage.mediaItem.NewsImage");                   
                        <li>
                            if(file.umbracoFile !="")
                            {
                            <img src="@file.umbracoFile" />
                            }
                            <strong><span>@n.GetProperty("uBlogsyPostDate").Value.FormatDateTimeOrdinal("d MMMM yyyy")</strong>
                            <href="@n.Url">
                            @n.GetProperty("uBlogsyContentTitle").Value
                            </a>
                           
                        </li>
                    }
                </ul>
            
        }

    but I get the following message:

    Error loading Razor Script uBlogsyListPosts.cshtml
    Cannot perform runtime binding on a null reference

    The xml in the the App_Data/umbraco.config file looks like this:

    <uBlogsyPostImage>

                  <DAMP fullMedia="">

                    <mediaItem>

                      <NewsImage id="1320" version="2f007d6f-a11f-4d20-bf77-c7cd5abf1221" parentID="1319" level="3" writerID="0" nodeType="1318" template="0" sortOrder="1" createDate="2011-12-26T15:49:48" updateDate="2011-12-26T15:49:48" nodeName="lungs-asthma" urlName="lungs-asthma" writerName="admin" nodeTypeAlias="NewsImage" path="-1,1064,1319,1320">

                        <umbracoFile>/media/8471/lungs-asthma.jpg</umbracoFile>

                        <umbracoWidth>118</umbracoWidth>

                        <umbracoHeight>125</umbracoHeight>

                        <umbracoBytes>4954</umbracoBytes>

                      </NewsImage>

                    </mediaItem>

                  </DAMP>

                </uBlogsyPostImage>

  • Jeroen Breuer9854 karma points admin mvp c-trib
    Jan 02, 2012 @ 17:57
    Jeroen Breuer
    1

    Since you're using the full media xml you don't need to do .Media on it. Something like this should work:

    var file = n.uBlogsyPostImage.mediaItem.NewsImage

    Than the rest of your code should work.

    Jeroen

  • Anthony Candaele2044 karma points
    Jan 02, 2012 @ 18:04
    Anthony Candaele
    0

    Just tried this but Razor don't want to save the .cshtml file, I get the following error:

    'umbraco.MacroEngines.DynamicNode' does not contain a definition for 'uBlogsyPostImage' and no extension method 'uBlogsyPostImage' accepting a first argument of type 'umbraco.MacroEngines.DynamicNode' could be found (are you missing a using directive or an assembly reference?)

  • Jeroen Breuer9854 karma points admin mvp c-trib
    Jan 02, 2012 @ 18:06
    Jeroen Breuer
    0

    You do this:

    @foreach (var n in nodes)

    Does n contain a property named "uBlogsyPostImage"? Otherwise it won't work. It's the alias of the property.

    Jeroen

  • Anthony Candaele2044 karma points
    Jan 02, 2012 @ 18:14
    Anthony Candaele
    0

    yes, n (documenttype uBlogsyPost) has a property uBlogsyPostImage (of datatype Digibiz Advanced Media Picker).

    I wonder if the problem could be related to the fact that the collection is of type DynamicNode:

    IEnumerable<DynamicNodepostList uBlogsy.Web.Helpers.NodeHelper.GetPosts(1107);

    IEnumerable<DynamicNodenodes;

    nodes postList.Take(count);

    @foreach (var in nodes)

    {

    dynamic file @n.uBlogsyPostImage.mediaItem.NewsImage

    }

  • Jeroen Breuer9854 karma points admin mvp c-trib
    Jan 02, 2012 @ 18:19
    Jeroen Breuer
    1

    You shouln't use the second @ there. Perhaps that is the problem. Do some little experiments :-).

    @foreach (var n in nodes)
    {
        dynamic file = n.uBlogsyPostImage.mediaItem.NewsImage;
    }

    Jeroen

  • Anthony Candaele2044 karma points
    Jan 02, 2012 @ 18:23
    Anthony Candaele
    0

    Good news, I found it:

    @foreach (dynamic in nodes)
                    {
                        dynamic file @n.uBlogsyPostImage.mediaItem.NewsImage;                   
                        <li>
                            @if(file.HasValue())
                            {
                            <img src="@file.umbracoFile" />
                            }
                           
                            <href="@n.Url">
                            @n.GetProperty("uBlogsyContentTitle").Value
                            </a>
                           
                        </li>
                    }

    Thanks for your help,

    Anthony

  • Jeroen Breuer9854 karma points admin mvp c-trib
    Jan 02, 2012 @ 18:27
    Jeroen Breuer
    1

    Good that you found it. For the other properties you don't need to do .GetProperty. This should also work:

    @foreach (dynamic n in nodes)
    {
        dynamic file = @n.uBlogsyPostImage.mediaItem.NewsImage;
        <li>
            @if(file.HasValue())
            {
               <img src="@file.umbracoFile" />
            }
    
            <a href="@n.Url">
               @n.uBlogsyContentTitle
            </a>
    
        </li>
    }

    Jeroen

  • Anthony Candaele2044 karma points
    Jan 02, 2012 @ 18:41
    Anthony Candaele
    0

    yes, as I'm not using 

    @foreach (DynamicNode n in nodes)

    but 

    @foreach (dynamic n in nodes)

    the @n.GetProperty("propertyalias").Value is not necessary

    The only thing I'm still looking for is to format my blogpostdate:

    @n.uBlogsyPostDate

    As the syntax for the former DynamicNode doesn't work anymore:

    @n.GetProperty("uBlogsyPostDate").Value.FormatDateTimeOrdinal("d MMMM yyyy")

    After this, the integration of Digibiz Advanced Media Picker and uBlogsy will be a fact :)

  • Anthony Candaele2044 karma points
    Jan 02, 2012 @ 19:01
    Anthony Candaele
    0

    and also the date problem is solved:

    @n.uBlogsyPostDate.ToString("d MMMM yyyy")

    This makes my news solution using uBlogsy and DAMP complete:


Please Sign in or register to post replies

Write your reply to:

Draft
Our.umbraco.org is the community mothership for Umbraco, the open source asp.net cms. With a friendly forum for all your questions, a comprehensive documentation and a ton of packages from the community.