PDA

View Full Version : Keeping coded picture sizing


Marvinator
07-12-2013, 02:20 AM
I am using Dreamweaver on a Windows XP machine.

I have hand coded some templates for adding items to my wife's website. She opens the template and goes to enter a picture, only to have the picture load FULL SIZED. When coding the template, I have set a height of 150 for each picture. How can I keep this setting?

edbr
07-12-2013, 02:45 AM
how is she adding the photo?

Marvinator
07-12-2013, 10:16 AM
The template is hand coded to include the pic, the link etc. She opens the template in Dreamweaver, clicks on the pic, which is represented by a gray block, and then moves to the properties frame in the lower part of the screen. There, she changes the coding of the pic from this
img height=150 src="(website)/###.jpg
to the address of the pic she wants to use
img height=150 src="(website)/1234a.jpg

When she does this, and clicks or tabs to another space, the pic is loaded, but it is loaded FULL sized, overriding the '150' coding I put in the template. This forces her to go back to the sizing and a) delete the width, and b) put in 150 for the height, and THEN move the pic to where it belongs. It is a pain to have to do this, and I would really rather she didn't have to.

edbr
07-12-2013, 11:27 AM
150 % ,150 pixels, 150 em 150 elephants? try adding the units

Marvinator
07-12-2013, 11:57 AM
I have always assumed that any number placed in that space was 'pixels' unless otherwise specified '%' (or elephants) :)

I have gone back in and added 'pixels' after the 150, but this did not change the way Dreamweaver acted when adding in the pic name. It still loads it full sized, and changes the height and width.

gentleone
07-12-2013, 12:09 PM
The values of inline img 'width' & 'height' attributes are always rendered as pixel values, so adding % or em behind it won't do anything... it's still pixels. You can only use other units by leaving the 'width' and 'height' attributes out in the HTML and define the dimensions in % or em's with CSS.

Re your issue... I will try to replicate the process in my DW Design View (it's been ages, since I've been in Design View :) ) and see what to do.

Ricky55
07-12-2013, 09:17 PM
Can't you force the size of the image with CSS.

Just select the said image with css and add

img {
width: 150px !important;
}

If the size of the image changes then just use a max-width:

Or am I missing something?

edbr
07-13-2013, 12:40 AM
The values of inline img 'width' & 'height' attributes are always rendered as pixel values, so adding % or em behind it won't do anything... it's still pixels. You can only use other units by leaving the 'width' and 'height' attributes out in the HTML and define the dimensions in % or em's with CSS.

Re your issue... I will try to replicate the process in my DW Design View (it's been ages, since I've been in Design View :) ) and see what to do.

I assume you mean by default. which was why i suggested being specific.
using em was a hack used in IE for image resizing back before potious got his wings,
<img src="new/images/1.jpg" width="200000.625em" height="27.5em">

edbr
07-13-2013, 12:45 AM
just in case it was a browser issue

gentleone
07-13-2013, 10:20 AM
I assume you mean by default. which was why i suggested being specific.
using em was a hack used in IE for image resizing back before potious got his wings,
<img src="new/images/1.jpg" width="200000.625em" height="27.5em">
No, the value in a width or height attribute is without a unit and is in pixels. Your example is not 'right' and I believe no browser will render that image in em. Perhaps IE did it at some point/version, but IE does do weird things all the time... we're used to that :)

You can override it with em or % through CSS tho'.

edbr
07-14-2013, 01:32 AM
No, the value in a width or height attribute is without a unit and is in pixels. Your example is not 'right' and I believe no browser will render that image in em. Perhaps IE did it at some point/version, but IE does do weird things all the time... we're used to that :)

You can override it with em or % through CSS tho'.

tested the above in firefox and it works. so it clearly does work in some browsers .

edbr
07-14-2013, 02:00 AM
also <img src="new/images/1.jpg" width="200000.625% height="100%">
in FF, chrome but not in IE

edbr
07-14-2013, 02:02 AM
still not saying it is the answer btw. i was just stabbing ion the dark

Marvinator
07-14-2013, 03:57 PM
Forgive my inexperience, but I am unfamiliar with the 'em' notation. I tried using your notations exact, but it made the page wayyy too wide. Should I change the coding to this?

img height="150em" src="/websie/directory/###.jpg"

I've tried this, and it also does not force the sizing once the ### has been changed in Dreamweaver. Can someone tell me where I've miss-coded?


thanks for all your help in this!

gentleone
07-14-2013, 05:37 PM
Just leave out any unit... they don't belong there. height="150" is 150px.

Did you have also set a width for the img tags? If not then the browser will render that image with the real width dimension of that image.

And reading this post carefully I understand that you want to resize images in the HTML. The images have actually bigger dimension then you present them on the webpage. Am I right?
If so, then this is not really good for the performance of the webpage. With 1 or 2 images you won't notice much, but if you have more and more you will get a slow loading webpage.

If you want to have images on the page with for example the dimension 225px width and 150px in height, than you will have to resize them in Photoshop or Gimp to these dimensions, save them for the web and include them in the page.

Marvinator
07-14-2013, 08:08 PM
@gentleone: You are correct, in that I've coded in a template, for my wife to set up her jewelry on her website. There is one full sized picture and it is setup for up to 6 more pictures which are linked to show full sized in a new window.

In this way, there will be as few at 3 and as many as 6 'smaller' pictures which the viewer can then view full sized as needed.

My problem is in the way Dreamweaver loads the picture EVEN THOUGH I have specified a 'height' setting in the img tag. Like this:
img height=150 src="/site/images/###.jpg"
This way my wife only has to change the ### to the number of the picture. This is so that my wife doesn't have to insert a picture each time, and at the same time, gives a uniform layout to the item pages.

The problem comes in that once the ### is changed, Dreamweaver loads the FULL SIZED picture - overriding the settings I had hand coded in. Now, she is forced to change the height and width and then drag the photo over to where to belongs. My post here is to find a way to code in the size of the picture which REMAINS and forces Dreamweaver to load it the way I have coded.
Does this make sense?

gentleone
07-14-2013, 11:09 PM
I don't know much about DW templates and adding images to a page in design view mode, so I don't know why DW is doing this.

You could, like Ricky55 mentioned, override the img dimensions in the HTML with dimensions set through CSS and use !important, cause the specificity of inline attributes or styles are higher than external CSS.


<img src="image.jpg" width="225" height="150" alt="" class="thumb" />

CSS:

.thumb {
width: 225px !important;
height: 150px !important}

Marvinator
07-15-2013, 12:26 AM
I've not worked with CSS but I suppose this is an opportunity to learn. Thanks for the code, now I just have to figure out how to use it. LOL

thanks again!

domedia
07-15-2013, 07:18 PM
For the best quality, the pictures should already have been resized to 150 tall. This way the browser shows a better quality picture, and your wife will have less issues with it :)

Marvinator
07-15-2013, 08:22 PM
@domedia.. thank you for the response, but that would go totally against what I"m trying to create. I suppose what I could do is to create a 2 versions of every photo, one large and one small. Use the small one for the item page which would link to the large one, but this seems almost counter productive.

But again, thanks.

gentleone
07-15-2013, 08:49 PM
I suppose what I could do is to create a 2 versions of every photo, one large and one small. Use the small one for the item page which would link to the large one, but this seems almost counter productive.
This is how you should do it. Potential clients of your wife on a slow/bad Internet connection that have to wait for a page is fully loaded, is not good for her business.