Hi Anthony,

Since you're storing the Full Media XML (option in DAMP prevalue editor), you don't need to mess with getting the Id of the image.  You can just do this:

@if (featuredResearch.HasValue("ResearchProjectImage"))
{
    var image = featuredResearch.ResearchProjectImage.mediaItem.ResearchImage.umbracoFile;
    <img src="/imageGen.ashx?image=@image&amp;width=200"/>
} 

Hi Tom,

I have tried your solution, but VS doesn't recognize the object 'ResearchProjectImage' in 

var image = featuredResearch.researchProjectImage.mediaItem.ResearchImage.umbracoFile;

The VS Intellisense says it cannot resolve the symbol researchProjectImage

could this be because featuredResearch is of type DynamicNode ?

Thanks for your help,

Anthony

Yes, you won't get intellisense for any custom properties.  You can change from DynamicNode to just dynamic to get around the warning, but then you don't get the intellisense with the available methods.

Does the code work or are you getting an error on the front end also?

Hi Tom,

No the code doesn't work, I'm getting an error on the front end

Hi Tom,

I changed the type of the variable 'featuredResearch' to var and now it works!

thanks a lot,

Anthony

If it can help someone else working with DAMP and Razor, this is the full code:

@using umbraco.MacroEngines
@inherits umbraco.MacroEngines.DynamicNodeContext
              
@{
    var featuredResearch = @Model.AncestorOrSelf().Descendants("ResearchProject").Where("researchFeatured").First();
}

<div class="C00_Clean container">
  <div class="widget-title">Featured Research</div>
  <div id="twitter" class="widget widget-twitter">
      <p>@featuredResearch.GetProperty("researchProjectTitle").Value</p>
      @if (featuredResearch.HasValue("researchProjectImage"))
           {
            var image = featuredResearch.researchProjectImage.mediaItem.ResearchImage.umbracoFile;
            <img src="/imageGen.ashx?image=@image&amp;width=200"/>
           }
   </div>
  </div>

Hi Anthony,

Thanks for sharing your code. I see that you're already using a custom media type for ResearchImage, but you're still using ImageGen to get the correct size. This is a good combination, but have you considered using the Image Cropper for this? Than you have more control over the output of the image. In this video I explain how it works and what the benefits are: http://www.youtube.com/watch?v=LkcObL7CMvQ

Jeroen

Hi Jeroen,

Thanks for the information, I have watched the video, but to be honest, I don't fully get the concept of a crop. I mean, except for having more control over the output of an image, are there any other advantages with using crops over resizing images in code using imageGen ?

I use DAMP because it gives me more control about which media can be stored in wich media folders, as this enhances the experience of the end users using a CMS. I didn't yet create custom media folders though, only custom media types. Maybe I should create also custom media folders so I can control which type of media can be stored in a given media folder.

I must say, DAMP is a great package, lately I created a video gallery using FlowPlayer and DAMP to select videos. It worked out really well and I will blog about it in the near future.

greetings,

Anthony

The advantage of a crop is that if you give it a height and width it will always have that size. If you have multiple images which all have a diffent width and height they will still look the same. For example this website uses DAMP for the photo gallery. As you can see the width and height is always good because it's cropped. If the user wants a different part of the image to be visible he can go to the media section and drag the crop to select it.

I also use custom media folders for the same reason you described. If you use my custom version of MFU you can also only select the media types which are allowed.

Jeroen

Hi Jeroen,

Thanks for your explanation. So you mean a crop has always the same width and height, wherever it's used, while an image resized with imageGen only has the appropriate width and height where it is defined in the code?

I have used imageGen for this video gallery to resize all images to a same width and height (see screenshot below)

the code for this video-gallery looks like this:

