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.
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.
My aim is to extract an image from a loaded webbrowser control.
// get the image link from the image element ID.
string imageLink = wbVideos.Document.GetElementById("sbvdcapimg").GetAttribute("src").ToString();
//Download the image into a bitmap
Bitmap image = new Bitmap(new System.IO.MemoryStream(new System.Net.WebClient().DownloadData(imageLink)));
so the code works for most pictures, but i receive me a format error when i use it with the link below.
The error is thrown when i parse this link into my code: "http://www.swagbucks.com/?cmd=cp-get-captcha-image&ctype=1&tai=478817685&sid=0.4015013770493371"
(Please Note to view the image you need to login!)
Notice how the image does not end in a extension, this is most likely causing the error.
Example of the extracted link:
so, my question, how can i make my code accept this link as a valid image file?
I'm trying to make a dynamic image slider using asp.net C# and jquery. I have stored image paths in database and have fetched those image paths to bind on page load where these images paths are supposed to work showing the respective images on my web page. I have used Really Simple Slider plugin that I found on internet and I am binding images using json response as below:
'output' is my json response which holds a string array that contains the image names that I'm using to complete an image path.
$("#slider1").append('<div class="main"><div class="rss-container"><div id="slideshow" class="rs-slideshow"><div class="slide-container">');
$("#slider1").append('<img src="beeSlider/images/'+output.d[0]+ '" alt=""/></div><ol class="slides">');
$.each(output.d, function (key, value) {
$("#slider1").append('<li></li>');
});
$("#slider1").append('</ol></div></div></div>');
The binding with output.d[0] has worked. But the code within $.each aint working at all. That just shows bullets. This should be retrieving images rather than just those bullets.
Can anybody help me to solve this one. Thanks in Advance.
You werent putting them in image tags...
$("#slider1").append('<div class="main"><div class="rss-container"><div id="slideshow" class="rs-slideshow"><div class="slide-container">');
$("#slider1").append('<img src="beeSlider/images/'+output.d[0]+ '" alt=""/></div><ol class="slides">');
output.d.forEach(function (value) {
$("#slider1").append('<img src="beeSlider/images/'+value+'" />');
});
$("#slider1").append('</ol></div></div></div>');
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
I'm trying to draw a SVG File. So far I've tried using an Image tag and a WebView with the svg itself or an object / embed tag. Nothing so far seems to help, and all the dll's I've found so far need .NET.
Examples of what I've tried so far (note: Paths have all been tried with or without ms-appx:///, note2: using img tag in webview for non-svg types hasn't worked either)
WebView:
webView.NavigateToString("<embed src='circle1.svg' type='image/svg+xml' />");
webView.NavigateToString("<object data='circle1.svg' type='image/svg+xml' />");
webView.NavigateToString("<svg>....</svg>");
Image:
<Image Source='circle1.svg'>
I am not sure if you can include external images this way, have you tried with other image formats? Have you tried using an absolute path? I would also consider using the data tag as image source instead of an external file.
Example (from wikipedia):
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
alt="Red dot">
Additionally, there is project in codeplex called xamltune that can convert a svg file into an xaml file. Maybe you can insert the output xaml code in your application instead of using a WebView.