Best in the West

[Dave M.]

I have seen a few of Todds larger photos, and I think in the PNW we have the scenery to post some of the best photos. Now, doing so with a width of 640 pixels really doesn't cut it, so I have been thinking about how to stay within the guidelines and still make some spectacular scenery shots available.

Thanks to Kenpcfl and his filter post for showing me how to do these photos in line. That really helped me figure out this method. I am using small photos as links to other images off site. The small photos are also off site so I can put them in line with the text. Check this out, these photos are from Victoria BC, where you can tie up right here for about $25 per night.

These photos are 'clicky'.




In order to make this all work, you just need to have access to a server that lets you post your photos without intermediate software getting in the way and redefining them. If you can just ftp the images to your server, then you are set.

 

[Sea Ray 300]

Wow Dave, you certainly do have some spectacular scenery.
Could you tell me, step by step, how you lined them up, and got them to click to another site, for a larger picture? If you don't feel comfortable doing it on the forum, please send me a private message. If it is a lengthy procedure, I can give you my email address. Thanks allot, and thanks for sharing the great pictures.
Steve

 

[First Born]

Great Pictures...and it seems that you have mastered the posting thing. I would also appreciate to know how you got them to line up so nice. They look great. You had nine pictures and I did not have to scroll :thumbsup:

Wesley

 

[Dave M.]

Wow Dave, you certainly do have some spectacular scenery.
Could you tell me, step by step, how you lined them up, and got them to click to another site, for a larger picture? If you don't feel comfortable doing it on the forum, please send me a private message. If it is a lengthy procedure, I can give you my email address. Thanks allot, and thanks for sharing the great pictures.
Steve

Steve, I dont' mind sharing, and I will do it on the board. That's the whole point of the board, sharing what we know. And in my case, if I share something that turns out to be wrong, normally I get corrected, and I learn. That is OK. I am too old to think I am perfect.

But first I have to go for my 3 mile walk, so I will try and do this later today.

Wesley, getting them to line up was automatic. When logged in you can look at the code, but there are a few tricks, so I will try and get to that. I think the images are each 230 pixels wide, so the total width would be 690 pixels, which doesn't scroll if your screen is 1024 wide. I say "I think", because I started out with them being 210 pixels, but when I added drop shadow, I think it made them bigger.

Dave

 

[Dave M.]

Ken make a very nice post about how to recharge your holding tank vent filter here. Looking at what he did gives some good guidelines about how to proceed.

First, he found a way to include pictures in line wth the text. AFAIK, you can't do that as an attachment. Therefore, you have to do it as a link to an image stored on a different server somewhere. By right clicking on one of the images, you see the following.

http://i21.photobucket.com/albums/b283/kenpcfl/vent2.jpg

It indicates he was able to use the photobucket site successfully as the remote image server. Note the name of the image file, it is vent2.jpg. This indicates that he organized his photos before hand, considering what would go into the post. Then he named the photos with names that match the post, and uploaded them to the site. Using short, consistent names with a sequence number appended makes it much easier to get the name of the file right when you write the html. When you use names like vent1, vent2, vent3, vent4, etc, it makes the files appear in a nice tidy group in your photo browser. It also allows you to copy and paste html code, changing only the number to choose the proper photo for each location.

When I made the post above, I started out intending to do two rows of three photos, so obviously I needed six photos. I have my San Juan trip photos organized with each location in a separate folder, so I chose to use only photos from one folder. I created a subfolder in that folder to hold the images I wanted to post. Then I chose the six images, and copied them to this subfolder for processing. In this case, the folder name was Victoria, and the subfolder I created I called littleBig, because in this folder I would have a small 'thumbnail' photo, the 'clicky' one, and a large copy of the same that would be the image linked to.

With the six images I wanted to use now in the littleBig folder, first I assigned a comment to each image. The comment was the current file name of the image, such as dscn7104.jpg. Next, I changed the name of the files to vic1.jpg on to vic6.jpg. So now I had files with nice short names, but comments that remind me what the original file is. I hate it when I lose track of what the original source was.

Next, I downsized these files to a width of 1280, and let the height be whatever it worked out to be. I saved them with the same file name, jpeg compression, and a quality of around 75 or 80 out of 100. This gives a reasonable file size, a bit over 100K typically. Using a width of 1024 may have been a better choice, comments on that are welcome.

Next I will write about making the 'clicky' files. Right after another piece of pie.

 

[Dave M.]

