Post by CampKohler on Dec 13, 2015 21:39:35 GMT
Images in Forum Messages.
This tutorial is very detailed in order to cover all aspects of the subject, but after a little practice (especially for attachments), inserting images will be easy for you. To practice, make a reply to the The Sandbox.... topic in this category and use that message to try things out. Post any questions in the Ask here.... topic, also in this category.
Two methods are available in this forum for displaying images:
• Attachments (internally hosted) - Somewhat smaller images (as compared to those from modern cameras) may be uploaded to this forum, where they are both stored and displayed here. The image is not dependent or any other site. There is a limit of three attachments per message. This is the easiest way to include photos in your posts.
• Called Images (externally hosted) - Images of any size are hosted elsewhere and then calls to each image are made to fetch it. There is no important limit to the number of images that may be displayed (but there is a character limit for each message, and each image call eats up some of them). The image is at the mercy of the hosting site, but you can show bigger initial images with higher-resolution.
In both cases, BBCode tags are placed by the author in the message text to cause the image to display on the page.
Part I. Attachments
Attachments are, for the purposes of this discussion, images that are uploaded to the forum and then displayed when the proper BBCode tag is inserted in the post. Attachments are used in four steps:
1. The image is uploaded to the forum.
2. The tag for the uploaded image is created and inserted into the post at the point of desired appearance.
3. The image is displayed as a thumbnail whenever the post is viewed.
4. An image is displayed at a 1 Mb full size when it's thumbnail is clicked by the reader.
The first two steps are part of a process that has been automated with a script. The script is activated by clicking the add Attachments button (see note below about this name). Several things are done by the script that are not seen by the author, so you must pay attention to how the script works, which will be explained below as best as can be learned by using the script and doing testing. (As more things are learned about this script, they will be added to the explanation.)
How the system handles attached images
1. Each image that is uploaded to the forum is assigned an ID number by the system that is unique to an author and his topic.
2. Only the system can assign the ID number and knows which number is assigned to which image in which topic.
3. Because of 1) and 2), the Add Attachment dialog box will the prime method of managing attachments, because it knows the answers. However, there is nothing to prevent tags being typed by hand if the ID is known by the author. Using incorrect ID numbers in tags will result in the tags being deleted. The system knows.
Uploading images
1. With the message dialog box open to BBCode—the default mode, the other mode being Preview)—click Add Attachment. The Add Attachment dialog box opens.
Click to enlarge. Click Back to return.
2. Click the Add Files button. A File Upload box opens, allowing you to navigate to the source of the image in your PC, including any external storage devices, such a thumb drive.
3. Click Open to begin uploading the image. The image file name appears in the Add Attachment box along with new Insert and Delete buttons.
4. A maximum of three attachments may be uploaded per message. A running count is provided in case you can't count to three.
Manually inserting images in a message
With the Add Attachment box open and having uploaded at least one image,
1. In the background behind the box, position the text cursor wherever you wish the image to appear.
2. Click Insert to cause a completed attachment tag to be placed in the page text. (If you find that you inserted in the wrong spot, you can cut and paste it into the correct spot later.)
Click to enlarge. Click Back to return.
Caution: Avoid clicking the Delete button here. Its use will be explained in B), below.
3. Click Done to hide the Add Attachment box and return to the underlying message dialog box.
4. Finish composing the message and post it.
Note: The name of this box is dynamic. That is, when returning to the Add Attachment box at a later time, it and the button that invokes it will have been automatically renamed to Edit Attachments. This is to reflect the fact that one or more attachments has been uploaded and that the Edit Attachments box can now be used to manage them. Should all attachments be deleted, the button and box names will revert to the original Add Attachments name.
Repositioning images within a message
Inserted images may be moved about within a message by simply cutting and pasting attachment tags as the author desires.
Horizontally positioning images within a line in a message
Placing tags on the same line will cause the images to appear on the same line, unless room on the screen requires them to spill over to the next line. Thus,
appears as:
By inserting non-breaking space characters, horizontal control is obtained:
appears as:
Allowing the system to automatically add images to a message
Should the author not use the Insert button to insert any uploaded image into the message, when the message is posted, the system will append all un-inserted images to the end of the message and label them as such like this:
Attachments:
When the system appends images, neither the label nor attachment tags will appear in the messages's underlying text; it is present only in the system's "mind". However, this is not detrimental, because although this means that the label and tags aren't there to be repositioned within the text by simply cutting and pasting, it is easy to switch to tags that you can cut and paste. Just place the text cursor in the message at the desired insertion point and click Insert for the desired image and the two are swapped automatically; the inserted tag appears in the text and the appended tag, along with its label are deleted.
B. Temporarily hiding images from the reader
1. Method 1 - Temporarily delete the inserted attachment tag from the text and re-add it later.
2. Method 2 - Enclose the attachment tag in code tags to prevent it from executing; the image will not appear, but the enclosed tags will be seen: But it will be sloppy looking and possibly confusing to the reader:
For better appearance, the above code-enclosed tags may be temporarily moved to the end of the message where the resulting whitespace won't be noticed.
Why would you want to temporarily hide an attached image? Beats me, but now you know how.
C. Removing images permanently from the message
With the Edit Attachments box open, click Delete next to the image to be removed. The image will be deleted from the system and the attachment tag deleted from the message text. If the image is uploaded again, it will receive a different ID number.
D. Attachment image sizes and an enlarging instruction for the reader
Attachment images are relatively small—1 Mb maximum—producing a lower resolution image and are by default displayed as a thumbnail (miniature) image. The user may click the thumbnail and it will be displayed in a separate window at full size. However, the uninitiated will not know this, so it's wise to follow the attachment tag with a small-font (to make it less intrusive) instruction, like this:
The preferred use is to place the instruction on the same message line as the attachment tag:
When displayed, the image and instruction appear closely related:
Click to enlarge. Click Back to return."
Note: The vertical offset between the bottom of the image and the instruction's line seen above is due to whitespace surrounding the graphic in the image as uploaded. To prevent this, edit the image to make sure no whitespace surrounds the visible part of the image.
The second part of the instruction about the Back button is necessary, because, if the reader simply closes the separate image window, he also closes the forum window, which is an annoyance.
E. Attachment tag oddities
1. The thumbnail parameter of 1 must not be modified to any other number. If it is, instead of the intended image, the reader will see only a link to the full size image.
2. The ID parameter may be changed to the ID number of any image that has been uploaded for a given message. Changing it to an ID uploaded to any other message will delete the tag from the message text. Thus the rule is: an image uploaded to a message may only be used in that message.
3. When images are appended to a message by the system (vs. being inserted by the author), the image will be indented few spaces to the right of the left margin.
4. There is no alt text available for the blind.
End of Part I, Attachments
Continue to Part II, Called Images
This material v5-forum-software compliant. Please PM suggested changes or corrections to CampKohler.
Version: 20151220 3:24 PM PST --CampKohler
Backup: 20151220 --CampKohler
This tutorial is very detailed in order to cover all aspects of the subject, but after a little practice (especially for attachments), inserting images will be easy for you. To practice, make a reply to the The Sandbox.... topic in this category and use that message to try things out. Post any questions in the Ask here.... topic, also in this category.
Two methods are available in this forum for displaying images:
• Attachments (internally hosted) - Somewhat smaller images (as compared to those from modern cameras) may be uploaded to this forum, where they are both stored and displayed here. The image is not dependent or any other site. There is a limit of three attachments per message. This is the easiest way to include photos in your posts.
• Called Images (externally hosted) - Images of any size are hosted elsewhere and then calls to each image are made to fetch it. There is no important limit to the number of images that may be displayed (but there is a character limit for each message, and each image call eats up some of them). The image is at the mercy of the hosting site, but you can show bigger initial images with higher-resolution.
In both cases, BBCode tags are placed by the author in the message text to cause the image to display on the page.
Part I. Attachments
Attachments are, for the purposes of this discussion, images that are uploaded to the forum and then displayed when the proper BBCode tag is inserted in the post. Attachments are used in four steps:
1. The image is uploaded to the forum.
2. The tag for the uploaded image is created and inserted into the post at the point of desired appearance.
3. The image is displayed as a thumbnail whenever the post is viewed.
4. An image is displayed at a 1 Mb full size when it's thumbnail is clicked by the reader.
The first two steps are part of a process that has been automated with a script. The script is activated by clicking the add Attachments button (see note below about this name). Several things are done by the script that are not seen by the author, so you must pay attention to how the script works, which will be explained below as best as can be learned by using the script and doing testing. (As more things are learned about this script, they will be added to the explanation.)
How the system handles attached images
1. Each image that is uploaded to the forum is assigned an ID number by the system that is unique to an author and his topic.
2. Only the system can assign the ID number and knows which number is assigned to which image in which topic.
3. Because of 1) and 2), the Add Attachment dialog box will the prime method of managing attachments, because it knows the answers. However, there is nothing to prevent tags being typed by hand if the ID is known by the author. Using incorrect ID numbers in tags will result in the tags being deleted. The system knows.
Uploading images
1. With the message dialog box open to BBCode—the default mode, the other mode being Preview)—click Add Attachment. The Add Attachment dialog box opens.
Click to enlarge. Click Back to return.2. Click the Add Files button. A File Upload box opens, allowing you to navigate to the source of the image in your PC, including any external storage devices, such a thumb drive.
3. Click Open to begin uploading the image. The image file name appears in the Add Attachment box along with new Insert and Delete buttons.
4. A maximum of three attachments may be uploaded per message. A running count is provided in case you can't count to three.
Manually inserting images in a message
With the Add Attachment box open and having uploaded at least one image,
1. In the background behind the box, position the text cursor wherever you wish the image to appear.
2. Click Insert to cause a completed attachment tag to be placed in the page text. (If you find that you inserted in the wrong spot, you can cut and paste it into the correct spot later.)
Click to enlarge. Click Back to return.
Caution: Avoid clicking the Delete button here. Its use will be explained in B), below.
3. Click Done to hide the Add Attachment box and return to the underlying message dialog box.
4. Finish composing the message and post it.
Note: The name of this box is dynamic. That is, when returning to the Add Attachment box at a later time, it and the button that invokes it will have been automatically renamed to Edit Attachments. This is to reflect the fact that one or more attachments has been uploaded and that the Edit Attachments box can now be used to manage them. Should all attachments be deleted, the button and box names will revert to the original Add Attachments name.
Repositioning images within a message
Inserted images may be moved about within a message by simply cutting and pasting attachment tags as the author desires.
Horizontally positioning images within a line in a message
Placing tags on the same line will cause the images to appear on the same line, unless room on the screen requires them to spill over to the next line. Thus,
[attachment id="59" thumbnail="1"][attachment id="59" thumbnail="1"][attachment id="59" thumbnail="1"][attachment id="59" thumbnail="1"][attachment id="59" thumbnail="1"][attachment id="59" thumbnail="1"]appears as:
By inserting non-breaking space characters, horizontal control is obtained:
&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;[attachment id="59" thumbnail="1"]&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;&nbs;[attachment id="59" thumbnail="1"]appears as:
Allowing the system to automatically add images to a message
Should the author not use the Insert button to insert any uploaded image into the message, when the message is posted, the system will append all un-inserted images to the end of the message and label them as such like this:
Attachments:
When the system appends images, neither the label nor attachment tags will appear in the messages's underlying text; it is present only in the system's "mind". However, this is not detrimental, because although this means that the label and tags aren't there to be repositioned within the text by simply cutting and pasting, it is easy to switch to tags that you can cut and paste. Just place the text cursor in the message at the desired insertion point and click Insert for the desired image and the two are swapped automatically; the inserted tag appears in the text and the appended tag, along with its label are deleted.
B. Temporarily hiding images from the reader
1. Method 1 - Temporarily delete the inserted attachment tag from the text and re-add it later.
2. Method 2 - Enclose the attachment tag in code tags to prevent it from executing; the image will not appear, but the enclosed tags will be seen: But it will be sloppy looking and possibly confusing to the reader:
[attachment ID="1"; thumbnail="1"] [font size="1"] Click to enlarge. Click [b]Back[/b] to return.[/font][/font]
3. Enclose the code-enclosed tags in font tags to set the text color to white. This will make the tags invisible to the reader. The hidden image's attachment tag would be constructed like this:
[code][font color=white][code][attachment ID="1"; thumbnail="1"] [font size="1"] Click to enlarge. Click [b]Back[/b] to return.[/font][/font] For better appearance, the above code-enclosed tags may be temporarily moved to the end of the message where the resulting whitespace won't be noticed.
Why would you want to temporarily hide an attached image? Beats me, but now you know how.
C. Removing images permanently from the message
With the Edit Attachments box open, click Delete next to the image to be removed. The image will be deleted from the system and the attachment tag deleted from the message text. If the image is uploaded again, it will receive a different ID number.
D. Attachment image sizes and an enlarging instruction for the reader
Attachment images are relatively small—1 Mb maximum—producing a lower resolution image and are by default displayed as a thumbnail (miniature) image. The user may click the thumbnail and it will be displayed in a separate window at full size. However, the uninitiated will not know this, so it's wise to follow the attachment tag with a small-font (to make it less intrusive) instruction, like this:
[font size="1"]Click to enlarge. Click [b]Back[/b] to return."[/font]The preferred use is to place the instruction on the same message line as the attachment tag:
[attachment ID="1" thumbnail="1"] [font size="1"Click to enlarge. Click [b]Back[/b] to return."[/font]When displayed, the image and instruction appear closely related:
Click to enlarge. Click Back to return."Note: The vertical offset between the bottom of the image and the instruction's line seen above is due to whitespace surrounding the graphic in the image as uploaded. To prevent this, edit the image to make sure no whitespace surrounds the visible part of the image.
The second part of the instruction about the Back button is necessary, because, if the reader simply closes the separate image window, he also closes the forum window, which is an annoyance.
E. Attachment tag oddities
1. The thumbnail parameter of 1 must not be modified to any other number. If it is, instead of the intended image, the reader will see only a link to the full size image.
2. The ID parameter may be changed to the ID number of any image that has been uploaded for a given message. Changing it to an ID uploaded to any other message will delete the tag from the message text. Thus the rule is: an image uploaded to a message may only be used in that message.
3. When images are appended to a message by the system (vs. being inserted by the author), the image will be indented few spaces to the right of the left margin.
4. There is no alt text available for the blind.
End of Part I, Attachments
Continue to Part II, Called Images
This material v5-forum-software compliant. Please PM suggested changes or corrections to CampKohler.
Version: 20151220 3:24 PM PST --CampKohler
Backup: 20151220 --CampKohler
