Dynamic Image Generator

[Battler45]

Vihar,

This is a bit of a detour, but here goes:

Quite a while ago (nearly a year ago now) I worked with a programmer to develop a "dynamic image generator" -- the original job description was as follows:

"The job is to create a C#/.Net web application (for ASP.NET 2.0 / Windows Server 2003) that will dynamically create a .png image by modifying a base image using several parameters input by the user.

I have attached a sample of the image to be used as a base image.

I need to be able to pass four color parameters (in hex format) into the application via a querystring. So, the completed application should be able to receive an URL like this:

http://www.mytestapp.com/button_view_details.aspx?buttoncolor=000000

And return the attached image. (Parameters may be different for each image.) I can provide a layer-separated photoshop file (.psd) for the attached image if necessary. "

The programmer seemed very competent and was able to complete the job successfully. He actually built an application which would produce dynamic images for four separate images. From what I understand, the application would accept the query string parameters and create the images and then, once a particular configuration had been created for a given image, it would cache that version on the site so that the next time the same image was requested, the cached version would be served by the website instead of generating a new image from scratch each time.

For a number of reasons, I've never implemented the code this programmer created.

So, would you mind taking a look at this code for me and letting me know first, do you understand the gist of what it is trying to do and, second, what do you think of the overall quality of the code?

I've attached four files to this ticket. The following three each contain separate solutions, one for each image (the FW_BK_Buttons file is set up to create two images), for a total of four images:

• FW_BK_Buttons.zip

• Tabs_Background.zip

• View_Details_Button.zip

The final file, Dynamic_Images.zip, contains a combined solution for all four images. Unfortunately, I only have the compiled version of the solution and don't seem to have uncompiled solution, and the programmer is no longer reachable.

Once you've assessed it, can you let me know what your comfort level would be with reproducing something similar for a few more images in the future?

The purpose of this is that currently our search tools have a number of standard images that are used across all sites, but which much be matched by hand to the color scheme of the site in question. So, each time we set up a new site we have to go into Photoshop to generate a new version of each image by hand.

This type of application would circumvent that completely by allowing us to generate the images simply by feeding a few parameters into a query string for each image, and so it would be very helpful in automating our production process.

FYI, you can get a sense of how the current handlers work by viewing the following:

http://images.sierrainteractivemls.com/fw_button.axd?ic=ff0000

http://images.sierrainteractivemls.com/bk_button.axd?ic=ff0000

http://images.sierrainteractivemls.com/view_details_button/view_details_button.axd?ic=333333&tc=ff0000

http://images.sierrainteractivemls.com/tabs_bg.axd?ic=010080

I hate to interrupt your work on the search application, but if you can take some time at least to get a sense of this and let me know what you think, I would really appreciate it.

[EDIT] Once you have gotten a sense of it, I think it would make most sense to continue working on the search application and get that finished, but at that point we might come back to this to work on a few additional images.

Thanks.

Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihar,

Through some sleuthing I was able to track down the developer who created the original project. It has been quite a while now since he worked on it, and, since he was not quite sure what I was asking for, he zipped up everything he had and sent it over to me. I've attached what he sent. I looked through it but am not sure if the solution that combined all images into a single project is present in these files, but I'm hoping it will be.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

1-- The background color is an optional parameter and since it is not passed, the images are generated with transparent background. I am not sure how the background color is applied to these images. I believe the background color appears due to "background-color" set in the "blog_box" class.

2-- The background color is an optional parameter in this image as well.

3-- At present the border color parameter (ibc) value is set to green color (body bg color). If the value of ibc parameter is changed to ffffff (background-color property value in the slider_items class), the images should align properly.

4-- I've increased the height of the "home_sidebar_04" by 1px.

5-- I've updated code to generate another version of bg_body image. The name of the image is "bg_body_2" and it accepts two parameters, top color (tc) and bottom color (bc).

Please check the image at http://images.sierrainteractive.com/standard/g/sierra-images.axd?name=bg_body_2&tc=c9cdcc&bc=000000

6-- I've updated code to smoother the border of the circle.

Please let me know your feedback on above changes.

Thanks

Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Ben,

I've merged Image Generator projects into a single solution and have uploaded the same on the development site.

For now I've created a single handler "sierra-images.axd" and added a new query-string parameter "name" to identify images to generate. It will have one of the following values:

• button_bk = Backword Button

• button_fw = Forward Button

