Danny,

Any particular reason you want to do this? It may be that there is a better of way doing what you are trying to do?  E.g is it some sort of gallery you are building?

Regards

Ismail

It's a gallery/caurousel .

Each image is the same of the same thing, but optimised for different platforms for responsive design (i.e. Desktop, Tablet, Mobile).

Each image will be suffixed with the platform type, i.e. Image1_Desktop.png, Image1_Tablet.png, Image1_Mobile.png.

When I output this on the page, I'll just load the "Image1_Mobile.png" file. The frontend devs will then know to just replace _Mobile with _Desktop, or _Tablet to load the appropriate version of the image.

If the images are sitting in the different directories, this won't work, as there is no way to guess the correct folder name.

Each slide of the caurousel will have its own image directory and folder in the free view

Hope this makes sense

 

Hi Danny

Perhaps you should consider using http://www.sencha.com/products/io to handle the scaling of your images instead? I think that is a better option at the moment and if I get the ghist of your post correctly this could save you a lot of work.

Hope this helps.

/Jan

Hi Danny,

This blog also has some nice alternatives: http://anthonydotnet.blogspot.com/2011/11/image-gen-image-cropper-damp-and-sencha.html.

Jeroen

Thanks for the replies.

We need to retain control over each version of the image, so want to be able to upload each file on its own, without any auto generation. (each image doesn't scale down, and will be of a different part of the image). I am aware of plugins that let you choose a region of a larger image to use, but we need more control of the final image quality)

I have used similar plugins in the past which auto scale the images, but in this instance, it is not appropiate.

 

I also need to note that the final site is a flat HTML site generted via Cruise Control. This means I won't be able to call .ascx files etc.

Reasoning for the flat HTML site is due to specific hosting requirments from the client, and the need for a very fast website.

I use the umbraco Image cropper to crop the image into different formats, sizes and quality. Maybe that's what you're looking for. Here is a tutorial: http://www.youtube.com/watch?v=LkcObL7CMvQ.

Jeroen

@Jeroen,

Thanks for your post, but I need to have more control over the creation of the images. Each image needs to be uploaded on it's own.

Hmm well in that case I think it will be quite hard to change this. The folder is created in the upload datatype. You'll probably need to change the source for this. It uses the property id to create a folder. Have a look here. That is the file which you probably need to modify. Good luck :).

Jeroen

create the media folder in Umbraco and add your 3 images below it. Then in your content point at the folder ratehr than an actual image. You can then iterate through the folder to get the desired image using xslt or razor script.

Remember you can add generic properties to your media images and folders (media types) like you do for document types if this would help.

Thanks everyone for your suggestions:

I have managed to solve this one by creating my one Media_AfterSave event.

I am able to then copy the newly uploaded file into the parent folder, there by making it so that all the images appear in the same directory.

It works very nicely with the Multiple upload in that I create a "Folder", then upload severla files at once. All the images get copied into the folders media directory, as well as each of the children.

Happy to share code if anyone is intrested.

Great solution! I'm interested in the code :).

Jeroen

Here is the Media_AfterSave method I created:

Needs to sit in a class that extends "ApplicationBase"

private static void Media_AfterSave(Media sender, SaveEventArgs e)

        {

            // nodeId for file just saved

            var nodeId = sender.Id;

            var node = new CMSNode(nodeId);

 

            //parent nodeId

            var parentNode = node.Parent.Id;

 

            //continue if this is a Media object

            if (node.nodeObjectType == Media._objectType)

            {

                string fullImagePath = new Media(nodeId).getProperty("umbracoFile").Value.ToString();

                string fullParentImagePath = "";

 

                Media parentMedia = new Media(parentNode);

 

                string sourceFile = HttpContext.Current.Request.MapPath(fullImagePath);

                var fileName = Path.GetFileName(fullImagePath);

 

                //parent already has an image created

                if (parentMedia.getProperty("umbracoFile").Value.ToString() != "")

                {

                    fullParentImagePath = parentMedia.getProperty("umbracoFile").Value.ToString();

 

                    var destinationFolder = Path.GetDirectoryName(fullParentImagePath);

 

 

                    string destinationPath = HttpContext.Current.Request.MapPath(destinationFolder);

 

 

                    //delete file is already exists

                    if (File.Exists(Path.Combine(destinationPath, fileName)))

                        File.Delete(Path.Combine(destinationPath, fileName));

 

                    //copy file

                    File.Copy(sourceFile, Path.Combine(destinationPath, fileName));

                }

                else

                {

                    int parentFolderId = parentMedia.getProperty("umbracoFile").Id;

                    string mediaPath = "/media/" + parentFolderId + "/";

                    string parentPath = HttpContext.Current.Request.MapPath(mediaPath);

 

                    //create directory

                    if (!Directory.Exists(parentPath))

                    {

                        Directory.CreateDirectory(parentPath);

                    }

 

                    string newFilePath = Path.Combine(parentPath, fileName);

 

                    //copy file into directory

                    File.Copy(sourceFile, newFilePath);

 

                    //set property value for initial image

                    parentMedia.getProperty("umbracoFile").Value = mediaPath;

 

                }

            }

        }

Thanks. That is indeed a bit simpler.

I was working from an image resizer plugin I found the source code for (Dascoba.Umb.ImageResizer), and had yet to look at simplfing the code, so thanks for doing that :)

Your updated code worked fine.

I might look at extending this further so I have a property on the Folder media type that allows you turn on or off the upload to parent feature.

btw, how do you post the code block like you did?

 

In the editor there is a dropdown. Select "Preformatted" and you can write in a code block :).

Jeroen

Response.Write("Ah, as easy as that!!");
Response.End(); 

is working on a reply...