@inherits umbraco.MacroEngines.DynamicNodeContext
@using umbraco.MacroEngines
@{
    var videos = @Model.Children.Where("Visible");    
}
@foreach (var itemgroup in videos.InGroupsOf(3))
  {    
        <div style="float:left;clear:right;margin-right:10px;margin-left:10px;margin-top:10px;margin-bottom:5px;">
        @foreach (var video in itemgroup)
        {
           
           var videothumbnail = video.videoThumbnail.mediaItem.VideoImage;              
           <div style="float:left;margin-left:10px;margin-top:10px;margin-bottom:5px;">
             <a href="@video.Url">
              <img src="/[email protected]&amp;width=200&amp;height=150" style="margin-right:10px;margin-bottom:5px;" />
             </a>
             <p><strong>@video.videoTitle</strong><br />
             Length: @video.videoDuration</p>
           </div>
                               
        }
        </div>   
}

So I don't know why I should use crops instead of just resizing the thumbnails with imageGen. The only advantage of using crops in this particular case is that the user has some more control over the output of the thumbnails.

greetings,

Anthony

If you use a crop in this example the images will look better. Now they are all stretched. The original images probably look better and if you use crops these images will look the same as the original images.

Jeroen

Hi Jeroen,

Thanks for the tip, I will try it out and let you know.

greetings,

Anthony

I've released the DAMP Razor Model package. It's much easier to use DAMP in Razor now. Here's a video: http://www.screenr.com/qvj8.

Jeroen

I have installed the DAMP Razor Model and am trying to use it in Visual Studio.

I have a pretty simple setup - DAMP datatype set to "Full media xml" and only one image can be selected. All I want to do is get the URL of the selected image. Could someone show me how I would do that?

Here is an example which should work if you have the DAMP Razor Model installed:

@{
dynamic media = Model.dampProperty.First;
<img src="@media.Url" alt="@media.Alt"/>
} 

Jeroen

Umm, I have the line

        dynamic headerImage = Model.HeaderImage.First;

but I get the error

'umbraco.MacroEngines.DynamicXml' does not contain a definition for 'First'

Hmm that means the DAMP Razor Model is not working. What version of Umbraco are you using and which package did you install? Do you have the DAMP.RazorModel.dll in your bin folder?

Jeroen

Umbraco 4.9.1

Downloaded / Installed DAMP_Razor_Model_1.2.zip

The DAMP.RazorModel.dll file is in the BIN folder. Do I need to add a reference to it in Visual Studio?

No it should just work. Do you have a special version of DAMP? When you look at the DAMP datatype what is the GUID and the render control?

Jeroen

the GUID is ef94c406-9e83-4058-a780-0375624ba7ca - according to the "Installed Packages" section it is version 2.

Hmm everything should just work. Could you please show your complete Razor file here? Perhaps than I can see if there is something wrong.

Jeroen

There must be something going on elsewhere - I have stripped it down to

@{
        dynamic headerImage = Model.HeaderImage.First;
}

and it still gives an error!?

Yes the problem is that the DAMP Razor Model isn't working. Because it's not working it returns DynamicXml (which is defeault) instead of the Model I wrote for it. I really don't know why it's not working. Could you perhaps download the source and debug to see if that works? Just download the latest version here: http://damp.codeplex.com/SourceControl/list/changesets It's the DAMP.RazorModel project. You can try if the ModelBinder Init method is hit.

uComponents also has some Razor models. You could try to see if that works.

Finally you could try to just use a clean solution and see if that works. You can watch a video on how to do that here: http://www.screenr.com/qvj8

Jeroen

Sorry ... I don't have the time to spend on it right now :-(

I have got it working by using:

headerImageUrl = Model.HeaderImage.mediaItem[0].Image.umbracoFile;

Too bad it didn't work. If you've got time you could also look in log table to see if there might be an error causing this. 

Just thought about one last thing which could be problem. If you added some references to dll's in your Visual Studio project which aren't in the bin folder this can also break it. See this topic: http://our.umbraco.org/forum/developers/api-questions/24461-Events-not-being-fired#comment90973

Jeroen

is working on a reply...