image cropper from media picker in 771 - Using Umbraco And Getting Started

Bora B 32 posts 124 karma points

Sep 24, 2017 @ 08:30

Image Cropper from Media Picker in 7.7.1

Using Umbraco And Getting Started

Umbraco 7

Hi,

I'm trying to use image cropper from the new Media Picker. My Image Media Types are Image croppers. But I could not figure it out using dynamic content in an helper.

My code is as follows:

@helper yayinGetirYeni(dynamic yayin)
{


    <div class="entry clearfix">
        @if (yayin.HasValue("listeGorseli"))
        {
        var image = yayin.listeGorseli;
        var cropUrl = image.GetCropUrl("liste");
        <div class="entry-image">
            <a href="@yayin.Url"><img src="@cropUrl" /></a>
        </div>
        }
        <div class="entry-title">
            <h2><a href="@yayin.Url">@yayin.Name</a></h2>
        </div>
    </div>

}

Thanks

Copy Link

Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Sep 24, 2017 @ 19:27

Hi Bora

Do not use dynamics )) Best practice is to use strongly typed models in Umbraco.

Thanks,

Alex

Copy Link

Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Sep 25, 2017 @ 14:58

Hi Bora

Please, show all your view code, we will find a problem together.

Thanks,

Alex

Copy Link

Bora B 32 posts 124 karma points

Oct 04, 2017 @ 07:34

Hi Alex,

my whole code is like that:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Master.cshtml";
    var blog = CurrentPage.Children.Where("Visible").OrderBy("createDate desc");
    var pageSize = 8;
    var previousPageIsEllipsis = false;
    var page = 1; int.TryParse(Request.QueryString["page"], out page);
    var items = blog;
    var totalPages = (int)Math.Ceiling((double)items.Count() / (double)pageSize);
    if (page > totalPages)
    {
        page = totalPages;
    }
    else if (page < 1)
    {
        page = 1;
    }
}
@foreach (var item in blog.Skip((page - 1) * pageSize).Take(pageSize))
      {
          @yayinGetirYeni(item);
      }

@helper yayinGetirYeni(dynamic yayin)
{


    <div class="entry clearfix">
        @if (yayin.HasValue("listeGorseli"))
        {
        var image = yayin.listeGorseli;
        var cropUrl = image.GetCropUrl("liste");
        <div class="entry-image">
            <a href="@yayin.Url"><img src="@cropUrl" /></a>
        </div>
        }
        <div class="entry-title">
            <h2><a href="@yayin.Url">@yayin.Name</a></h2>
        </div>
        <ul class="entry-meta clearfix">
            <li><i class="icon-calendar3"></i> @yayin.CreateDate.ToString("dd MMMM yyyy")</li>
        </ul>
        <div class="entry-content">
            <p>@yayin.haberSpotYazi</p>
            <a href="@yayin.Url" class="more-link">Daha Fazlası</a>
        </div>
    </div>

}

Thanks for your help

Copy Link

Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Oct 04, 2017 @ 09:36

Hi Bora

I would rewrite this code like that:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Master.cshtml";

    var blog = Umbraco.AssignedContentItem.Children.Where(x => x.IsVisible()).OrderByDescending(x => x.CreateDate);
    var pageSize = 8;
    var previousPageIsEllipsis = false;
    int page;
    int.TryParse(Request.QueryString["page"], out page);
    var items = blog;
    var totalPages = (int)Math.Ceiling(items.Count() / (double)pageSize);
    if (page > totalPages)
    {
        page = totalPages;
    }
    else if (page < 1)
    {
        page = 1;
    }
}
@foreach (var item in blog.Skip((page - 1) * pageSize).Take(pageSize))
{
    @yayinGetirYeni(item);
}

@helper yayinGetirYeni(IPublishedContent yayin)
{
    <div class="entry clearfix">
        @if (yayin.HasValue("listeGorseli"))
        {
            var cropUrl = yayin.GetCropUrl("listeGorseli", "liste");
            <div class="entry-image">
                <a href="@yayin.Url"><img src="@cropUrl" /></a>
            </div>
        }
        <div class="entry-title">
            <h2><a href="@yayin.Url">@yayin.Name</a></h2>
        </div>
        <ul class="entry-meta clearfix">
            <li><i class="icon-calendar3"></i> @yayin.CreateDate.ToString("dd MMMM yyyy")</li>
        </ul>
        <div class="entry-content">
            <p>@yayin.GetPropertyValue("haberSpotYazi")</p>
            <a href="@yayin.Url" class="more-link">Daha Fazlas</a>
        </div>
    </div>

}

Copy Link

Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Oct 15, 2017 @ 17:52

Hi Bora

Did you solve the issue?

Share with the community, please.

Thanks,

Alex

Copy Link

Bora B 32 posts 124 karma points

Oct 19, 2017 @ 06:46

Thank you very much Alex. This solved it.

Copy Link

ianhoughton 281 posts 605 karma points c-trib

Oct 04, 2017 @ 09:29

If you change your dynamic to IPublishedContent, you can then use this:

    @helper yayinGetirYeni(IPublishedContent yayin)
{
    <div class="entry clearfix">
        @if (yayin.HasValue("listeGorseli"))
        {
            var cropUrl = yayin.GetCropUrl("listeGorseli", "liste");
            <div class="entry-image">
                <a href="@yayin.Url"><img src="@cropUrl" /></a>
            </div>
        }
        <div class="entry-title">
            <h2><a href="@yayin.Url">@yayin.Name</a></h2>
        </div>
        <ul class="entry-meta clearfix">
            <li><i class="icon-calendar3"></i> @yayin.CreateDate.ToString("dd MMMM yyyy")</li>
        </ul>
        <div class="entry-content">
            <p>@yayin.GetPropertyValue("haberSpotYazi")</p>
            <a href="@yayin.Url" class="more-link">Daha Fazlas</a>
        </div>
    </div>
}

Copy Link

is working on a reply...

Flag this post as spam?

Image Cropper from Media Picker in 7.7.1