Author Topic: Visual Tutorial on Images in Threads  (Read 726 times)

Legacy_Tarot Redhand

  • Hero Member
  • *****
  • Posts: 4165
  • Karma: +0/-0
Visual Tutorial on Images in Threads
« on: April 05, 2013, 12:40:13 am »


               This is a short tutorial on one way of illustrating your writings in any thread on here. I am going to show those who don't know how, the way to use these boards albums for this purpose. I have chosen to illustrate this with images using the very method that I describe. Well they do say that "a picture is worth a thousand words". In the case of the albums on here, there is the caveat that they must be in either .jpg, .gif, .png or .jpeg format. Also as these boards automatically shrink your picture so that it's width does not exceed 540 pixels, it is probably a good idea to do this yourself before uploading them. I personnally tend to make mine 500 pixels wide, but that's just me '<img'>.

1. Create an Album 

'Posted

Obviously, if you do not have an album you will need to create one. The (arguably) easiest way to do this is to click on the [Album] button at the top of any screen on here and follow the instructions. In the above picture, this button is high-lighted.

1a. or Open an Existing Album

'Posted

If you already have an album there is a good chance you know all that I say in this tutorial anyway. If this is the case, please bear with me and feel free to offer any constructive criticism and insights you may have.

The easiest way to get to your album is to go via [My Content/Albums] as illustrated above.

1c. (For existing Albums) Edit Your Album

'Posted

If you have just created your album,  skip this part and the next as you will be asked to upload pictures anyway. 

If on the other hand you have an existing album that you wish to add pictures to, click the [Edit Album] link underneath the album that you wish to add pictures to. Then...

1d.  (For existing Albums) Select to Add New Pictures

'Posted 

Clcik on the [Add New Photos] button, which then allow you to upload your new picture(s).

2. (Finally) Add New Pictures to Your Album

'Posted

Follow the instructions on this screen and you will finally get your pictures into your album. Remember, you can select and load more than one picture at a time. When you have finished uploading all the pictures you want, go back and view your album.

3. View Your New Picture(s)

'Posted

In order to be able to get the information that you will need to place your picture in the thread where you want it, it is first necessary to view it. Just click on the thumbnail to do so.

4. (Almost There) Viewing Your Picture

'Posted

You will notice that when you view any picture in your album, it is surrounded by a grey border. At the bottom of this border there are two links. To get the information you need, click on the [share] link.

5. Sharing

'Posted

When you click on the share link you are presented with four options - "Direct Link", "HTML - Embedded Image", "HTML - Text Link" and "UBB code (for forums)". You need to copy the text in the box under this last one.  I find that clicking anywhere in the box selects this text, then right click and select copy (or use ctrl-c).

By pasting this text into your post in the thread that you want your image to appear, it will do so. Some of you may experience difficulty in pasting (the Opera browser moans about permissions for example). In which case, just use ctrl-v and it should paste just fine.

I hope this is of help to some people. If I have made any errors, or you know better ways, just post in here.

TR 
               
               

               
            

Legacy_CaveGnome

  • Sr. Member
  • ****
  • Posts: 432
  • Karma: +0/-0
Visual Tutorial on Images in Threads
« Reply #1 on: April 05, 2013, 09:58:00 pm »


               Good tutorial! Thanks.
               
               

               
            

Legacy_rogueknight333

  • Sr. Member
  • ****
  • Posts: 394
  • Karma: +0/-0
Visual Tutorial on Images in Threads
« Reply #2 on: April 06, 2013, 01:37:20 am »


               Thank for this. I admit I was not entirely clear about how one went about posting screenshots in these forums, so this should prove useful if I am ever inclined to do so.
               
               

               
            

Legacy_MagicalMaster

  • Hero Member
  • *****
  • Posts: 2712
  • Karma: +0/-0
Visual Tutorial on Images in Threads
« Reply #3 on: April 06, 2013, 01:45:46 am »


               It's worth pointing out that you do NOT need to upload pictures to the Bioware boards - sites like Photobucket work as well.

For example, this is a photo I uploaded to Photobucket that's an image of a boss kill (used it for a news post on our website):

'Posted
               
               

               
            

