How do I post photo on home page? Options

[Bridget Wynne]

I just set up my web site, and know nothing about code. All I know is how to read the TNG instructions and do my best to follow them. I chose a template for my home page, and it includes photos that are part of it. I want to put my own family photos on my home page instead. I have them in my home computer as jpg files. How do I substitute them for the photos in the template?

In case you want to see what I mean, the URL is www.lublinsky.net.

Please give an explanation that is step by step and assumes no knowledge!

Thanks,
Bridget

[Denise]

I just set up my web site, and know nothing about code. All I know is how to read the TNG instructions and do my best to follow them. I chose a template for my home page, and it includes photos that are part of it. I want to put my own family photos on my home page instead. I have them in my home computer as jpg files. How do I substitute them for the photos in the template?

In case you want to see what I mean, the URL is www.lublinsky.net.

Please give an explanation that is step by step and assumes no knowledge!

Thanks,
Bridget

That photo can be replaced by editing the .jpg file in the template. I'm sure you looked at all the templates before choosing the one you have now and noticed that each one has a different picture? Take a look at my site using Template 2. www.onlyarethusa.com/genealogy. I opened the .jpg file in my graphics program (I use many, these files were created in PhotoImpact 12, but you can use any graphics program.)

The files you're looking for in your template files are: mediumphoto.jpg and smallphoto.jpg. Those are the files you have to edit. You replace your photos for the ones there now, save the files as mediumphoto.jpg and smallphoto.jpg and reupload them to your site. The photos you replace the existing photos with must be the same size as the existing ones.

I know you said you have no knowledge, but I'm hoping that means with the software itself, not with editing .jpg files. If you need help, I'd be glad to help you with it. But remember this: He who gives a man a fish, feeds him for a day. He who teaches a man to fish, feeds him for a lifetime. In other words, learning to do this yourself will serve you well in the future.

[arnold]

Hi Bridget,

This will not be step-by-step, but will offer a few clues on getting started. And duplicates some of what Denise suggested.

If you put your cursor over the photo and right click the mouse, then click on properties, you will see the photo/graphic size is 160 pixels by 121 pixels.

If you do the same thing on some other part of the webpage, you will see "View Page Source" or similar words. Click on that. Then scroll down beyond the line beginning with "<!--EDIT PARAGRAPH TEXT ABOVE HERE. EDITS BELOW THIS LINE WILL AFFECT THE PAGE DESIGN STRUCTURE-->," where you will see this important line of code:

<img border="1" src="mediumphoto.jpg" width="160" height="121" vspace="10"></p>

This line of code tells your browser the name of the graphic file, how thick/wide the boarder should be, the photo dimensions, etc.

Thus any photo you substitute must be cropped to that size. The photo you select should be set to about 72 dpi to minimize its size. You will either rename your graphic file to mediumphoto.jpg or change the file name in the code.

Yes, there are other ways to handle this, but to keep things simple, do not alter the space assigned to the photo size. If you do, it may well mess up your webpage.

While I will not lead a man to fish, I will suggest that a woman, such as you, take a course, buy a book, whatever, and learn the basics of coding.

And remember this, any time you are new to coding and change a webpage and upload it, make sure you have kept a copy of the original file on your hard drive. .php webpages are exacting. It is easy to make a mistake. Be super ready to upload the original file when things go bad.

Arnold

[Bridget Wynne]

Thank you for the information. I'm trying to figure out how to do what you both suggested, and have some questions.

#1) Denise wrote:
"The files you're looking for in your template files are: mediumphoto.jpg and smallphoto.jpg. Those are the files you have to edit. You replace your photos for the ones there now, save the files as mediumphoto.jpg and smallphoto.jpg and reupload them to your site. The photos you replace the existing photos with must be the same size as the existing ones."

I can find the mediumphoto.jpg and smallphoto.jpg files, but can't figure out how to edit them. I'm using File Manager from my Cpanel. When I click on the mediumphoto.jpg file it gives me these options:
Show File Contents
Delete File
Change Permissions
Rename File
Copy File
Move File
Download File
URL: http://www.lublinsky.net/mediumphoto.jpg

