Hi folks, esp. Jeavon, need some help with the image cropper, esp. the responsive version if possible, but just getting a crop to work would be nice.

So originally I could get my images to display but they were not cropped. My code was;

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
  Layout = "tmpContentPage.cshtml";

   var homePage = CurrentPage.AncestorsOrSelf(1).First();
    var ourMachines = homePage.dtOurMachines.First();
 var machineItems = ourMachines.dtOurMachineDetails.Take(5);
}

@{
  foreach (var machine in machineItems)
 {
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
          <div class="accent-panel">
              <div class="col-lg-12">
                 <h4><a href="@machine.Url">@machine.propMachineName</a></h4>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 machine-photo">
                    @{
                        if (machine.HasValue("propMachinePhoto"))
                     {
                         <img src="@machine.propMachinePhoto.GetCropUrl(height:250, width:150)" alt="@machine.propMachineName" />
                        }
                 }
             </div>
              <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 machine-content">
                  @Umbraco.Truncate(machine.propMachineContent, 500)
                </div>
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 machine-more">
                  <a href="@machine.Url" class="btn link-details">view details</a>
              </div>
          </div>
      </div>
  }
}

I also tried the variation of: "GetCropUrl(propertyAlias: "propMachinePhoto", height:150, width:250)" but no luck, the image would appear but it wasn't cropped. This led me to this topic.

So I proceeded to update the ImageProcessor - which it looked likes it needed - but it broke all my images as noted in this topic.

I managed to get the image back afterwards with this...

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
  Layout = "tmpContentPage.cshtml";

   var homePage = CurrentPage.AncestorsOrSelf(1).First();
    var ourMachines = homePage.dtOurMachines.First();
 var machineItems = ourMachines.dtOurMachineDetails.Take(5);
}

@{
  foreach (var machine in machineItems)
 {
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
          <div class="accent-panel">
              <div class="col-lg-12">
                 <h4><a href="@machine.Url">@machine.propMachineName</a></h4>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 machine-photo">
                    @{
                        if (machine.HasValue("propMachinePhoto"))
                     {
                         <img src="@machine.propMachinePhoto.src" alt="@machine.propMachineName" />
                      }
                 }
             </div>
              <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 machine-content">
                  @Umbraco.Truncate(machine.propMachineContent, 500)
                </div>
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 machine-more">
                  <a href="@machine.Url" class="btn link-details">view details</a>
              </div>
          </div>
      </div>
  }
}

but now this version;

<img src="@machine.propMachinePhoto.GetCropUrl(height:250, width:150)" alt="@machine.propMachineName" />

Ends up with the error:

'Newtonsoft.Json.Linq.JObject' does not contain a definition for 'GetCropUrl'

Now I get that, because

@machine.propMachinePhoto

now returns a JSON object. What I don't get is why this command before I updated ImageProcessor did not trigger this error, instead it displayed the JSON in the image URL. Obviously not correct but it was different.

So my question is... how do I get this;

<img src="@machine.propMachinePhoto.src" alt="@machine.propMachineName" />

into something like this;

<img src="@machine.propMachinePhoto.GetResponsiveCropUrl(height:250, width:150)" alt="@machine.propMachineName" />

Where I don't get an error, I do get an image, and it's cropped?

Lastly... I was unable to use your example Jeavon;

@foreach (var feature in homePage.umbTextPages.Where("featuredPage"))
{
    <div class="3u">
        <!-- Feature -->
        <section class="is-feature">
            @if (feature.HasValue("Image"))
            {
                var featureImage = Umbraco.Media(feature.Image);
                <a href="@feature.Url" class="image image-full">
                <img src="@featureImage.GetResponsiveImageUrl(270, 161)" alt="" />
                </a>
            }
            <h3><a href="@feature.Url">@feature.Name</a></h3>
            @Umbraco.Truncate(feature.BodyText, 100)
        </section>
        <!-- /Feature -->
    </div>
}

Without changing it to get...

var homePage = CurrentPage.AncestorsOrSelf(1).First();
var ourMachines = homePage.dtOurMachines.First();
var machineItems = ourMachines.dtOurMachineDetails.Take(5);

@foreach (var machine in machineItems)
{
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="accent-panel">
          <div class="col-lg-12">
             <h4><a href="@machine.Url">@machine.propMachineName</a></h4>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 machine-photo">
                @if (machine.HasValue("propMachinePhoto"))
                {
                 var machinePhoto = Umbraco.Media(machine.propMachinePhoto);
                   <a href="@machine.Url" class="image image-full">
                        <img src="@machinePhoto.GetResponsiveImageUrl(250, 150)" alt="" />
                  </a>
                }
         </div>
          <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 machine-content">
              @Umbraco.Truncate(machine.propMachineContent, 500)
            </div>
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 machine-more">
              <a href="@machine.Url" class="btn link-details">view details</a>
          </div>
      </div>
  </div>
}

... using an example from the same Starter Kit... where I used the var declarations at the top to get this part of your example to kind of work;

var feature in homePage.umbTextPages.Where("featuredPage")

My questions;

- How did you get the objects "homePage" and "umbTextPages" in your example?

- How can you write a version of your example in such a way that one can get intellisense in Visual Studio?

Hope the above made sense. I'm really tired at 1:30am. Time to sleep.

Thanks.