Resizing images using database and dropdowns

JavaScript
1

I use the following code in asp to change the image size of the images that draw to the page.

It works fine!

However, is there a more effecient way or more technically correct way to do this using javascript or Jason or whatever?

I want to fine tune and learn other ways and would appreciate your thoughts and other ways to do something that works.

Thank you.

I use these dropdowns to select the image size. It’s then stored in the database.

		<tr>

		<td  align="center" bgcolor="#c4d7dd" height="23">Photo Image Size<br />
        <select name="PhotoSize">
		<option selected value="<%=objRS("PhotoSize")%>"><%=objrs("PhotoSize")%></option>
																				
		<option value="Small">Small</option>
		<option value="Medium Small">Medium Small</option>
		<option value="Medium">Medium</option>
		<option value="Medium Large">Medium Large</option>
		<option value="Large">Large</option>
		</select>
								            
</td></tr><tr>
                
		<td align="center">Logo Image Size<br />
		<select name="LogoSize">
		<option selected value="<%=objRS("LogoSize")%>"><%=objrs("LogoSize")%></option>
																				
		<option value="Small">Small</option>
		<option value="Medium Small">Medium Small</option>
		<option value="Medium">Medium</option>
		<option value="Medium Large">Medium Large</option>
		<option value="Large">Large</option>
		</select>
		</td>
		</tr>

	<tr>

I then use this asp code to read the database for the size.

<%if rs("photosize") =  "Small" then%>

<style>
    img.resize{
    max-height:100px;
    max-width:100px;
    height:auto;
    width:auto;
}
</style>
<%end if %>

<%if rs("PhotoSize") =  "Medium Small" then%>

<style>
    img.resize{
    max-height:150px;
    max-width:150px;
    height:auto;
    width:auto;
}
</style>
<%end if %>

<%if rs("photosize") =  "Medium" then%>
<style>
    img.resize{
    max-height:250px;
    max-width:250px;
    height:auto;
    width:auto;
}
</style>
<%end if %>

<%if rs("photosize") =  "Medium Large" then%>
<style>
    img.resize{
    max-height:325px;
    max-width:325px;
    height:auto;
    width:auto;
}
</style>
<%end if %>

<%if rs("photosize") =  "Large" then%>

<style>
    img.resize{
    max-height:450px;
    max-width:450px;
    height:auto;
    width:auto;
}
</style>
<%end if %>


<%if rs("Logosize") =  "Small" then%>

<style>
    img.resize2{
    max-height:100px;
    max-width:100px;
    height:auto;
    width:auto;
}
</style>
<%end if %>

<%if objrs("Logosize") =  "Medium Small" then%>

<style>
    img.resize2{
    max-height:150px;
    max-width:150px;
    height:auto;
    width:auto;
}
</style>
<%end if %>

<%if rs("Logosize") =  "Medium" then%>
<style>
    img.resize2{
    max-height:250px;
    max-width:250px;
    height:auto;
    width:auto;
}
</style>
<%end if %>


<%if rs("Logosize") =  "Medium Large" then%>
<style>
    img.resize2{
    max-height:325px;
    max-width:325px;
    height:auto;
    width:auto;
}
</style>
<%end if %>

<%if rs("Logosize") =  "Large" then%>

<style>
    img.resize2{
    max-height:450px;
    max-width:450px;
    height:auto;
    width:auto;
}
</style>
<%end if %>

And then in my html code I use class resize and resize2 to draw the image to the page.

<img class=""resize"" src = "database location"
<img class=""resize2"" src = "database location"
2

Yes, notice how all your CSS classes are pretty much the same except for the size. So all you really need to be doing is selecting the size option and tracking which size that maps to and use it once instead the style. I recommend using a dictionary to determine the logo size and once that is determined, you can then use it in the style.

<% 
Dim imgSizes As New Dictionary(Of String, String)

imgSizes.add('Large', '450px')
imgSizes.add('Medium Large', '325px')
imgSizes.add('Medium', '250px')

Dim sizeSelected as String = imgSizes(rs("Logosize"))
%>

Now sizeSelected should be your size string, use it once in the style…

<style>
img.resize {
    max-height: <%= sizeSelected %>;
    max-width: <%= sizeSelected %>;
    height:auto;
    width:auto;
}
</style>

I haven’t written ASP in ages, but hopefully you get the concept here. :smiley:

P.S. You didn’t say if it was classic ASP or ASP.NET, so I wen’t ASP.NET style here

3

Sorry, I didn’t. It is classic so I am not familiar with Dictionary.

I will look at your suggestions, but I wasn’t sure if there is a more efficient way of using Jason that doing it in ASP Classic.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.