It does not give me the option to edit the file. How would I do that?

#2) Arnold wrote:
"any time you are new to coding and change a webpage and upload it, make sure you have kept a copy of the original file on your hard drive. .php webpages are exacting. It is easy to make a mistake. Be super ready to upload the original file when things go bad. "

How do I keep a copy of the original web page?

Thanks,
Bridget

[Denise]

Thank you for the information. I'm trying to figure out how to do what you both suggested, and have some questions.

#1) Denise wrote:
"The files you're looking for in your template files are: mediumphoto.jpg and smallphoto.jpg. Those are the files you have to edit. You replace your photos for the ones there now, save the files as mediumphoto.jpg and smallphoto.jpg and reupload them to your site. The photos you replace the existing photos with must be the same size as the existing ones."

I can find the mediumphoto.jpg and smallphoto.jpg files, but can't figure out how to edit them. I'm using File Manager from my Cpanel. When I click on the mediumphoto.jpg file it gives me these options:
Show File Contents
Delete File
Change Permissions
Rename File
Copy File
Move File
Download File
URL: http://www.lublinsky.net/mediumphoto.jpg

It does not give me the option to edit the file. How would I do that?

Thanks,
Bridget

You have to download the file to your computer...but actually, you already have it on your computer because you downloaded the template from the TNG site and then UPloaded it to your own site. So you have all the files for the template already on your computer.

So after you either download the file (using the "Download File" option) or find the file you still have on your hard drive, you open it in a graphics program. Do you have one? If you're using Windows, you have Paint in the accessories folder in your Start Menu. I don't really recommend using that because I don't see a way to change the photo size.

Here are some links to free photo editing software. Just copy and paste the link in your browser:

http://www.gimp.org/windows/

http://www.freeserifsoftware.com/

http://www.getpaint.net/index.html

Those should get you started in the right direction. I just typed "free photo editing software" into Google (I [heart] Google) and a whole list of free sites came up.

After you download and install the software, go to "File" at the top and click "Open" then browse to where your template's photos are. Once the file's open, go back to "File" and click "Open" again and browse to where the photo you wish to replace the template photo resides. Now you have both photos open and you want to replace the example photo with your own.

First find out the size of the example photo. This is usually accomplished by right clicking on the photo and getting the dimensions. You will have to adjust the size of your own photo so that it's the same size as the example photo. What I do is create a new background (in white) the same size that I want the photo I'm using to be (as decided by finding the size of the example photo from the template), and then, after changing the size of my own photo so it fits, cutting and pasting it onto the new white background. Once that's done, you now have your own photo the same size as the example photo. To be safe, I close the original photo I cut and pasted and when it asks, "Save changes?" I say "no". That way your original photo stays the same.

You now have the example photo from the template and your own edited photo open. I would rename the example photo to "mediumphotoEXMP.jpg" or something that tells you it is the original that came with the template. Rename your edited photo to "mediumphoto.jpg" and reupload it to your site. It will replace the template's example photo and it should ask you if you want to do that. Say "yes". Then go to your site and click "refresh" and the new photo should be there.

I'll let Arnold answer the next question. I hope this answer was helpful, Bridgett.

[arnold]

Bridget,

I am not being mean when I say you have to join a computer user's group and ask lots of questions or take some basic computer classes. There are a great many in your area of the U.S. (I live in a rural town of 12,000 where we have nothing.)

When I was new to computers, the first thing I did was to join the MACE CIG in the Denver area. That stood for Metropolitan Area Computer Enthusiasts, Computer Interest Group. The members were super helpful and friendly. Would even come out to your house.

I hope that I am not insulting you. That is not my intention. Doing what you want with the pictures takes some semi-advanced skills.

As to, "How do I keep a copy of the original web page?," you copy the file to a different folder/directory or you do a SAVE AS and rename the new copy of the file. I normally add this -original to the end of the file name.

Arnold