So, the next step was to create six small images, where three of the images would fit on a single line on the page. I knew that 640 pixels wide was OK, so shot for a third of that for each photo, and chose 210. So for each of the six images, I made a copy of the image and resized it to 210 pixels wide. Then in the Gimp, my photo editor, I added a beveled edge around these little photos. Then I also added a drop shadow with transparent edges. In this last step the image grew in size by 9 pixels on each edge for the drop shadow. So now my images were 228 wide instead of 210. OK, I let that go, they should occupy 684 pixels wide on screen. I saved these files with the same name as the large size, except I added a 't' for 'thumbnail' to each file. I also saved them in png format, as png supports transparency, whereas jpeg does not. I wanted the drop shadows to be transparent, so any background color would show through.

So now I have 6 pairs of files. Pair one is called vic1.jpg and vic1t.png for the large and small versions respectively. The small 't' version files will appear directly in the CSR site, the large version will be brought up in a separate browser window when the small one is clicked.

So, now the images are created. In my case, to get them to my server, I used an ftp program. How you get them to your server will depend on the service you are using. By in my case, I just transferred all the images in the subfolder at once.

Now that the photos are neatly tucked away on an available server, with nice names I can remember, it is time to create the CSR post!

(Truth in writing statement: I did not just 'create this CSR' post, I struggled with HTML code till midnight figuring out what would work. :smt021 )

What, more turkey and dressing! You gotta be kidding me! :smt101

 

[Dave M.]

Before you can post 2 rows of images with 3 images on a row, you have to be able to post a single row, then two should be easy.

Before you can post one row, you have to be able to post a single picture, and make it work as an external link. So I will try and discuss that first. Since it has been a whole day, and I see the code did not remain the same after the CSR server accepted it, I will have to recontruct the format. But it will be quicker this time.

Basically, we are going to use the URL second format that appears when you put the mouse over the URL icon. Here is that format:

[url=http://url]URL text[/url]

Normally, you would put in some text, and the text becomes highlighted so you can see that it is a clickable link. Lets make that work first. Here is the html code:

[url=http://i21.photobucket.com/albums/b283/kenpcfl/vent5.jpg] What you need [/url]

The processed results look like this:

What you need

We will just modify this, and insert an image instead of text. :thumbsup: I hope....

[url=http://i21.photobucket.com/albums/b283/kenpcfl/vent5.jpg]  [img]http://www.sandhollow.net/CSR/vent5t.png[/img] [/url]

Two things are very important in the code above. First, no spaces are allowed between the opening and closing img tags. So if you put a space between png and [/img], it will fail. Everything between the tags is considered a URL, and no spaces are allowed in a URL.

Secondly, the code contains no carriage returns, or "Enter"s. It may appear like it is two lines in the code display, but that is only because your browser wrapped the text at the break in text where it found a space character. It must be a single line with no "Enter"s. In the small window you have to type your post, the wrap will occur, assuming you put a space just preceeding the [img part. That is allowed. But in your display, it will be nearly impossible to tell whether you accidentally hit "Enter" or not where you should only have a space. They look the same on screen. It is very important this all be a single line of text.

The results appear like this on screen:



OK, now we have made a single external image be the source of a link to an different external image.

 

[Dave M.]

Now it gets a little tricky! The way that we get normal text to be on a single line when we post to a topic is just to keep typing and don't hit "Enter". We expect that when we hit "Enter", we will get a new line. But we also know that our browser will do word wrap. In order for that to happen, it needs to find a place to break the line. That happens at a 'space'. If there are no spaces in out text, such as in a very long URL, then the browser is forced to scroll sideways so as not to break the text.

The same thing will happen when we post pictures side by side. As long as we keep feeding valid URL's of images, and don't put in any spaces, the photos will be on the same line. And we might hope that if they are too wide to fit our screen, the browser will realize they are different items and will wrap between photos just like between words.

First, lets get back a valid photo link from above that we know works.

The code:

[url=http://i21.photobucket.com/albums/b283/kenpcfl/vent5.jpg]  [img]http://www.sandhollow.net/CSR/vent5t.png[/img] [/url]

And the real thing:


Great! Lets try six of them. That should force a wrap, and give two lines of three on a 1024 wide screen. We must be careful not to let any carriage returns (Enter) get put anywhere in the code. The easiest way to do this is to copy the code, making sure we don't include any carriage returns, and paste it below six times. Lets do that. It is OK to put a few spaces after the closing [/url] tag, so when you copy it to paste it, it is easier to avoid the "Enter"

[url=http://i21.photobucket.com/albums/b283/kenpcfl/vent5.jpg]  [img]http://www.sandhollow.net/CSR/vent5t.png[/img] [/url] [url=http://i21.photobucket.com/albums/b283/kenpcfl/vent5.jpg]  [img]http://www.sandhollow.net/CSR/vent5t.png[/img] [/url] [url=http://i21.photobucket.com/albums/b283/kenpcfl/vent5.jpg]  [img]http://www.sandhollow.net/CSR/vent5t.png[/img] [/url] [url=http://i21.photobucket.com/albums/b283/kenpcfl/vent5.jpg]  [img]http://www.sandhollow.net/CSR/vent5t.png[/img] [/url] [url=http://i21.photobucket.com/albums/b283/kenpcfl/vent5.jpg]  [img]http://www.sandhollow.net/CSR/vent5t.png[/img] [/url] [url=http://i21.photobucket.com/albums/b283/kenpcfl/vent5.jpg]  [img]http://www.sandhollow.net/CSR/vent5t.png[/img] [/url]

And the real thing:




That worked out fine, as least as I see it on my browser! But they are all the same image. We want different images, obviously. Here is where the planning in advance pays off. Since we were smart enough to have our image names vary by only a single character, the number, that is the only difference in the code between the photos. Thanks Ken, for making us see the light! We will just change the numbers, realizing that Ken used photo # 5 first. Remember it has to be changed on both the url lines and the img lines.

[url=http://i21.photobucket.com/albums/b283/kenpcfl/vent5.jpg]  [img]http://www.sandhollow.net/CSR/vent5t.png[/img] [/url] [url=http://i21.photobucket.com/albums/b283/kenpcfl/vent1.jpg]  [img]http://www.sandhollow.net/CSR/vent1t.png[/img] [/url] [url=http://i21.photobucket.com/albums/b283/kenpcfl/vent2.jpg]  [img]http://www.sandhollow.net/CSR/vent2t.png[/img] [/url] [url=http://i21.photobucket.com/albums/b283/kenpcfl/vent3.jpg]  [img]http://www.sandhollow.net/CSR/vent3t.png[/img] [/url] [url=http://i21.photobucket.com/albums/b283/kenpcfl/vent4.jpg]  [img]http://www.sandhollow.net/CSR/vent4t.png[/img] [/url] [url=http://i21.photobucket.com/albums/b283/kenpcfl/vent6.jpg]  [img]http://www.sandhollow.net/CSR/vent6t.png[/img] [/url]

And the results:



And that is all there is to it. Now for cake and ice cream!

 

[Sea Ray 300]

Wow Dave,
Thanks for the info...! :wink:

Now, I'm going to have to sit down, study the proceedure, and experiment... :smt101

Thanks for taking the time to share... :thumbsup:

 

[chuck1]

Dave, Thanks for the info :thumbsup: Another thing I found out about having pictures put on this way instead of adding an attachment it does not delete the signature pictures.

Just did a test
Added standard picture attachment and posted it. All the Signature pictures were gone. Deleted the post with the attachment and all the signature pictures came back. Not sure why it worked, maybe somebody else will tell us. :huh:

 

[Dave M.]

Chuck, I assume that you read the whole post and picked up on the fact that the images on the page are themselves links to the real full size images elsewhere.

Regarding deleting the signature line if you post a picture as an attachment. It occured to me that the signature line is itself an attachment, it is not part of the post. So if you change your signature line, it will be changed in all previous posts. I think, I did not double check that. So this suggests the the script that generates the web page on the fly as you request it has a choice of adding attachments from signature lines or from posted images, but not both; and it applies to all posts on the generated page. Which, if true, suggests a server side software re-write to fix it.

Of course, maybe I am just restating the obvious problem??? :smt017

 

[chuck1]

Chuck, I assume that you read the whole post and picked up on the fact that the images on the page are themselves links to the real full size images elsewhere.

Dave, Yes I did pick up the fact about the pictures being links and yes I think it is a server side error about attachments, just was trying to highlight it might be a way to post pictures and signatures in the same thread. Thanks again for the info great thread :thumbsup: Keep up the good work :smt038

 

[Nehalennia II]

Very Cool Dave. For whatever reason I seem to just scour the "General Forum" and don't look often enough in the West Coast area here. I like the picture link. Very Nice.

 

[Dave M.]

Very Cool Dave. For whatever reason I seem to just scour the "General Forum" and don't look often enough in the West Coast area here. I like the picture link. Very Nice.

Thanks, Todd. Spring is headed our way, time to start considering some boat trips.

 

[Nehalennia II]

Very Cool Dave. For whatever reason I seem to just scour the "General Forum" and don't look often enough in the West Coast area here. I like the picture link. Very Nice.

Thanks, Todd. Spring is headed our way, time to start considering some boat trips.

Indeed, I actually was going to post today a San Juan/Gulf Island rendexvous. I'll put it in the "General" area since there has been interest from some others further away.