• model = View Details Button

• tabs_bg = Tabs Background Color

So the resultant urls would be something like,

http://client.sierrainteractivedev2.com/sierra-images.axd?name=button_bk&ic=ff0000

http://client.sierrainteractivedev2.com/sierra-images.axd?name=button_fw&ic=ff0000

http://client.sierrainteractivedev2.com/sierra-images.axd?name=model&ic=ff0000&tc=0000ff&isc=00ff00&ibc=ff00ff

http://client.sierrainteractivedev2.com/sierra-images.axd?name=tabs_bg&ic=ff0000

Please check this and let me know your feedback.

Please note that at present this works only if you are logged into SierraInteractive-1 database or not logged in at all. I am working on making this available irrespective of the sub-domains. I'll update you on the same afterwards.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Ben,

I've explained the dynamic image generator changes to Vihang, and have also explained a possible approach to merge the existing projects into single solution. My thought is that since we are anyway going to create a new solution, and will be adding new images in future, a better approach would be to create a single image handler that could be used for serving all such images.

For example, assuming we've created sierra-images.axd handler we could server various images as follows:

http://images.sierrainteractive.com/sierra-images.axd?name=back_button&ic=ff0000

http://images.sierrainteractive.com/sierra-images.axd?name=model&ic=ff0000&tc=ffffff&isc=00ff00&ibc=0000ff

This will allow us to add as many images without having to introduce new handlers. Please let me know your thoughts.

As for serving images via a different url, http://images.sierrainteractive.com/imagename.axd - it would be very much possible and would require very few changes. Pls note that we'll however need to setup a new ASP.NET website to server dynamically generated images. The above url can be bound to this new website to server dynamic images.

Thanks.

Posted by Shah Vihar(unfuddle username: vshah)

[Battler45]

Ben,

I checked the code for dynamic image generation. It is fairly good and quite understandable. I've understood the gist of it and would be comfortable in implementing similar functionality for additional set of images.

Unfortunately the code you've provided appears to be of older version. From what I've understood, the "Dynamic_Images" project contains consolidated code for generating all four types of images. My guess is that after implementing code for all four separate images, the programmer would have implemented the "Dynamic_Images" solution to serve dynamic images from a single place. If and when I work on adding similar functionality for new set images, I think it would be better create a single code-base to dynamically generate all such images. It would be easier to maintain.

Thanks.

Posted by Shah Vihar(unfuddle username: vshah)

[Battler45]

Ben,

I've updated code to remove GAMMA chunk from the png images. Please check the same and let me know if it works.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Vihang,

Just want to show you I've got all of the images into the detail page on the development site here:

http://hometoindy.sierrainteractivemls.com/property-search/detail/25/21101712/20-lansdowne-lane-carmel-in-46033/

They're working great (even the mouse-over of the tab toward the middle of the page). Just need that right tab bg and we will be all set.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

If we are going to have number of images then it would be better to store them in separate folders. I've made necessary changes and uploaded the code.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Vihang,

I've looked briefly at the site creation form and so far it looks really good. I know I will have some feedback for you, but I am running out of steam tonight and so I wanted to get this task to you first so that you can begin working on it as you have time.

This task will be similar to the dynamic images you have already been working on, but with a slightly different focus -- all of the images in this set correspond to a particular Standard Site design. I've attached two zip files to this note -- one containing PSD files, one containing Images. All of them correspond to files used on this site:

http://dev.wardlawrealestateteam.com/

We refer to this design as our "Standard Site G" design, and our goal is to automate all (or, as many as possible) of the images used to create this design.

So, in creating these images, can you set them up at something like the following URL:

http://images.sierrainteractive.com/standard/g/sierra-images.axd?.....

This type of URL would be useful to us on the production side to easily differentiate which images correspond to which design, but if it's not possible, it's okay to set them up using the same controller.

I believe that most of these should be self-explanatory, but I do have a few notes & questions for you:

1 - Some of these images are currenlty formatted as .jpg and .gif files on the site. Is it possible to dynamically create images of these types? If not, it's fine to create them all as .png files.

2 - In the Images zip file you'll see that home_sidebar.psd corresponds to four separate image files: home_sidebar_01.gif, home_sidebar_02.gif, etc. (up through 04). If you need a separate PSD file for each of these, just let me know. In creating these images by hand (as I've been doing so far), I use the "slices" feature of Photoshop in connection with the "Save for Web" functionality. Let me know if you have any problems with that.

