portrait changed to landscape on Web Server PART 1

Microsoft Windows 7 ultimate 32-bit
May 6, 2013 at 19:16:10
Specs: HTML, n/a
I am using DreamWeaver CS4 and I cannot figure this out. When I insert a photo, the photo is correctly displayed when viewing it. But when I put it on my web page, it is rotated. I don't know why? This is the page?

http://www.chrismr.com/Photo_Of_Wee...


See More: portrait changed to landscape on Web Server PART 1

Report •


#1
May 7, 2013 at 12:32:09
The current photo on that webpage (http://www.chrismr.com/Photo_Of_Week/IMG_2513.JPG) appears to be a portrait (a tall image) that's rotated clockwise 90* to the landscape position (a wide image) wherein the boy in the red shirt is tilting his head to his right and sort of to the properly aligned position. Do you mean you want the image rotated back to a portrait image where the boy's head is positioned to the left?

I haven't used a program like Dreamweaver in a long time, so I'm unfamiliar with how that program's image rotation tools work. It sounds like the image rotated in Dreamweaver needs to be saved because it's only giving you a preview of how it would look with it rotated.

What I would do is open that picture in an actual graphics program (like a variation of Photoshop, or Microsoft Paint, or even the Photo Viewer built into Windows) and rotate it to your liking. Save the picture under a new name (if necessary depending on the program) and adjust the Image tag of the web page with the new file name. Then upload the new picture and web page to your web server.

Apologies if I don't respond to your reply immediately. I don't check this site daily, but you're welcome to PM me as a reminder.


Report •

#2
May 7, 2013 at 17:58:11
I did open the photo of my local computer, the picture is displayed correctly. But when I create that web page on my local pc and open then html locally, the photo is turned, I have no idea why.

I created a simple page just to display the file.

<CENTER><IMG SRC="IMG_2513.JPG"></CENTER>


Report •

#3
May 8, 2013 at 12:42:59
Try re-uploading the picture from your computer to your web host.

Is the picture I mentioned the correct one you're referring to? If so, how would you like it positioned? I can rotate it for you and upload it to a free host to transfer to you if you'd like.

Apologies if I don't respond to your reply immediately. I don't check this site daily, but you're welcome to PM me as a reminder.


Report •

Related Solutions

#4
May 8, 2013 at 20:16:19
I deleted the photo, and re-uploaded it. Still the same problem.
I Opened it in PS CS 6 and it displays correctly. Even if I create a simple web page on my PC and open that page through the browser, it is turned.

Can you see if you get the same problem, save the photo to you PC, create a simple web page to show the image, and see what happens.
This is strange


Report •

#5
May 8, 2013 at 21:53:36
I opened the link from your first post of the boy in the red shirt in a landscape layout and saved it to my desktop. I then opened it up in my default picture viewer program: Windows Live Photo Gallery, which is a general picture viewer program. The one built into Windows 7 is Windows Photo Viewer, which does the same thing. I clicked Rotate Left and closed it out; didn't have to save. Then I created a basic HTML file to display the picture and it properly displays in a portrait format in my web browser.

Here's the link:
http://img37.imageshack.us/img37/20...

Apologies if I don't respond to your reply immediately. I don't check this site daily, but you're welcome to PM me as a reminder.


Report •

#6
May 8, 2013 at 22:36:23
I tried to look at the html code, I cannot find how to view the code.. it must have been moved.

The simple test I ran is creating a html doc with only this code:

<img src="img_2513.jpg">

do I need more than that in the code?


Report •

#7
May 8, 2013 at 22:41:49
Technically no, since your web browser is pretty good at recognizing code and interpreting it. Plus, it's just a basic image tag and wouldn't affect the image itself. If the portrait layout picture I supplied still looks landscape to you after uploading it to your host and properly linking to it on that page, than I'm stumped for now.

Apologies if I don't respond to your reply immediately. I don't check this site daily, but you're welcome to PM me as a reminder.


Report •

#8
May 8, 2013 at 23:00:38
It worked, I updated the code and the photo. But I still dont understand why it was displaying the photo sideways when the photo was portrait when I was viewing it in a Photoshop or any other graphic program on my PC

Report •

#9
May 8, 2013 at 23:17:28
If when I open the photo in PS -- it displayed it the photo correclty, but in dreamweaver, it rotated it , why
?

Report •

#10
May 8, 2013 at 23:30:35
If I crop the orignal photo, save it, and add it to my web page, then the photo is displayed correctly on my web page.

I think the reason for the trouble, the photo was taken in landscape, with the camera turned. The computer can rotate the photo and display it how it sees fit. But the web (html) show the picture whatever mode it is in?
Is that basically what was happening?


Report •

#11
May 8, 2013 at 23:52:01
If it's positioned one way on your computer, then you upload it to your host and link it with a basic Image tag (no special JavaScript functions or anything to rotate it), it should appear in your web browser exactly as it's saved on your computer. That's what confused me too.

I noticed that the file-name is different than previously, so I'm guessing it was related to browser cache. Since the website and file-name didn't change previously, your browser displayed a previously saved picture from the same website with the same name.

My first reply should have been more like, "Ensure you've re-uploaded the modified version of the picture to your web host, and that specific picture is linked with the image tag, then delete your browser cache. It's Ctrl+F5 for many browsers."

Apologies if I don't respond to your reply immediately. I don't check this site daily, but you're welcome to PM me as a reminder.


Report •

#12
May 9, 2013 at 06:10:43
I uploaded the original jpg and index.htm to the web site.
If I open the photo on my pc, it is displayed correctly.
When I open the image through a web browser, the photo is turned.

I have one line of html code referencing the photo:

<img src="img_2513.jpg" />

do you know why this is?


Report •

#13
May 9, 2013 at 12:52:22
Sorry, I don't know of anything more. The current image (http://www.chrismr.com/Photo_Of_Week/img_2513.jpg) is displaying in the landscape position for me even after clearing my cache.

Edit: Wrote "layout" but meant "landscape".

Apologies if I don't respond to your reply immediately. I don't check this site daily, but you're welcome to PM me as a reminder.


Report •

#14
May 9, 2013 at 13:01:26
When you say the layout position you mean with the photo in landscape mode instead of portrait. BTW -- that boy is my son.

I want to thank you very much for all your help.

You said you have not used DreamWeaver in a very long time, what do you use for html development.


Report •

#15
May 9, 2013 at 13:18:29
Yep, I've corrected my post. I'm glad to be a little help but disappointed we couldn't figure out the problem.

I use a basic text editor rather than a WYSIWYG or IDE because I feel it allows me to learn the syntax better rather than relying on the software. I'm in large part a kinesthetic learner, so I learn best by doing myself. I'm also not confined to the limitations of the software and am fully open to newer techniques. Just recently, I tried going to an IDE in hopes it may speed up development, but it's not turning out that way.

Specifically, I use Notepad++ for it's syntax highlighting, line numbering, and advanced Find/Replace. Then I have my web browser up (Firefox) with add-ons like FireFTP and Firebug and the system's manual for what I'm working with (ex. PHP.net) in a browser tab.

Apologies if I don't respond to your reply immediately. I don't check this site daily, but you're welcome to PM me as a reminder.


Report •

#16
May 9, 2013 at 13:33:58
I played wit Notepad++ years ago. A very nice little program that helps.
What do you mean by IDE? IDE to me means the old and slow way computers connected to the harddrive.

Report •

#17
May 9, 2013 at 14:08:11
IDE in this sense refers to an Integrated Development Environment. The one I was trying out is Netbeans for PHP, but decided to just stick with writing syntax manually in Notepad++.

Apologies if I don't respond to your reply immediately. I don't check this site daily, but you're welcome to PM me as a reminder.


Report •


Ask Question