How can I display images created using the image cropper data type?
As an example say I upload an image1.jpg, this contains 3 image crops named thumb, featured and main.
How would I display the image created as thumb using Razor?
The following should point you in the right direction. The Image Cropper is a standard Umbraco Datatype so it has some support for accessing the crops, you can find them by crop name:
var mediaItem = Library.MediaById(Model.Thumbnail);
var img = mediaItem.crop.Find("#name", "thumbnail");
if (img != null)
{
<img src="#img.url" />
}
I hope that helps.
I have got this working, not sure it is best practice but does the job for now.
<img src="#Library.Concatenate(mFile.umbracoFile.Split('.')[0], "_thumb.jpg")" />
The above takes the filename of the media item, strips the file extension off and concatenates it to the cropped image name using the Library Helper. In this case the cropped name was thumb, so adding an underscore and the cropped name resolves the generated image.
The cropped images are generated within Umbraco on the server in the following format:
filename - fileextension + underscore + croppedname + fileextension
Related
im doing a project using .net MVC web Application.
i recently used a code to create a new thumbnail to photos (re defining the sizes of a photo) . and now i'm trying to print the photos using the 'img' tag of HTML but without success.
the thumbnail creating code :
Image thumbnail = Image.FromFile(destPath);
thumbnail = (Image)(new Bitmap(thumbnail, new Size(this.m_thumbnailSize, this.m_thumbnailSize)));
thumbnail.Save(destPathThumb);
now for the img printing :
#Html.DisplayFor(modelitem=>item)
<img class="img-rounded" style="border-radius:50%" src=#item alt="">
item is the path to the picture and it is currect (ive checked serveral times).
any ideas what i could be ?
thank you for helping me ! :)
EDIT: the img tag prints normal pictures -> pictures that my program did not create(as i said,my program created thumbnail pictures)
I wonder if it is not releasing the file lock on the image, I have had that problem in the past. You have to be very careful about releasing those Image and Bitmap objects.
Something like this might work, as it will dispose the image before the page starts using it:
using(Image thumbnailoriginal = Image.FromFile(destPath)){
using(Image thumbnail = (Image)(new Bitmap(thumbnailoriginal, new Size(this.m_thumbnailSize, this.m_thumbnailSize)))){
thumbnail.Save(destPathThumb);
}
}
It seems like a lot of brackets on the end but thats ok.
If it still does not work, can you post the html that is sent to the browser, you can do that using "View page source" from the right-click menu in Chrome.
Now we have the html that is going to the browser, we can see that the src attribute is pulling directly from the C drive, rather than from a web url:
<img class="img-rounded" style="border-radius:50%" alt="" src="C:\Users\Operu\Desktop\dest\Thumbnails\2018\6\Sasuke.png">
Normally we would want to see something more like this:
<img class="img-rounded" style="border-radius:50%" alt="" src="\Thumbnails\Sasuke.png">
Could you post the model and controller files next please, so we can see what type of object the #item is when it hits your view. Then we can hopefully get it to pull the relative url address instead of the file location.
I have List of 3 Images of type Xamarin.Forms.Image. First image has URI as source, Second image has stream that as I have uploaded second image from Gallery and I don't have anything in 3rd image.
List<Image> Photos = new List<Image>();
Image URIImage=ImageSource.FromURI("https://xxx.amazonaws.com/profiles/ddddd-1658-4cf1-b62c-cccccccc_1.jpg");
Photos.Add(URIImage);
Photos.Add(await GetImageFromGallery()); //"/Users/text/Library/Developer/CoreSimulator/Devices/3C26B8DD-1E37-47A0-B164-810AE3EA4A4D/data/Containers/Data/Application/05BE5988-4F9F-4E17-BCC2-xxxxxxxx/Documents/IMG_0001.JPG"
Photos.Add(new Image() { Source = string.Empty });
Now I want to go through loop and want to get image from Photos that doesn't have source. Here it's 3rd image of Photos list.
Can anybody please help me?
After read the comment, I think the simple solution is checking the string converted from image.source.
You can use the two as condition
image.Source.ToString() is "File: "
or
image.Source.ToString().Contains("File: ")
I need to display images to the screen based on the id passed to the view from the model. I'm new to C#, so I'm not sure if it's possible or what syntax is needed to add variables to my img src.
<img src="~/Content/Images/Sprites/#item.pkmnDataId"/>
(just assume for now #item.pkmnDataId = 1)
That will not work because it will request ~/Content/Images/Sprites/1
and it needs to request ~/Content/Images/Sprites/1 .png
Is it possible to concatenate a '.png' to the img src string (with no space between)?
Thanks!
I'm using the image cropper on my media type > Image > Upload Image. This seems to be the best solution for creating responsive images in the media library.
However, this presents me with the problem of finding out how to get the URL for my images now.
Usually for Image Croppers I would use this code:
#Model.Content.GetCropUrl("image", "my-crop-name")
However if I try to get the image crop this way I get this instead:
<img src="Umbraco.Web.Models.DynamicPublishedContent?mode=pad&rnd=131108182860000000" />
I was expecting to get an image URL with the crop I specified. This works fine for standard image croppers but not ones on my images in the media library. Why is that? And how should I get the crop URL for these images?
I'm using v7.4.2
In order to get a crop URL for an image in the media section you first need to retrieve the image as IPublishedContent. You can do this as follows:
var imageId = Model.Content.GetPropertyValue<int>("image");
var image = Umbraco.TypedMedia(imageId);
Or if you're using the excellent Core Property Value Converters package you can retrieve it directly without having to perform the conversion:
var image = Model.Content.GetPropertyValue<IPublishedContent>("image");
You then need to call the GetCropUrl() method on your image. If you've replaced the default Upload property with an Image Cropper property, and kept the property alias the same (umbracoFile), you can just pass in the crop alias:
var cropUrl = image.GetCropUrl("my-crop-name");
If the alias of your Image Cropper property is different to the default you will need to pass that as an additional argument:
var cropUrl = image.GetCropUrl("imageCropperAlias", "my-crop-name");
For images directly from the media libary without an Image Cropper data type. I use somethings like this:
<img src="#photo.Url?mode=crop&width=634&height=634" alt="#photo.Name" />
Not very pretty but it works perfectly.
Could you help me - I want each day to display same text with image from Access database where I stored text and image path. Text is going on the page, but for image I got only placeholder. I tried also with Handlers. I search through theses questions and nothing is exact what I want.
Here is code in C# I tried:
//image
int IDImage = 0;
upit = new baza.Upit("SELECT * FROM (Images INNER JOIN JoinImageText ON Images.IDImage = JoinImageText.IDImage) WHERE JoinImageText.IDText = " + IDText.ToString() + " ORDER BY LastTimeDisplayed, RND()");
upit = new baza.Upit("SELECT * FROM (Images INNER JOIN JoinImageText ON Images.IDImage = JoinImageText.IDImage;
if (upit.Reader.Read())
{
TextImage.Src = upit.Reader["image"].ToString();
IDImage = Convert.ToInt32(upit.Reader["IDImage"]);
}
upit.Zatvori();
Thanks in advance.
You have to use Handlers in ASP.Net.
This post from CodeProject can help you in achieving your goal.
When you say you're getting a placeholder you mean when the page renders in the browser? If so, it means the path to the image is incorrect. What image information are storing in the Access DB? Image name only or image with path? Make sure the path to the image is correct.
Make sure your tag has the src attribute:
<img src="/images/someimage.jpg" alt="Image of something" height="64" width="64">
If you include the runat=server attribute, in code behind you could so something like:
<img src="<%= Url.Content("~/database_value_for_image_path") %>" runat=server/>.
The UrlHelper would resolve the relative path for you.
Or since you're using asp.net, consider the asp:Image tag as well - Image Class on MSDN