Just trying to understand if I've got things set up right. (umb V6.0.3)
I have a normal Media Folder type holding images of custom media type "PageBanner", which is a normal Image media type with an added crop tab with a pageBanner property which is an image cropper with three crops set up on it: 1, 2 & 3.
In my content page Doc Type I have a tab called "Banner Images" in which there are three different DAMP data types: 1, 2 & 3. Each DAMP data type is set to preview a different crop from the pageBanner property and can only allow a single image to be picked.
When setting the images in the content page in the content section, each image shows a thumnail of the raw image. When I go to Edit, I can see all three available crops, if I pick the appropriate one for the DAMP data type, set it up and save it, it still shows the raw image as the thumbnail and not the crop I just set. Even after saving the page again.
I just want to check I've understood this process correctly from this video:http://codegarden12.com/sessions/day-two/slot-four/lightning-package-heaven.aspx Do I need a seperate image type per crop for this to work or should each DAMP data type be able to save and show the crops in the content page tab even if they are on the same image, as some of them are?
Yes you need a seperate image type per crop. That's how it's done in the video. Each media type will also have it's own datatype which can preview the crop of the media type (which is only 1).
Currently I'm using CropUp and there you could also have 1 cropper which works with a center of gravity which the crops are based on. So you don't define the crops on the media type, but in your Razor or XSLT code.
I had to move quickly on this so using a bare bones install I played around with CropUp and then added DAMP. I've now built the finished site but using only the default image datatype as there's no way to bulk upload the images as custom datatypes. All crops are defined in the web.config file as advised in CropUp's minimal documentation and the Niels K Show video. it works well, just looks a bit naff on the cropper as all crops are available in all places.
If there are any examples of how to:-
Set up individual crops in Razor macros
Bulk Upload images as custom data types
I'd be very keen to see them for my next site build (too late for this one though).
If you want to see how to bulk upload custom media types check the DAMP Gallery. It has a custom version of MFU which supports custom media types.
I don't use it anymore because I'm also using CropUp, but instead of defining crops in the config file I removed all crops from the config file and I'm using this code in Razor to show the crops:
Is there any way to have different crops set up for different image coppers so the Editor gets to see what the crops are doing, can change the gravity point and/or override them as they could if you put them in the config file? Otherwise you're editing blind.
Yes, I saw that. But that also shows the crops set up in the config file. If you remove them from the config file you get a YSOD.
Having thought DAMP and Cropping was becoming understandable at last, it appears it's getting worse again.
How do you configure your crops in your razor macros giving editors control? As far as I can see it HAS to be on the image datatype and there's no way to separate crops from eachother, i.e. you have to configure them in the config file or the editor isn't able to adjust or even see them in the UI.
I am trying to use the Damp Gallery with the CropUp package as shown in the video above but am unable to display the cropup preview/thumbnail in the gallery
my code is below
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{ dynamic i = CurrentPage.galleryImages; if (i.Count > 0) { var p = Helper.GetPager(6, i.Count); <ul class="photogallery"> @foreach (dynamic d in i.Skip(p.CurrentPage * p.ItemsPerPage).Take(p.ItemsPerPage)) { <li> <a class="popup" rel="gallery" href="@d.Url"> <img src="@d.Crops.thumb" alt="@d.Alt"/> </a> </li> } </ul> <div class="pagination"> @foreach (var number in p.Pages) { if (number - 1 != p.CurrentPage) { <a href="?page=@number">@number</a> } else { <span>@number</span> } } </div> } }
I assume I have to change this line but have no idea what it should be
Crops and Image Types
Just trying to understand if I've got things set up right. (umb V6.0.3)
I have a normal Media Folder type holding images of custom media type "PageBanner", which is a normal Image media type with an added crop tab with a pageBanner property which is an image cropper with three crops set up on it: 1, 2 & 3.
In my content page Doc Type I have a tab called "Banner Images" in which there are three different DAMP data types: 1, 2 & 3. Each DAMP data type is set to preview a different crop from the pageBanner property and can only allow a single image to be picked.
When setting the images in the content page in the content section, each image shows a thumnail of the raw image. When I go to Edit, I can see all three available crops, if I pick the appropriate one for the DAMP data type, set it up and save it, it still shows the raw image as the thumbnail and not the crop I just set. Even after saving the page again.
I just want to check I've understood this process correctly from this video:http://codegarden12.com/sessions/day-two/slot-four/lightning-package-heaven.aspx
Do I need a seperate image type per crop for this to work or should each DAMP data type be able to save and show the crops in the content page tab even if they are on the same image, as some of them are?
Thanks,
Craig
Hello Craig,
Yes you need a seperate image type per crop. That's how it's done in the video. Each media type will also have it's own datatype which can preview the crop of the media type (which is only 1).
Currently I'm using CropUp and there you could also have 1 cropper which works with a center of gravity which the crops are based on. So you don't define the crops on the media type, but in your Razor or XSLT code.
Jeroen
Hi Jeroen,
I had to move quickly on this so using a bare bones install I played around with CropUp and then added DAMP. I've now built the finished site but using only the default image datatype as there's no way to bulk upload the images as custom datatypes. All crops are defined in the web.config file as advised in CropUp's minimal documentation and the Niels K Show video. it works well, just looks a bit naff on the cropper as all crops are available in all places.
If there are any examples of how to:-
If you want to see how to bulk upload custom media types check the DAMP Gallery. It has a custom version of MFU which supports custom media types.
I don't use it anymore because I'm also using CropUp, but instead of defining crops in the config file I removed all crops from the config file and I'm using this code in Razor to show the crops:
If I want a different crop I just pass another width and height in the Razor code so I don't need to define any crops.
Jeroen
So the editor doesn't get to select or adjust crops other than setting the gravity point and won't see the effect in the various crop sizes?
Is there any way to have different crops set up for different image coppers so the Editor gets to see what the crops are doing, can change the gravity point and/or override them as they could if you put them in the config file? Otherwise you're editing blind.
If you watch this video you can see that you can also show a preview in DAMP: http://www.screenr.com/caC7
Jeroen
Yes, I saw that. But that also shows the crops set up in the config file. If you remove them from the config file you get a YSOD.
Having thought DAMP and Cropping was becoming understandable at last, it appears it's getting worse again.
How do you configure your crops in your razor macros giving editors control? As far as I can see it HAS to be on the image datatype and there's no way to separate crops from eachother, i.e. you have to configure them in the config file or the editor isn't able to adjust or even see them in the UI.
Craig
Hi
I am trying to use the Damp Gallery with the CropUp package as shown in the video above but am unable to display the cropup preview/thumbnail in the gallery
my code is below
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
dynamic i = CurrentPage.galleryImages;
if (i.Count > 0)
{
var p = Helper.GetPager(6, i.Count);
<ul class="photogallery">
@foreach (dynamic d in i.Skip(p.CurrentPage * p.ItemsPerPage).Take(p.ItemsPerPage))
{
<li>
<a class="popup" rel="gallery" href="@d.Url">
<img src="@d.Crops.thumb" alt="@d.Alt"/>
</a>
</li>
}
</ul>
<div class="pagination">
@foreach (var number in p.Pages)
{
if (number - 1 != p.CurrentPage)
{
<a href="?page=@number">@number</a>
}
else
{
<span>@number</span>
}
}
</div>
}
}
I assume I have to change this line but have no idea what it should be
<img src="@d.Crops.thumb" alt="@d.Alt"/>
thanks
Bal
is working on a reply...