3 - The same type of situation is true for the home_slider_bg.psd file, so please handle it accordingly.

4 - As much as you can, please keep the formatting of the dynamic images as close as possible to the formatting you see in the images in the Images zip file. Meaning, if an image in the Zip file is formatted on a transparent background, please create the dynamic image the same way. If the image is formatted using a "Matte" color, it would be important for the dynamic image to be formatted using that same color. If the image is formatted using a solid background, the dynamic image would need one as well.

5 - We will need the colors of the different elements of each image to be configurable via querystring parameters as usual. So, for example, in this image: http://dev.wardlawrealestateteam.com/res/images/call_us.gif, we would need to be able to configure the background color, the circle color, and the phone icon color.

Please let me know if you have any questions. Thanks! Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

I have tried to apply gradient effect on the images. However, the effect is not identical. I also tried to programmatically apply drop shadow but the result was not satisfactory. So I have created a separate shadow image, whose color would be replaced programmatically and merged with the resultant image.

You can check these images at the following URLs:

http://images.sierrainteractive.com/sierra-images.axd?name=view_properties&bc=2d467f&ic=b32416&ibc=ffffff&isc=000000&tc=ffffff

http://images.sierrainteractive.com/sierra-images.axd?name=update_map&bc=2d467f&ic=b32416&ibc=ffffff&isc=000000&tc=ffffff

Please let me know your feedback.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Ben,

I've updated code to dynamically generate images for "Standard Site G". I've also updated the document for these images. Please check the sheet "Standard Site G" for example links.

Please note that,

1-- I tried to dynamically create .gif images but the quality of those images was not good hence all the images are now created in png format.

2-- In the "img_send_bot" image, border is not generated accurately. So, for now border is not added to this image. I am looking into this.

3-- I've tried to make accent color in the "img_find_home" and "img_worth" image configurable. However I am bit skeptical about the quality of end result. Could you please ask the designer to create separate image for the shading effect?

Please check these images and let me know your feedback.

Thanks. Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Vihang,

1 - Good point! Please use the attached image instead. Given two color inputs for this image, is it possible to dynamically create a gradient as in this example?

2 - I've attached the PSD for slideshow_body.jpg

Regarding your additional queries:

1 - Yes, correct, sorry about that. For that image, the things that need to be configurable are: 1) the blue background bar with gradient 2) the white square with gradient. For the blue bar, if you could set it up so that it receives one color input, and the opacity gets less from the bottom of the bar to the top, that would be great (as opposed to two separate color inputs). If you can only do it with two color inputs, though, that's fine. Same goes for the white square.

2 - No, actually bg_header.psd should be output as only one single, full-size image -- same goes for both bg_header.png and bg_title.png. The only one that will need to be output as four separate images would be home_buttons.psd -- this will need to be output as four individual images.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

Excellent, it's working great, thanks for figuring this out! Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

I've published the changes made for the Standard-Site-H images. Please check the sheet "Standard Site H" in document for image links and let me know your feedback.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Vihang,

Since Vihar will most likely be busy with the search application for a number of days yet (it will be quite complicated), would you be willing to take the Image Generator files I've sent (attached above) and see if you can combine them into a single project / solution, and then post them to a new page on the development site where they could be accessed and tested?

As we move forward, if you and Vihar feel comfortable with the image caching and that it will not place too big a load on the server, there will be a number of these types of images that we would like to use in the application to help automate our production process. So, if you can combine these existing files into a single solution, and build it in such a way that additional images could be added easily, that would be ideal.

Also, once we get this up and running, we will probably want to host the images at a URL like "http://images.sierrainteractive.com/imagename.axd" or something like that, rather than serving them from "http://client.sierrainteractive.com" -- I'm not sure if that would impact your design of the project. If either of you have any thoughts or comments about that, please let me know.

Thanks Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

RE #79 and #80 - leaving aside the Cloudflare point, you are correct in your hypothesis in that the index / statistics haven't been getting rebuilt since long time - almost two months! This may very well be due to the issue we had with the SoftLayer server a couple of months ago. It appears that in moving the server to new chassis, the SQL Server settings were reset. The index / statistics rebuilding functionality is based on SQL Agent, which was disabled up until now. I've enabled it so the index / statistics should be getting rebuilt from today onwards. Pls note that this operation is very resource intensive so I haven't started it manually. I'll do so after 3-4 hours (around 2 AM EST).

