Hello,

I don't think the media picker in embedded content supports the preview of images. Perhaps you can try the new widget builder package which supports DAMP.

Jeroen

The link for widget builder is:

http://our.umbraco.org//projects/backoffice-extensions/widget-builder

I'm trying to build a logo picker Data Type. I built one version with an Embedded Content property editor so I could add a media picker and a textstring for the URL for the user to click on. However in the Umb UI, you just see the nodeID in the Embedded Content Picker, which is no good for my non-techy client. So I thought I'd try using a DAMP. But then I found I couldn't associate a URL with each image.

Does anyone have an idea how to do this?

Cheers,

Craig

I haven't used this package yet, but perhaps the widget builder is what you're looking for. It also supports DAMP: http://our.umbraco.org/projects/backoffice-extensions/widget-builder

Jeroen

Well as an interim I've added a URL property to the Image mediaType so if I can get at that, it'll be fine.  In the meantime I'm having the usual issue getting images out of DAMP from a static settings page:-

@inherits umbraco.MacroEngines.DynamicNodeContext
@using DigibizAdvancedMediaPicker
@{
var settingsNode = Model.NodeById(1051);
var phoneNum = settingsNode.phoneNumber;
var email = settingsNode.emailAddress;
 
    //Get social media logos and links
    DAMP.PropertyEditorValueConverter.Model mediaItems = new DAMP.PropertyEditorValueConverter.Model(settingsNode.GetPropertyValue("Header"));  
foreach(dynamic item in mediaItems)
{ 
    <img src="/[email protected]&amp;width=178&amp;height=132" alt="@item.Alt">
}<br> 
<span class="phone">Tel: @phoneNum</span><br>
<a href="mailto:@email" title="Email">@email</a> 
}

The code doesn't "fail" as such. It's I just don't know how to reference the images.  The settings page has a tab called "Header" whithin which there's a DAMP with an alias of "socialMediaLogos". There are two logos set up already, nothing comes out.  All the examples I see are for if there are crops (Cultive, etc.). There are no crops in this case. I've tried @item.umbracoFile, @item.File, @item.dampFile, @item.Image. None work so I'm lost, just guessing. Can anyone suggest what the syntax should be?

You shouldn't use the DAMP Property Editor Value Converter, but the DAMP Razor Model instead. See here for more info: http://our.umbraco.org/projects/backoffice-extensions/digibiz-advanced-media-picker/digibiz-advanced-media-picker/39627-How-to-detect-if-no-items-have-been-picked#comment144735

You could have a look at the DAMP Gallery for some nice examples: http://24days.in/umbraco/2012/damp-gallery/

The DAMP Razor Model Samples package (which only works on Umbraco 4 not 6) also shows how you can use it. Here is another example: http://damp.codeplex.com/SourceControl/changeset/view/c596a606fa35#DAMP.Samples/DAMP-RazorModel.cshtml

Jeroen

Ok, I swapped the Property Editor Value Convertor for the Razor Model.  However, there's such a lack of documentation, I don't know what the images are called in the DAMP so I can't get to them to list them.

@inherits umbraco.MacroEngines.DynamicNodeContext
@{
var settingsNode = Model.NodeById(1051);
var phoneNum = settingsNode.phoneNumber;
var email = settingsNode.emailAddress;
 
    //Get social media logos and links
 
    dynamic tab = settingsNode.Header.socialMediaLogos;
        <p>@tab.dampFile.Count()</p>
       <span class="phone">Tel: @phoneNum</span><br>
<a href="mailto:@email" title="Email">@email</a> 
}

Again I've tried @tab.File, dampFile, umbracoFile, Image and everything just returns a Count of 0.

Is there any documentation anywhere?  Examples are only ok if you're doing exactly what the example is. Plus you need to have one or two (sometimes) extra umbraco sites open while your working. Some good documentation you could download and refer to while you're working would be fantastic.

Could you past in the xml of the node. I don't know what settingsNode.Header.socialMediaLogos does. 

Jeroen

Sure.  The page is called Settings, docType "Settings". A tab called "Header" with a DAMP picker called socialMediaLogos:-

  
    ]]>
  <Settings id="1051" parentID="-1" level="1" creatorID="0" sortOrder="1" createDate="2013-04-03T12:10:19" updateDate="2013-04-04T13:33:16" nodeName="Settings" urlName="settings" path="-1,1051" isDoc="" nodeType="1048" creatorName="admin" writerName="admin" writerID="0" template="0">
    <googleAnalyticsCode><![CDATA[<script>
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
    var pageTracker = _gat._getTracker("UA-*******-1");
    pageTracker._initData();
    pageTracker._trackPageview();
</script>]]></googleAnalyticsCode>
    <socialMediaLogos>1092,1089</socialMediaLogos>
    <copyright>DSC Catering. All rights reserved.</copyright>
    <tradeLogos>1091,1090,1088</tradeLogos>
    <postalAddress><![CDATA[DSC,
London TTT EEE]]></postalAddress>
    <phoneNumber>120 123 1231</phoneNumber>
    <emailAddress>[email protected]</emailAddress>
  </Settings>
  

You don't need to use tabs in Razor. It's also not stored in the xml. Try something like this:

dynamic tab = settingsNode.socialMediaLogos;
<p>@tab.First.Url</p>

If it are multiple media items you can try this:

dynamic tab = settingsNode.socialMediaLogos;
foreach(dynamic d in tab)
{
  <p>@d.Url</p>
} 

Jeroen

Thanks Jeroen, I now have images!  But again stopped because of the next trivial issue (that could possibly be solved with documentation), 

            <a href="@image.uRL" title="@image.Alt"><img src="/[email protected]&amp;width=32&amp;height=32" width="@image.Width" height="@image.Height" alt="@image.Alt"></a>

Got it!!!!

Probably not the prettiest, but it works. Hope it helps someone else.

@inherits umbraco.MacroEngines.DynamicNodeContext

@{
var settingsNode = Model.NodeById(1051);
var phoneNum = settingsNode.phoneNumber;
var email = settingsNode.emailAddress;

    //Get social media logos and links 
    dynamic collection = settingsNode.socialMediaLogos;
    
    foreach(dynamic image in collection) {
        var linkUrl = Library.MediaById(image.Id).uRL;
        var width = Library.MediaById(image.Id).umbracoWidth;
        var height = Library.MediaById(image.Id).umbracoHeight;
    <a href="@linkUrl" title="@image.Alt"><img src="/[email protected]&amp;width=32&amp;height=32" width="@width" height="@height" alt="@image.Alt"></a>
    }<br>         
<span class="phone">Tel: @phoneNum</span><br>
<a href="mailto:@email" title="Email">@email</a> 
}

(Some CodeGarden beers for Jeroen I think;))

Craig

is working on a reply...