Legacy_Tarot Redhand

  • Hero Member
  • *****
  • Posts: 4165
  • Karma: +0/-0
Visual Tutorial on Images in Threads
« Reply #4 on: April 06, 2013, 08:28:19 am »


               @MagicalMaster I never claimed that it was. To quote the first 2 sentences of my original post

This is a short tutorial on one way of illustrating your writings in any thread on here. I am going to show those who don't know how, the way to use these boards albums for this purpose.


I also see that you don't actually tell people the steps needed, so to quote Rolo from the thread that inspired this

Just put the image url in between two "img" tags (without the spaces I've included to make it print):
[ img ] http://myawesomesite...wesomeimage.jpg [ / img ]

You can do the same thing with url tags and have the image link to something:
[ url=http://myawesomesite.com ][ img ] yadayadayada [ / img ][ / url ]


TR
               
               

               
            

Legacy_Shadooow

  • Hero Member
  • *****
  • Posts: 7698
  • Karma: +0/-0
Visual Tutorial on Images in Threads
« Reply #5 on: April 06, 2013, 08:46:37 am »


               

Tarot Redhand wrote...

Just put the image url in between two "img" tags (without the spaces I've included to make it print):
[ img ] http://myawesomesite...wesomeimage.jpg [ / img ]

You can do the same thing with url tags and have the image link to something:
[ url=http://myawesomesite.com ][ img ] yadayadayada [ / img ][ / url ]

TR

TIP: What I do is to insert smiley, then click on it right mouse button, choose properties and replace path to the image.
Advantage is that you can see and adjusr the image before you actually submit your post.
               
               

               
            

Legacy_MagicalMaster

  • Hero Member
  • *****
  • Posts: 2712
  • Karma: +0/-0
Visual Tutorial on Images in Threads
« Reply #6 on: April 06, 2013, 08:53:01 am »


               

Tarot Redhand wrote...

@MagicalMaster I never claimed that it was.


I was responding to rogueknight333, not what you said.  Trying to make sure it was clear that you didn't HAVE to save photos to the Bioware boards if you already had them uploaded elsewhere.

Tarot Redhand wrote...

I also see that you don't actually tell people the steps needed, so to quote Rolo from the thread that inspired this


Well, Photobucket at least has the same kind of share link options:

'Posted

But yes, technically it's just taking the direct link and adding [ img] and [ /img] on either side (without the spaces).
               
               

               


                     Modifié par MagicalMaster, 06 avril 2013 - 07:53 .
                     
                  


            

Legacy_Lightfoot8

  • Hero Member
  • *****
  • Posts: 4797
  • Karma: +0/-0
Visual Tutorial on Images in Threads
« Reply #7 on: April 06, 2013, 06:30:28 pm »


               TIP:  You can adjust the size the image is displayed by setting its hight and width.  Hight and width both have a 540 limit.   ( At least I thint that is the limit)


Example:

[ img=540x540]http://social.bioware.com/da_game_other/portraits/1885000/1884709/1884709.png[ /img]
is:
540x540http://social.bioware.com/da_game_other/portraits/1885000/1884709/1884709.png[/img]

Where

[ img=200x100]http://social.bioware.com/da_game_other/portraits/1885000/1884709/1884709.png[ /img]

is:
200x100http://social.bioware.com/da_game_other/portraits/1885000/1884709/1884709.png[/img]
               
               

               
            

Legacy_Tarot Redhand

  • Hero Member
  • *****
  • Posts: 4165
  • Karma: +0/-0
Visual Tutorial on Images in Threads
« Reply #8 on: April 06, 2013, 11:16:00 pm »


               Hmmm, scales better than I would have thought. It's like being in an old fashioned fair/carnival hall of mirrors. Apologies to anyone who puked but sometimes it's better not to look too closely. ('^_^')

TR
               
               

               
            

Legacy_Tarot Redhand

  • Hero Member
  • *****
  • Posts: 4165
  • Karma: +0/-0
Visual Tutorial on Images in Threads
« Reply #9 on: July 26, 2013, 06:58:42 pm »


               As every so often someone keeps asking how to do this, might it not be a good idea to sticky this please.

TR