My apologies for not monitoring this periodically. What is really embarrassing is that I didn't check it for such a long period. I think this would be a good time for me to prepare a checklist of tasks to monitor periodically (perhaps weekly or bi-weekly). I'm listing all those tasks here.

1 -- Check index / statistics rebuilding status on the SoftLayer and DEDR65 servers.

2 -- Check Lead-distribution Windows-service status on DEDN173

3 -- Check to make sure that automated backups are moved to the Crystaltech updater server

4 -- Check CAA and Updater logs for possible issues.

Pls let me know if I missed other such tasks.

Thanks.

Posted by Shah Vihar(unfuddle username: vshah)

[Battler45]

Vihang,

Yes, those look great. They will work as-is, but I am still curious about the gradient issue as that type of effect is something we will probably need on a few other images.

Since you are able to create separate images and then merge them together into a single image, I wonder if the same technique could be used for the gradient. For example, if you look at any of the big green buttons in our admin area ("Add New Lead", "Add New User," etc.) you will see that there is a gradient applied on those buttons, but the gradient is actually a separate image.

There is a background color in the image, and then the transparent-PNG gradient is applied on top of the background color, itself a background image below the text.

So, is it possible the gradient in these situations could be created as a separate file with transparency and then merged with the other elements to create the final image?

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

As you have time, I've prepared another set of PSD files and Images to be used in creating dynamic images for the next standard site template. Please let me know if you have any questions about these once you've reviewed them. These will be for our "Standard Site A" and so if you can use the same folder naming convention as previous, that would be great.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

