Realtime creation of csssprites in .NET - asp.net

Has anyone created a 'realtime' csssprite generator for .NET ?
I want one or more directories of images that get loaded at runtime and the css is automatically generated.

Yes, there is. You'll find it at
http://www.codeproject.com/KB/aspnet/cssspritegenerator.aspx
Unlike Microsoft's attempt at sprites, with this package you don't have to change the way your images are stored and how they are shown. You simply add the .dll and configure the package in your web.config with a few lines.
This package also lets you resize images on the fly, compress them and other good things.

Is this what you are looking for?
It's the closest I found to a baked solution.

Ok finally something official...
Not clear yet if it'll make it into the core ASP.NET framework but here's a Microsoft codeplex project for csssprites :
http://aspnet.codeplex.com/releases/view/50869
if you like it - use it - or just like the idea then add a comment. I think this would be a great thing to have in the ASP.NET framework. Have not personally used it (I had to invent the wheel myself) but its got good reviews.
It includes the following components:
API for automatically generating sprites and inline images
Controls and helpers which provide a convenient way of calling into the API
Features Added in Second Release:
A CSS linking control for Web Forms (selects the proper CSS file for the user's browser, but does not display an image)
Using custom folder paths other than App_Sprites
Changing the tiling direction of sprite images
Merging the generated CSS with a user's own CSS
Features under consideration for future releases:
Automatically selecting the most efficient sprite background colour
Automatically minifying the rendered CSS
Compiling against .NET 3.5

Related

Rewriting binary links to use CDN

CDN integration seems to be a hot topic among Tridion crowd. But, somehow, available discussions mainly revolve around pushing content to/fro CDN. What i'm specifically interested is:
What will be the proper way of modifying/prefixing inline images outbound links to use CDN?
The simplest way to go would be to create some post-processing TBB, operating on Output item, and place it inside 'Default Finish Actions'. Though, doing this on CD side would seem to be more correct, ain't it so?
EDIT
Consider fancier case: what if not only I want to modify image paths, but wrap the whole image links into ASP.Net controls. Where do I do this?
EDIT 2
So far, implemented tag to ASP.Net control replacement via TBB. Went smooth, only needed to keep an eye on the following subtle matters:
Consider CSS inline styles (i.e.: background-image: url(..))
New TBB needs to be placed after any link-manipulating logic (e.g.: Extract Binaries from Html, Publish Bnaries in Package, Link Resolver)
The quickest and most robust implementation is probably with a simple string replacements (in contrast to regexp's or XML parsing)
To keep standard "Preview" logic intact, some condition is necessary to trigger the logic
If you decide to go with ASP.NET controls for your CDN-hosted images, you may consider these phases/steps:
write a TCDL tag (e.g. <tcdl:image id="..." path="...") on CM during rendering
write a TCDL TagHandler implementation that transforms the TCDL into an ASP.NET include during deployment
write the ASCX control to do the CDN lookup proper when the visitor requests the page
I'm not sure if both step 2 and 3 are needed. You might also simply write the CDN path during the deployment phase (step 2 above).
At the same time I'd expect you to upload (updated) images to the CDN using a deployer extension, so that it also happens during phase 2.

A complete image manupulation solution in classical ASP

Does anyone have a past experience on implementing a complete image manipulation solution in classical ASP? I need a solution where a user can:
Upload an image
The uploded image is stored on the filesystem (inside or outside wwwroot)
The image is displayed in the browser but it is resized... on-demand
The on-demand resizing is my main problem. In PHP I could use phpThumb library that allows me to specify a filename and max width/height in a query string. The library resizes the images accordingly, in addition, it caches the copy of the image so that next time the same image with same width/height is requested it is served from the cache.
Can I implement such a solution in classical ASP, if possible with open-source components? ImageMagick?
It would appear that ImageMagick has a COM+ component that can be used for this purpose.
Another mature (though I don't think it's free) library that's commonly used for this is AspJpeg.
ASP.net has build-in functions to manipulate images, since most servers serving ASP classic have some version of ASP.net installed, you can rely on it to do the work.
ie:
<img src="resize.aspx?file=/gallery/photo1.jpg&w=300&height=400" />
This post is a little old, but we recently faced the same issues regarding resizing via Classic ASP.
We found a solution which used the VB.NET route, but it didn't do everything we wanted so we adapted it to include features to resize, crop, pad (with colour) and display the resulting jpg out to the screen and / or a file.
We've uploaded our efforts here in a zip file with the script and an example asp file with instructions: http://easierthan.blogspot.co.uk/2013/02/code-tip-3-classic-asp-image-resizer.html
With regards to uploading, we used http://www.freeaspupload.net which seemed to work very well.

How to share the same style between few websites?

There is a website with a master-page, set of css-files,... menus. It is necessary to implement another one that will have same (or at least very similar) look-and-feel. And also it is necessary to have look-and-feel in sync.
I've tried to find for appropriate solution (at least idea, not implementation) in the internet but didn't find anything.
My idea is to use an additional project (class library) that will contain an implementation of the master-page and all its comnponents (menus, images, css, etc will be stored as resources), this project will be refferenced from all web-sites that need to sare look-and-feel.
Do you see any best approach or any pitfalls in my idea?
Thanks.
I would recommend a class library for your masterpage, but I would put images and css on a web server and make links to it from your sites with absolute paths.
Maintaining images, css and menus (? menu entries?) in resources seems a lot of pain to me.
Would it not be enough to simply share a common css file and the images needed? That's what css files are for.
You probably could set up version control to have every project include the same css and image files.

Round images with asp.net

Can i create round images with asp.net? Please advise. My requirement is to upload any image and get a rounded version of that created bu asp.net. I am using .Net framework 3.5, visual studio .net 2008.
Many thanks in advance.
Drawing and image manipulation with GDI+ is straightforward as the other answers suggested.
But please note this is an unsupported path, as stated by this MSDN article (emphasis added by myself).
Classes within the System.Drawing namespace are not supported for use within a Windows or ASP.NET service. Attempting to use these classes from within one of these application types may produce unexpected problems, such as diminished service performance and run-time exceptions.
I have successfully used GDI+ within an ASP.NET application several times, and have never faced any problems, but I guess it's just good to know.
You can do it with GDI+ at least. A short answer: use .Graphics.SetClip() to set your desired shape and then draw you image. Everything outside the clipping region will be cut away.
Here's an article disussing a method that will bring smoother corners (and even softed edges if you like): http://danbystrom.se/2008/08/24/soft-edged-images-in-gdi/
First of all you have to find yourself a library that can do such thing to an image.
I've found sth on CodeProject http://www.codeproject.com/KB/GDI-plus/rounded_corners.aspx but I'm not sure if this is going to work with asp.net (that's basically a thing that you should google).
Then when you have a library you do your job with uploading a file and when it's uploaded you check the mime-type, try to open it and use the library.
You haven't mentioned whether this is web or not, but have you considered rounding the images with css and/or javascript? Once you remove that image detail you can't get it back! What if the client wants a different clip shape later?

Any way to analyze the size of a SWF built in Flex?

I have a Flex application that seems larger than it should be. There is a lot of code in it, but not a lot of assets and it just seems large, but I'm not sure how to go about figuring out where the space is going.
I know about the –link-report option, but it only gives the sizes of externally linked library classes. I'm very interested in seeing a report of the sizes of all the classes and resources in my application and it would be a huge bonus if I could also view their dependencies. Not knowing how the code is compiled I'm not sure if this is even possible, but it seems like it should since the compiler can give me the sizes of individual classes linked from other libraries.
I did some searching around, but couldn't find anything helpful. Everything points to the optimization techniques of modularizing and externally linking libraries, which I understand and will implement, but I would really love some more detailed reports of what my compiled application looks like.
To be clear, I'm not really interested in tips on how to reduce the file size, just a report on what is used for and which classes are referencing what.
Anybody have any ideas?
CORRECTION - The link report does show all classes. My particular project in Flex Builder had several CSS files set to compile to swfs. My link report for the main app was being overwritten by these css compiles!
The link report actually contains all compiled classes and not just the ones in external libraries (at least with the Flex 4 SDK). There is an xsl available that will generate an html file of the link report so it is easier to read.
Check this post: http://blog.iconara.net/2007/02/25/visualizing-mxmlcs-link-report/
There is a command-line utility called flash.swf.tools.SwfxPrinter in swfkit.jar, which comes with Flex Builder (or the plug-in or the SDK) and which you can use to analyze information about class sizes. Joe Berkovitz wrote some good instructions on how to make use of it in his blog, and he was working on an AIR-based GUI tool that leverages it, but I'm not sure if he ever published the tool. Still, you can use his instructions to leverage the utility directly from the JAR.
I found a handy little AIR app that really helps organize the link report info.
http://www.kahunaburger.com/2008/03/08/air-link-report-visualizer/
It's old but still works very well.

Resources