A Rookie Guide to Posting Images on UER
- Revised section 6 (HTML)
- Revised section 7 (External image hosting)
1) ATTACHING A SINGLE IMAGE (THUMBNAIL METHOD)
2) Attaching multiple images (the thumbnail method)
3) Attaching multiple images (the gallery method)
4) Attaching multiple images (Quick Gallery Creator)
5) Attaching full-size images (using AVGalleryCreator)
6) Attaching full-size images (using HTML)
7) Sharing photos from external sites
- Imagevenue Preamble
For the highest quality images, you should link your images remotely. While it is possible to upload directly to UER, there will be a slight loss in quality due to the components used to handle these images. PART A – How to post images
There are a few ways to share your photos with the other members of UER. The method you choose depends on how you want the photos to appear when others view your message. 1) ATTACHING A SINGLE IMAGE (THUMBNAIL METHOD)
When you use the UER editor to create a new post or to respond to previously made posts, you may click the “Attach an Image” button to include a photo. The photo must be less than 100k in size. You may attach more than one photo in your message, however they can only be uploaded one at a time.
Photos that are successfully attached will appear as text within your message. The text appears as “pic=” followed by a code. This text is then surrounded by square brackets.
This line of code may be cut and pasted anywhere within your message. You will not see an actual photo in your message unless you select the “Spellcheck and Preview” button.
Text may be inserted before and/or after lines containing your photo. Example 1 (text appearing after the photo)
Hey guys the photo ABOVE is of an old house I found. Example 2 (text appears above the photo)
Hey guys the photo BELOW is of an old house I found.
When you preview or post your message, you will find that the [pic] tag disappears and a nice thumb-nailed photo takes its place. It’s that easy! 2) Attaching multiple images (the thumbnail method)
If you use the built in “Attach an Image” method to post multiple images, you will find the result looks like this within your message (remember the numbers will be different):
When previewed or posted, this code will make your images appear stacked on top of one another in thumbnail format. Note
: You may insert text before or after the images.
The photo below is a really neat house.
This is a view of inside the house.
This is me being chased by the owner of the house.
Again, this is very easy for a beginner to learn to do. 3) Attaching multiple images (the gallery method)
If you had multiple photos that you wanted to share with UER members, you could post them one-by-one using the “Attach an Image” button. This would result in ten photos that would appear stacked top to bottom.
What would you do if you wanted to post photos but not have them stacked? You would simply use the GALLERY tag. The GALLERY tag takes your photos and places them in rows (left to right) instead of stacking them from top to bottom.
Simply insert this line of code before your images: [gallery]
and this line of code after your images: [/gallery]
Using our ongoing example from above, your final message would appear like this:
This is what a gallery looks like when viewed by others:
You can see how the photos appear more pleasant to the eye in rows rather than stacked from top to bottom. 4) Attaching multiple images (Quick Gallery Creator)
Avatar-X has developed a utility to simplify the entire gallery creation process. If you have Flash enabled in your browser, you will see this utility just below where you are typing text into your message:
This is a very simple to use method to post thumbnail galleries into your messages.
1) Click the Add file(s) button
2) Select the photo(s) that you would like to add. You may select more than one file.
3) The filenames of the photos will appear within the box.
4) You may remove files using the Remove Selected File (selected files appear in green).
5) Once you have chosen all of the photos that you would like to add, simply click on Start Upload.
6) The image code is inserted right into your message.
The above image shows you what code the AVGalleryCreator places in your message.
Notice that it is no different than the method mentioned in chapter 3 of this FAQ. This utility automates it for you. 5) Attaching full-size images (using AVGalleryCreator)
If you would prefer to show full sized photos instead of thumbnails, this is possible. Please remember that if you have numerous (over a dozen) images, you may want to use thumbnails instead.
To include full sized images, we use the AVGalleryCreator once again. The difference is that this time we will UNCHECK the “Create pop-up images” button.
After you have started the upload, you should see text similar to the following in your message:
: You may swap the 'pic' and 'inp' tags for the same photo.
The AVGalleryCreator even numbers the images for you. How handy is that? 6) Attaching full-size images (using HTML)
If you have an image hosted elsewhere (a website, FTP site, Imageshack, Flickr) then you may be interested in this section.
To insert images from external sites, you will need to know the URL for that image. The URL would be the Uniform Resource Locator that is most likely shown at the top of your browser when the image is displayed.
Example (with proper image URL shown in the browser):
A properly formatted URL will look like this:
We simply wrap IMG tags around a proper link. A standard image tag is [ IMG ] and [ /IMG ] (without the spaces). The two numbers after the first tag are automatically inserted into the tag and represent the X and Y widths.
The above link (of a cat) is too large to display on the UER forum. If you wanted to add a very large image to UER, you might form your tag like this:
which will display a 400 pixel wide by 300 pixel high result as shown below: 7) Sharing photos from external sites
- Upload your image to Tinypic
- Copy and paste the code for "IMG code for forums & Message boards" into your post on UER
- Note that the code is the same as discussed in section 6.
7.2) Postimage (http://postimage.org/
- Select and upload your image
- Select the Hotlink for Forums and paste it into your UER post
- You may also copy and paste the "Direct Link" into your post and place IMG tags around it.
- Select the photo to share from your images
- Click on the Share icon
- Select the BBCODE sharing method
- Select the resolution to share your image with
-Highlight the code from the second box (click it 3 times) - it may already be highlighted for you in which case go to next step.
- Right click and select COPY
- Paste the BBCODE into your UER post
- Click on the image to be shared
- Click on the code as found in the IMG box to the right of your photo, it should be copied to your clipboard automatically. It is found under the "Share Links" heading (see image below)
- Paste the code into your UER post
- Select the files using the "Select Files" button
- Designate whether image is "Family safe" or "Adult"
- Click "Upload Now"
- Copy and paste the BBCODE into your UER post
- It's possible to share an image from 500px however it requires a bit of effort. Select your image.
- From the top right of the page select the EMBED options
- Highlight all of the code displayed underneath your photo and copy it. You can do this by pressing CTRL-A and then CTRL-Insert.
I've blurred out the code because it's one of my own images but your code should look similar to this:
<p><img src="https://drscdn.500px.org/photo/100918499/m%3D900/80d2e1923f4e887e745e041c4b9b5b1f" alt="My Fantastic Exploration by Explorations on 500px"></p>
<a href="https://500px.com/photo/100918499/myfantasticexplore-by-explorations">My Fantastic Exploration by Explorations on 500px</a>
- Paste the code into your UER post (Shift-Insert keys). Now, you want to remove everything EXCEPT for some code contained after the < P >. Copy everything from "https" to just before the quotation mark.
You should have something like this highlighted:
You don't need anything from the quotation mark onwards. Now highlight the entire thing and click on the 10th icon from the left in the UER editor. It looks like a green forest.
The image below shows what you should be seeing in the UER editor before you click the IMG icon. (ignore the quote at the end - my mistake)
And the image below is what you should see after clicking the green IMG icon:
- Select and upload your files
- Copy and paste the code found in the "Link clickable thumbnails on a Forum or Message Board" box.