It appears that IE does not support (or supports but other browsers don't support) the GAMMA Correction data that is added to the PNG images. As a result these images look darker in IE. Please check the following links for more details on this:

http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx

http://www.biorust.com/tutorials/detail/231/en/

http://911-need-code-help.blogspot.com/2011/03/png-color-problem-in-ie.html

I tried to dynamically generate bg_body image as jpg/gif image but the color oddity was there. when I removed GAMMA chunk from the PNG image (using TweakPNG) it fixed the problem. I'll look into dynamically removing GAMMA chunk when the PNG image is saved. I'll update you more on this tomorrow.

Thanks

Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Ben,

I've updated code to dynamically generate search widget images. Please check the following urls:

http://images.sierrainteractive.com/sierra-images.axd?name=bg_qs_inside&bc=810303

http://images.sierrainteractive.com/sierra-images.axd?name=qs_h2_arrow&ac=b1b1b1&arc=ffffff

http://images.sierrainteractive.com/sierra-images.axd?name=bot_search&ic=eeeeee&tc=000000

Please let me know your feedback.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Ben,

It was not possible to dynamically generate "Back To List" image using the original image you had provided. The idea was to replace text, border and background colors with the supplied colors. But it wasn't possible to replace text, border colors in the original image as those were drawn in different shades. So I've created separate images for text, background and border such that their colors can be easily replaced. The code individually replaces colors in each of these images, and then merges them into a single image.

The four images are present under the C:\Inetpub\client-dev.sierrainteractive.com\BaseImages\back_to_list folder on the server.

I compared the original image and dynamically generated image. There are some minute differences especially in the way border is drawn. But the overall appearance remains similar. You would be in a better position to judge the output. I've updated the development site for the same. You can check the same at the following URL:

http://client.sierrainteractivedev2.com/sierra-images.axd?name=back_to_list&ic=ffffff&tc=1158a0&ibc=cecece

Please check the same and let me know your feedback.

Thanks. Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Vihar,

I'm satisfied that the problems we were experiencing earlier regarding dynamic images not displaying has gone away -- I have not seen it in the past couple of weeks since we made these changes, so I'm going to go ahead and close this ticket

Thanks.

Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

I've updated code to dynamically generate Standard Site A images. Please check the document for the same and let me know your feedback.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Ben,

I've updated code to dynamically generate quick-search images.

Please check these images at the following URLs:

http://images.sierrainteractive.com/sierra-images.axd?name=qs_title&bc=ffffff&ic=954305&tc=ffffff&isc=000000

http://images.sierrainteractive.com/sierra-images.axd?name=qs_street&bc=ffffff&ic=954305&ibc=fefee1&tc=ffffff&isc=000000

http://images.sierrainteractive.com/sierra-images.axd?name=qs_mls&bc=ffffff&ic=954305&ibc=fefee1&tc=ffffff&isc=000000

http://images.sierrainteractive.com/sierra-images.axd?name=qs_agent&bc=ffffff&ic=954305&ibc=fefee1&tc=ffffff&isc=000000

http://images.sierrainteractive.com/sierra-images.axd?name=qs_zip&bc=ffffff&ic=954305&ibc=fefee1&tc=ffffff&isc=000000

Please note that the parameter "bc" (background fill color) is an optional parameter. If not specified, the image will have transparent background. Please see "Dynamic Image List" document for more details.

Please let me know your feedback.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Ben,

Yes, it would work. As we have used similar technique for gradient effect in some other images.

Thanks. Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Vihar & Vihang,

Before you spend too much time looking into this -- a bit of good news: it seems that the problem was somehow related to Cloudflare. After I spent all of that time looking for web server issues and database issues, it occurred to me that we were only seeing these problems on sites running through Cloudflare at the Pro Level. So, I tried de-activating Cloudflare on the problem sites. It took about 10 or 15 minutes, but now all of the sites seem to be working fine, and the map search pages seem to be loading as quickly as they ever have.

So, I've submitted a ticket to Cloudflare to see if they can shed any light on this issue. I do think we are fine for the moment, though, and that there is currently not any need to investigate this further.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

I've updated code to dynamically generate Standard Site I images. Please see the updated document for example URLs.

Please check these images and let me know your feedback.

Thanks

Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Vihang,

I'm working on production of a new standard site for template G, and it appears we are having a small problem with one of the dynamic images. If you look at these two images:

http://images.sierrainteractive.com/standard/g/sierra-images.axd?name=home_sidebar_01&bc=dfdfdf&ic=295C95

http://images.sierrainteractive.com/standard/g/sierra-images.axd?name=home_sidebar_04&bc=dfdfdf&ic=295C95

You'll see that the first one (sidebar top) contains a small pattern overlay (small dots) which is absent from the second one (sidebar bottom). Could you replicate the same pattern on the bottom image as on the top image?

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

It's not a big deal, but when you have time can you check out this image:

http://images.sierrainteractive.com/sierra-images.axd?name=model&ic=ff0000&tc=ffffff&isc=00ff00&ibc=0000ff

I believe the guy who built this functionality originally did work some with gradients and was able to make them work somehow. In that sample image, it looks like a gradient is being applied to the red area of the image.

Could something similar be applied to the images I sent yesterday? i realize the effect would not be identical, but it would probably still work.

Also, if you could copy the "drop shadow" effect from the View Details image to the ones I sent yesterday (in order to reproduce the outer glow effect) that would be great.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang & Vihar,

One thing I've been noticing more frequently lately is that the dynamic images don't seem to be loading properly in many cases. Often, when I visit a client site, I will see a broken image where a dynamic image is meant to be.

In every case, when I go to DEDN173 and restart IIS, it fixes the problm, but it seems to keep recurring. I'm not sure if this is due to lack of memory on the server, or high disk usage, or what. Do you have any thoughts on what might be causing it and how we might fix it?

Would it help if we were to move this particular application to the updater server? Since that server receives a constant and steady amount of traffic during the day, perhaps it would be stable and produce fewer errors of this type?

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

I've been working to update a new design to use our Standard Site format -- can you help me to convert another round of static images to dynamic images?

These will be for standard site I. I've attached a zip file to this post, and you can compare the PSD files in the zip file to the actual images used on this development site:

http://angiekoss.sierrainteractivemls.com/

A number of the images use a gradient, and in all cases I have tried to use a solid background color with a gradient that fades from white to transparent to make creation of the images simpler (we only need one color input vs. two). A number of these images also use a small bevel -- I know we have had difficulty with that in the past, so please let me know if it's a problem.

There will probably be one or two additional images coming for this template in the next couple of days, but I wanted to go ahead and give you these in case you'll have time to get started on them sooner. Please let me know if you have any questions.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

Sorry to hear about your computer problems -- those are never much fun!

When you get it all sorted out, can you work on a few more dynamic images?

If you look at this page:

http://weirproperties.sierrainteractivedev.com/property-search/mls_detail_2.asp

You'll see we have a few problems with images. The images in the "Actions" box (Request more info, etc.) have the wrong text color, and they are formatted as gifs matted on a white background.

Included in the attached zip is the PSD file for all of these images -- can you make them dynamic, accepting as parameters a text color and an (optional) background color?

If you look at the tabs over the main data area (Overview, etc.), you'll also see the main selected tab is gray, but matted against a white background. Also in the attached zip you'll find "map_tabs.psd" -- can you take the first tab in that file and make it dynamic, accepting parameters for a border color (if possible), a tab background color, and an (optional) main background color?

We'll actually need two dynamic images in this case -- one to replace bg_left_cur_tab.gif, and one to replace bg_right_cur_tab.gif (both of which are also in the zip file). I have a feeling the border may be difficult for you -- if so, it's fine to force that to the same color it is in the current files, so that only the tab color and the main background color would be dynamic.

Thanks.

Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

This looks perfect, great work, thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

Unfortunately the latest source-code is almost same as the one uploaded earlier. There isn't any source-code available for the consolidated version. Posted by Shah Vihar(unfuddle username: vshah)

[Battler45]

Ben,

I have added pattern overlay on the sidebar bottom image.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Vihang,

Looks good. One more small request on the sidebar image, if possible: for the main image background color (not the overall background, but the colored background of the image -- i.e., the light blue area in this image: http://images.sierrainteractive.com/sierra-images.axd?name=sidebar_bg&bc=ffffff&ic=caddf6&ibc=cacaca) would it be possible to take the color entered and display it at 25% opacity on a white background?

So, for example, if the ic parameter in the referenced image were 000000 (black) the actual image would display a light gray color (or black at 25% opacity).

This would save me the trouble of needing to add an additional parameter to the MLSSitesCSS table in the admin area.

(Of course, this same thing would need to be done in all places that this image color paramater appears.)

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

I’ve update sidebar image code. Please check this and let me know if it achieves the purpose.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Vihang,

When you have a chance, can you add a couple of new dynamic images for Standard Site G? The images will be used here:

http://www.bandbgibsonrealty.com

The images will both be for the sidebar, and of the same type as the "Facebook" and "What Is My Home Worth?" images you see there now. Can you use the same PSD file that you used for the Facebook image?

2 - "Search for Foreclosures" -- this will be the same as the Search For Foreclosures button you see there now, with the usual parameters for making it dynamic. I've attached a PSD file for this image.

Thanks.

1 - "Follow Us on Twitter" -- this will be identical to the Facebook button, except that the logo will be the attached (you may need to resize it a bit), and the text will say "Follow Us on" on the top line, and then "Twitter" on the lower line. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

The images so far look great, thank you. The only one we need to revise is one I didn't provide you with enough detail on -- the main nav image. For the nav.psd file, we only need the background image with the gradient applied -- I've converted it so that the text is applied on top of the background image.

I've also prepared the remaining images that we will need for this template. I believe they are all fairly straightforward, but a few notes to clarify:

1 - For main_content_bg.psd, it's fine to set it up with a single color input that fades the gradient to transparent, or two accept two color inputs and fade the first into the second, whichever is easier.

2 - For the nav_sep.psd file, what I'm hoping you can do is accept a single color input parameter, and return this at 33% opacity as in the PSD file.

3 - The sidebar.psd file may be a bit tricky -- it's essentially the same as a few of the other images you've done (footer_bg.psd, header_bg.psd), the differences being that in this image the gradient is reversed (lighter part at the top), and there is also a semi-transparent photo layer that has been rendered in black and white. The photo layer will always be the same regardless of the color input, and so I'm hoping you'll be able to merge the photo layer into the main layer once that's been rendered. Please let me know how it goes.

4 - For the slider_left_arrow.psd and slider_right_arrow.psd, both of these only need to accept a single color input. The arrow color will always be white, and the background color of the top image will always be the same color gray as in the PSDs.

I think that's it -- please let me know if you have any questions. And great job on the images so far -- this is the current site with the dynamic images in place:

http://angiekoss.sierrainteractivemls.com

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

I've added a new parameter "itc" (inner text color) to set text in colored area for the sidebar_top image.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Vihang,

Thanks -- I will test it. Don't worry about making it compatible across client2. and client3. because we will eventually move it to a new URL anyway. These images will all work across all clients and DBs and will never be associated with just a single site.

Would you feel comfortable at this point working on a new image? The first one I would like to try would be one you see on this page:

http://hometoindy.sierrainteractivemls.com/property-search/detail/25/21019841/3555-sedgemoor-circle-carmel-in-46032/

The "Back to Results" button at the top -- I would like to be able to set the background color of the button and also the text color and the border color. Do you think that would be possible (leaving the icon intact no matter what other colors are chosen)? What would you need from me to make that work -- a .png file or a .psd file with the original layers?

thanks.

Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

See attached. If you do not have the font to edit it in Photoshop (or if you do not have Photoshop) let me know.

Also, there may be elements of this image that make it difficult for you to convert to a dynamic image in the way that I'm hoping. To confirm, what I'd like is:

1 - Customizable background color (white in this image)

2 - Customizable text color (but text will always be same font & same size)

3 - Customizable border color (gray in this case)

As I recall from working on the project with the previous programmer, the rounded edges were sometimes difficult to get looking good in a dynamic image. Also in this case, the border is very close to the edge of the image but it is not directly at the edge -- and the vertical gray line as a gradient fade at both ends.

So, in reviewing this and attempting to work on it, if there are any elements that are making it a lot harder than it would otherwise be, let me know and I will try to modify the design to make it easier.

Thanks.

Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

Ah, I see. The current two images that you are using look fine and I will put them into production. Regarding future images, we can see how it goes. I will send you a few more later today.

One question regarding planning for the future -- currently we are only dealing with a small number of images and a small number of clients. Eventually we hope to be dealing with a larger number of images and a much larger number of clients.

With that in mind, anticipating that at some point we may have thousands of cached images, would it be prudent to begin now to separate cached versions of each separate image into a separate folder on the server (if you are not doing so already) in order to improve performance of web server in scanning for an existing version of cached images?

If you don't feel there would be a performance impact, even with a larger number of images, then it's fine to leave it as-is.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

I've got a few images that we would like to have you make dynamic when you get a chance. I've attached the PSD files. There are three images:

• Main background: The main background only needs to accept one color.

• Arrow / Disk: The gray disk with the arrow should accept two parameters if possible -- one for the background and one for the arrow. The arrow color should be optional and forced to white when the color is not specified. If the arrow looks too pixelated, please force that to white and only accept a parameter for the background color

• SEARCH button: The search button should accept two parameters, one for the background image and one for the text. If the text color is not specified, it should default to black.

These are for a widget like what you can see here:

http://mainstreetrealtor.sierrainteractivemls.com/property-search/widgets/quick-search/narr/4/?bc=631211&ac=c7c7c7

So, please use "bc" for the main background color, and ac for the arrow background color, and then whatever you want for the arrow itself.

Please let me know if you have any questions.

Thanks.

Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

This one is a priority, but hopefully it should be very simple. When you have a chance, can you convert the following to dynamic images:

1 -- http://hometoindy.sierrainteractivedev.com/property-search/res/images/detail_2/bg_right_title_text_content.gif -- this is the short red horizontal line you see on this page: http://www.hometoindy.com/property-search/detail/25/21044808/9565-east-82nd-street-indianapolis-in-46256/ next to "DESCRIPTION" in the Overview area.

It's fine to format it as a png instead of a gif, and it would only need 1 input for color. Please call it "det_data_border_hor"

2 -- http://hometoindy.sierrainteractivedev.com/property-search/res/images/detail_2/bg_text_content.png You can find this image on the same page; it's the vertical red line that connects to the short horizontal image above. Again, only one input is needed (for color). It is basically just a 1px wide vertical line of a single color.

Please call it "det_data_border_vert"

Because these images are so simple, I'm sure you must be wondering why we need dynamic images at all, as opposed to just creating them through CSS. Having them as images allows me to use the background-position properties in ways that are not possible with a border generated through CSS.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

I've checked the images. Please note that,

1-- The bg_body.psd is different than bg_body.gif

2-- I could not find psd file for slideshow_body_bg.jpg. Could you please provide me the same?

A couple of questions:

1-- I believe that the text("Bee Keeton...") in bg_header.png is not part of actual image.

2-- My understanding is that bg_header.psd corresponds to four separate images and will be named as bg_header_01,...,bg_header_04. Same is true for bg_intro.psd and bg_title.psd.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Vihang,

Attached please find the PSD file for bg_box_slide.psd -- for this image please configure three parameters: main image color, shadow color and (optional) background color, and please format as a PNG which is transparent when background color is not specified.

Also please find one additional PSD file -- this is similar to img_worth. For this image, the main image color, top line text color and bottom line text color need to be configurable, but the icon will always stay the same and so does not need to be configurable.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)