Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Can I Set A COMMAND for this?

    Alrigth Guys

    I am wondering lets say I used a text box to add an image to a site.. And then the image is display on a certain page.. Is there anyway that I can force the image to be a certain? So no matter what size of the image you add in the text box it automatically get resized?

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    I didn't understand a word of that. Explain exactly, what the end result is you are trying to achieve.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #3
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Doctor_Varney View Post
    I didn't understand a word of that. Explain exactly, what the end result is you are trying to achieve.
    Read the post... Its says exactly what I am trying to achieve...

    1) I am using a membership script.. On the add products page, I am allowed to add a image, which is done via an text box where I put the image locatioin. The image can be any size..

    However I want to force the image to be a certain size.. So When the image is automatically displayed on this page... http://www.digitalresellersvault.com...e_Label_Rights

    So lets say for example the image that you have uploaded to your server is 500 by 500.. I need it to resized automacitally after I have uploaded it to my server..

    Hopefully that explains it

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Yes, but it wasn't explained in context at first, so you shouldn't get stroppy. Your second post was much better, because it showed an example of the page you're uploading to. Seeing things in context helps a lot, you know.

    You can make an image fill a div by assigning the width:100% ;height:100% to the image in the CSS. Whatever the size of the div is specified, the image will be constrained (or expanded) to fit, automatically. The image doesn't have to be 100%, of course. You can set it to be a certain percentage of it's containing div.

    I still don't quite understand what you mean by "using a text box to add an image to a site" so I assume you mean 'div'.... But still, I have attempted to answer your question.

    I hope this helps.

    Dr. V
    Last edited by Doctor_Varney; 01-16-2010 at 04:38 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #5
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Doctor_Varney View Post
    Yes, but it wasn't explained in context at first, so you shouldn't get stroppy. Your second post was much better, because it showed an example of the page you're uploading to. Seeing things in context helps a lot, you know.

    You can make an image fill a div by assigning the width:100% ;height:100% to the image in the CSS. Whatever the size of the div is specified, the image will be constrained (or expanded) to fit, automatically.

    I hope this helps.

    Dr. V


    This is the css code for the image part that I am using
    Code:
    .productimage {
    
        background: #FFFFFF;
    
    	float: left;
    
    	width: 150px;
    	
    	height: 150px;
    
    	margin: 0px 0px 0px 0px;
    
    	}
    Do I need to add anything else to it?

  • #6
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Well, it appears it's this:
    <div align="center"><img border="0" src="http://www.digitalresellersvault.com/template/images/paintingcombo200.jpg" width="123" height="150"></div>
    ...Which takes care of the image dimensions. In this particular instance, that part is in the HTML, not the CSS.

    The image going inside there, will always appear on screen at 123px x 150px (if that's what you want), regardless of it's actual size.

    Is that any good to you?

    Regards

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #7
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Doctor_Varney View Post
    Well, it appears it's this:
    <div align="center"><img border="0" src="http://www.digitalresellersvault.com/template/images/paintingcombo200.jpg" width="123" height="150"></div>
    ...Which takes care of the image dimensions. That part is in the HTML, not the CSS.

    The image going inside there, will always appear on screen at 123px x 150px (if that's what you want), regardless of it's actual size.

    Is that any good to you?

    Regards

    Dr. V
    Nope...

    I have just added a image from the add product section.. I havent changed the size of the picture before I uploaded the image.. And this is how it is displayed.. http://www.digitalresellersvault.com..._Resale_Rights

    I need the code to automatically tell the image to resize, without me actually resizing it.. It needs to be done automatically within the script...

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by Byronwells View Post
    I need the code to automatically tell the image to resize, without me actually resizing it.. It needs to be done automatically within the script...
    Then perhaps you should post your question in one of the scripting sub-fora? This is for HTML & CSS.

    Regards

    Dr. V
    Last edited by Doctor_Varney; 01-16-2010 at 05:01 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #9
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Doctor_Varney View Post
    Then perhaps you should post your question in one of the scripting sub-fora? This is for HTML & CSS.

    Regards

    Dr. V
    And that is what I asking for. How to automatically set the setting either in html or css...

    After I have added it to the add products page

  • #10
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Just out of interest... Why can't you resize your image, before you upload it?
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #11
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Doctor_Varney View Post
    Just out of interest... Why can't you resize your image, before you upload it?
    Because all the images that are included along with the products are several different sizes.. I will just be uploading the files and get the images that way.. Saves time

  • #12
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Actually you can do this without scripting. It is not recommended though because image quality will suffer.

    If you have a div with a class .products then you can make all images in that div be resized with CSS by

    A) not including a width/height in the HTML, and
    B) including a CSS rule like this:
    Code:
    .products img {
    width:150px;
    height:150px;}
    However that will cause any images which are not perfectly square to be distorted (stretched). So maybe just leave off the height argument so it only gets scaled width wise and height will be scaled proportionally automatically.

    So just:
    Code:
    .products img {
    width:150px;}
    I just tested it and it works fine in Firefox to do that. That said, I have heard that it is a good idea to always provide dimensions in HTML for images. I am not sure why though, so if anyone knows some reason why this is a bad idea please chime in (aside from poor image quality).

    If you give the image a width/height in the HTML then you can still resize the image with CSS as per the first code example above but you will get stretching (unless all images are the same proportions). But if the width/height are defined in HTML then the second example where the height gets scaled proportionally automatically won't work because the height will have been strictly defined.

    I think the best way would be to use PHP combined with some kind of server side image processor.

    Edit: oops, code error corrected. needed units.
    Last edited by linehand; 01-16-2010 at 01:42 PM. Reason: corrected code error

  • #13
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by Byronwells View Post
    Because all the images that are included along with the products are several different sizes.. I will just be uploading the files and get the images that way.. Saves time
    If it's just a question of time, then I'd suggest using a photo editor which supports batch processing. In terms of speed, you could probably have processed a great many, whilst waiting for an answer to your question.

    Quote Originally Posted by linehand
    I just tested it and it works fine in Firefox to do that. That said, I have heard that it is a good idea to always provide dimensions in HTML for images. I am not sure why though, so if anyone knows some reason why this is a bad idea please chime in (aside from poor image quality).
    I can see why, if you have a lot of diversity in image sizes and a large quantity, taboot. Using CSS would create extra coding work, through having to rule and #ID all of your images at once. Otherwise, it's just a case of copying and pasting the <img width="?" height="?"> tag and popping in the sizes, but either way, it's still a manual affair.

    So what I'd suggest trying now, Byron, is specifying just the target width as a percentage of the original image size, in your HTML. When only the width attribute is used, it constrains the image's height to the correct proportion automatically.... You can use both pixels and %. So if you set yourself a baseline target width, which you want to keep the image roughly within, then proportions will be maintained while the image is displayed at it's false width. In this instance, I'd suggest using pixels as opposed to a percentage.

    Code:
    <img src="images/image_1.jpg" width="20%">
    or
    Code:
    <img src="images/image_1.jpg" width="200">
    Unfortunately, this might not take care of the problem, where you have wide diversity in image sizes and dimensions but it may go some way towards 'automating' the process, to some degree. Generally, image quality suffers much more through expansion than contraction (for obvious reasons).

    Though, if you're set on looking to use a script or some kind of server-side batch processing, then you're probably better off asking your question in the appropriate sub-forum. HTML & CSS are more layout tools.

    Either way, you've gotta put the work in. These things can only do what you tell them to do. Computers can't (yet) guess our intentions.

    Hope this helps.

    Regards

    Dr. V
    Last edited by Doctor_Varney; 01-16-2010 at 03:12 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #14
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Can't see what the point is. Seems like an over-complicated way to do something that works just fine with just a single CSS rule.

    The second example I gave just uses one CSS rule for all images. It will automatically re-size all images that go into that div while maintaining proportions.

    The only problem I can see with that is image quality and superfluous data (larger file size for smaller image), but those issues are just facts of life when it comes to resizing images in the browser (as long as it is always reducing and never enlarging then even image quality is not even a major issue in most modern browsers anymore).

  • #15
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Fair enough. If you can do it with one CSS rule, then that'd be the way to go.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •