Welcome to the Anxiety Forum - A Home for Those with Anxiety, Fear, or Panic Attacks.
Driving 468x60
Results 1 to 10 of 10
  1. #1
    Senior Member
    Join Date
    Oct 2013
    Location
    Australia
    Posts
    4,760

    Thumbs up 101 How To Embed Images Into Your Forum Posts!

    Comprehensive 101 on using Flickr BBCode to embed your images:
    The method is very similar across multiple hosting sites and forums. If you take your time with this information, you should be able to understand the process very well and not only be able to embed your images, but also know how to choose appropriate embedding/display resolutions/sizes + the general layout of your text in relation to your pics. You will also learn what's in the code and why + how to manually adjust the code to link to any site you wish! As stated in the title I’m going to focus on Flickr.

    NOTE* I will have to lay out this tutorial into segments as 'each post' in this forum can only host up to four images; this includes emotes as well.
    __________________________________________________ __

    Part One
    Creating a Flickr Account, Signing In, Accessing Photostream & BBCode:

    1. Image Hosting Sites First you will need to be a member of an image hosting site like Flickr or ImgBB. There are others out there that have their pros and cons. With regards to 'free accounts' ← you won't be able to host working gifs with flikr. I use ImgBB for hosing animated gifs. (more on the later)

    2. Once you have created an account and singed in you'll need to UPLOAD the images that you wish to embed - into your forum post. I do beg your pardon as I have just realized I've not included images for uploading instructions - DOH!!! After signing in ... just look for the upload icon in the top right hand corner. It is an icon image of a white cloud with a broad arrow through it. It's to the left of the bell icon aka notification icon. Again top right hand corner. Just follow the instructional images. Once done follow on with this tutorial.


    After you have created a Flickr account, singed and uploaded your images ... you will need to:

    3. ACCESS YOUR PHOTOSTREAM
    (I'm winging this so correct me if wrong!)



    4.



    5. FINDING THE SHARE ICON:
    Note* Unlike this image, the preceding images are un-clickable. This image has a
    link attached to it separate from the BBCode. This allows users to be taken to any site I wish. I will explain further in.
    For now lets just find the Share Icon!



    6. ACCESSING THE BBCode:
    I reset my browser cookies so that my screen would present the same image (left image as below) as a first time user. You will need to navigate to the -
    BBCode Tab as depicted in the right image below where you will be presented with some size options which we will discuss in part two of this tutorial:
    Last edited by Ponder; 12-02-2017 at 02:07 AM.

  2. #2
    Senior Member
    Join Date
    Oct 2013
    Location
    Australia
    Posts
    4,760
    Part Two
    Contemplating Embedded Image Size - Copy & Paste into Forum Post:

    What happen here is the code changes acording to the size/resolution you select. Once you click on the desired size the code automatically highlights where you can then right click to bring up your copy option to which you left click. Then you navigate back to your forum post page where you then right click in your edit text box to past the code. It's worth noting that some thought should be given to the selected size of your displayed pic. See below pic for more thoughts on this:



    With respect to size of pics. I find scenic photos useless when embedded in less than 1024X. It does depend on the scene and what's in it - as pics below a resolution of 1024X - Medium to small show very little - unless considered a close up pic. To get around this without having to take up the space of on entire display by linking a desktop size resolution of say 1920X1080 - we can manually adjust the BBCode to link the same image, but displayed much larger on another webpage. In situations like these you could choose ... let's say an Xtra large thumbnail size to keep things clean:

    Example:


    Although even at this size the image still shows - me taking a break from a long ride with all the gear I was able to take; including my pack hanging from tree. IMO this is an image that does much better at full screen. Full screen - intrigued viewers get to see more of the intricate details. You can see more emotion and character up close in my face, the $25 refurbished bike + it's muddy tyres and even make out the hydration sleeve in my pack as well as camera case behind my thermos nestled in chair. TIP always link to a view size that fits the web page being linked. Don't link to 1920X1080 or larger that requires magnification. I chose 1600X which on most standard desktop displays does not require magnification. (although a lot of mid range laptops still display @ 1280 or 2366) I explain soon enough. It's to do with online rendering which ends up degrading linked pic.

    Note* Some websites/forums do not open a separate webpage when image is clicked on - meaning they may require hitting the back arrow in the top left hand corner of web browser to return to your post. I find that very annoying and avoid using methods, forums and sites that result in such. Thankfully the methods I am showing here should have a forum user's browser open up on a new page ... when clicking on said flickr embedded pics.

    In order to understand how the links work within the BBCode we will need to look deeper into the text. We'll get to that in a sec!

    As stated in beginning of above post ... once you have selected the -
    size you wish to display; the BBCode will automatically highlight.
    All you need do is right click to copy as depicted below:



    --- --- Then navigate to your forum post ---:
    Last edited by Ponder; 12-02-2017 at 02:11 AM.

  3. #3
    Senior Member
    Join Date
    Oct 2013
    Location
    Australia
    Posts
    4,760
    Part Three
    Changing the BBCode - Personal Preference - More Options!!!

    OK this is where we get into it a bit more. It took me a while to work this out. Once you understand how Code works it's easier to manually change information you don't want shown as well as manually direct the links to where you want. If I have explained simply enough and you have have followed along well enough, you should have something like as displayed below → with the upper pic. The lower pic I will explain below.

    Click to enlarge image:


    As best can I see ... There are 3 links in the BBCode as pictured above. Each link enables various elements. Some we may want and others we may not.

    The First Link (yellow) links forum users to your flickr account. There are two parts to this first link. The first is a tag [url=https://flic.kr/p21F8rvd] that makes your image a clickable link that once clicked the forum user will be taken to your flickr account where they will view the image in a display refereed to as a 'light box view' The light box scripts used in Flickr are pretty good. Not all light boxes are equal. Some render images terribly and I have to say that most forum light box views are pretty sad when it comes to rendering high quality photos and offer very little in the way of options, which is why I avoid using forum image attachments most of the time. It's worth considering the quality of light box (image Viewer) with regards to image layout & display + various options when considering which Image Hosting Site you would like to use. This is another reason I often use Flikr. I believe it's still one of the best in this regard. I only use lesser image rendering sites such as imgBB to host my animated gifs. (given I am only using a free Flickr account)

    The second part of the first link in the BBCode [IMGhttps://farm5.staticflickr.com/4579/38511487466_57d9197bb0_b.jpg[/IMG [/url ←(minus → ] at three parts within the example just given in order to break the link) is the address to where your image resides @ host site and enables the size you chose for embedding . This link we always keep! (without the url tags - ONLY within the [img] ... [/img] tags no matter what changes we make to the rest of code. By itself without any of the other code we end up with an un-clickable image. @ times this may be preferred. I explain in the following.

    The Second Link - Basically adds the Title of your Image that you designated (or file name) when you uploaded to host site. Leaving it is not necessarily a bad thing - you might like it. For my I generally remove this if I don't forget. Reason being the layout of txt along side image when embed in forum post looks out of place for me. In some cases it pushes other text additional images out of the way.

    The Third Link will be more an issue for some if having to use your real name as can be the case with Face Book Accounts; as this link ties your account name to your image. Not an issue for me ... but understandably is very much so for the majority. What we do to remove all this unwanted information is to break the links by completely removing them. We reduce the code down to the first link. There are two options we are left when doing this. 1. We can either remove just the 2nd and 3rd links leaving the first as a clickable link or we can remove 2nd and 3rd link as well as the first part and tail end of 1st link. LOL ... meaning we just end up with 1st link between the [img] ... [/img] tags - no url tags whatsoever.

    How about I embed some helpful pics ... just take your time digesting as I am dyslexic with how I write and also image!


    _________________________________________

    1st up here is what it looks like without any changes done to the BBCode: Note* the title link and also account holder link that pushed out my text. I could hit enter to drop my post text under the pic but the information would still trail out to the side of image which not only still displays info I care less about but looks unbalanced.

    Image Clickable:
    Eating Out with Son & Daughter Painting by David Kynaston, on Flickr ← HEY what is all this annoying TXT messing up the layout of my forum post. Damn this ... I will have to follow ponders suggestions on how to remove the information and if I so wish for forum users to see ... I will make this pic a clickable link without the info displayed which results in a cleaner look.

    __________________________________________


    OR

    -

    -

    -

    -


    a non-clickable well balanced image that suits a blog like post without account holder information, image title, file name or any other annoying text :

    Arrr this is better ... a much more sexy looking layout


    To Centre - Just highlight all of your edited text and then hit the centre icon - preview to see result.

    Image count restricts embedding so I will just use a hyperlink link → Click here How To Edit BBCode to remove all information and end up only with embedded pic at your selected size ←

    If you scroll the last example given - to the top of the page as if the image was the begging of this thread - you will see how this example makes for a nice clean blog post; within a standard forum format. I often rush but when I want to make a post stand out I will take more time thinking about the type of image I am embedding with respect to displayed size in forum post and whether or not I would like to link to a larger view. Nice well balanced close up pics I might link just a little larger than the above - if I do link to a light box view I typically do it outside of my main account to whats called a static view. The standard link in the BBCode links to your account where again they can see your name and other details. I still care less for others seeing my name ... I just prefer the extra control I have with linking size! Many people like linking to a static address because it's more private. Again my main reason it due to the array of sizes I can choose to have displayed. That's for another post.

    Note* Hyper Links can cont as an image which is why I only got away with embedding three images : ( ← also another reason I sometimes just use old stile emotes : ) Which means ... emotes also count as images.
    Last edited by Ponder; 12-02-2017 at 02:14 AM.

  4. #4
    Senior Member
    Join Date
    Oct 2013
    Location
    Australia
    Posts
    4,760
    Hyperlinking Your Embedded Images

    If you want your BBCode/embedded image to simply have no info yet take people to your Flickr Account where they can go through your gallery by clicking on your name and so forth ... then use the following image to get a handle on that:

    Click on thumbnail to enlarge ... : )

    You just both parts of the first link! Get rid of the rest. I rarely use this as I just add a link to my gallery if I really feel the need to share. Hyperlinking yields better results for my intentions ... as already explained.

    ___________________

    ___________________

    In case you missed the text hyperlinked example of editing BBCode at bottom of previous post ... I will now embed below:
    I typically use this example with a hyperlink. (only keep the [img] [/img] tags and all that's inbetween:
    Image code used for hyperlinking:

    Click on thumbnail to enlarge ... : )




    TO HYPERLINK ALL WE DO is highlight the IMG code then select the hyper link icon as pictured below and then paste the desired link you wish to direct you viewers - viewing your image: Image hyperlinked ... click to for better reading:



    Hyperlinking is not only useful for taking up less space with smaller pics in order to link to larger ones but also to embed book covers, or any image to then link relevant information:

    Last edited by Ponder; 12-02-2017 at 01:37 AM.

  5. #5
    Senior Member
    Join Date
    Oct 2013
    Location
    Australia
    Posts
    4,760
    LASTLY - Editing Issues - Stuck in Format Mode - Switch to source Mode:

    When you go to preview you attempts to ensure your getting what you want, it's not uncommon to run into problems as no longer seeing the text in your edit box after reloading into a preview page. You image link will change from text in your input box to an actually image and when you click on it to change or just have a clicking fit ... it will look something like this:




    WTF!!! what is this shit? No worries ... don't stress ... if all you want to do is hyper link an [img] ... [/img] link when in this predicament, then just right click on the image to get the paste option. Once you past the intended address - your blue image will resort back to txt:



    BUT even better, go back into source mode. It's way better to see exactly what's going on ... especially as you get used to BBCode:


    I often get suck with the picture limit and then remember I have been using too many emotes. If I get stuck with being unable to see the emotes (which ironically can happen is format mode) I just hit the switch to edit source mode icon where I can then look for the hidden characters → : ) If I want to keep them I will just add a space and allow them to stay old school style : ) -
    __________________________________________________ ____________

    Summery:
    I think I have covered most of what I have learned of the years with regard to using BBCode from a Flickr Perspective. It gets much easier are you practice and build up experience. Using standard forum image attachments are of typically display images poorly compared to dedicated light boxes used in high end image hosting sights. Furthermore one is rather limited in layout with regard to sizing, centering, entering, hyperlinking and so on. Learning how the BBCode links information and or takes users to where ever allows one to control where you would like people to end up.

    The one thing I have not shown up to this point is how to get the static link which allows you to hyperlink smaller embedded pics to desktop views and in fact nor did I elaborate on the reasons for or how to choose resolutions that fit your images without the need to magnify.

    Well that's it folks. There are some typos ... but that's life.

    If you liked this write up and or got something out of it, then don't be a stranger; please leave a comment as is akin to a thumps up. ; )
    Last edited by Ponder; 12-02-2017 at 05:01 PM.

  6. #6
    Senior Member
    Join Date
    Jun 2013
    Location
    Canada
    Posts
    5,253
    that's awesome D
    ''“If you cry because the sun has gone out of your life, your tears will prevent you from seeing the stars.”
    ''
    ― Rabindranath Tagore

  7. #7
    Senior Member
    Join Date
    Jan 2017
    Location
    Planet Earth
    Posts
    222
    It always makes me happy seeing you on the forum, Dahila.

  8. #8
    Senior Member
    Join Date
    Jun 2013
    Location
    Canada
    Posts
    5,253
    Quote Originally Posted by martin05 View Post
    It always makes me happy seeing you on the forum, Dahila.
    Martin Thank you very much, you are very kind
    I am happy to see you too
    ''“If you cry because the sun has gone out of your life, your tears will prevent you from seeing the stars.”
    ''
    ― Rabindranath Tagore

  9. #9
    Senior Member
    Join Date
    Oct 2013
    Location
    Australia
    Posts
    4,760
    Hope you are well D

  10. #10
    Senior Member
    Join Date
    Jun 2013
    Location
    Canada
    Posts
    5,253
    I am well .....................
    ''“If you cry because the sun has gone out of your life, your tears will prevent you from seeing the stars.”
    ''
    ― Rabindranath Tagore

 

 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Driving Large