Brief guide to uploading linked pictures/images in comments! (W/ Visual Aid)

edited February 27 in Tutorials
Brief Guide to HTML in comments:

If you would like to post an image without a link you can do just the following! Otherwise, continue reading.
<img src="Card Image" width="35%"></img>

If you don't know how to find your card image, continue down this page! (Until you see this color!)

The following is for users who want their image as a clickable link!
<a href="Card Page"><img src="Card Image" width="35%"></img></a>

To do side by side the following can be done... (Repetition - Use different cards for each.)
<a href="Card Page"><img src="Card Image" width="35%"></img></a><a href="Card Page"><img src="Card Image" width="30%"></img></a>

To do multiple rows just start writing a new line... (Separate Lines - Use different cards for each.)
<a href="Card Page"><img src="Card Image" width="35%"></img></a>
<a href="Card Page"><img src="Card Image" width="35%"></img></a>

Card Page example:
Card Page example 2:
Card Image example:
Card Image example 2:

(How to find your card image just below!)
By right clicking on your browser's address bar you can select "copy" to get your card page's address.

By right clicking on your card image you can select "copy link address" to get your image's address.

Here is an example of how to get the address for the card page your using! (Click the link!) A 1.png?dl=0"

Here is an example of how to get the address for the card's picture/image your using! (Click the link!) A 2.png?dl=0

The result of the first example is this...

The result of the second example looks similar to this...

The result of the method for separate rows...

If you would like additional help you may leave a comment here or directly to I as a user. Hope this is helpful! :)

I would be tremendously grateful if all contest and/or challenge holders make a link to this post in those they hold for the convenience of new CardSmiths! :)

If you have feedback to improve this tutorial, please message @modnation675 as a user!


  • edited February 2017
    Short Lesson on changing the Size of your pictures/images!

    To change the size of the image just look at the following...

    <a href="Card Page"><img src="Card Image" width="30%"></img></a>

    We're interested in this part of that line...
    <a href="Card Page"><img src="Card Image"width="30%"></img></a>

    Or for an image without links do this!
    <img src="Card Image"width="30%"></img>

    Now I'll do an example. (Notice I just changed the number so the first is larger!)
    <a href="Card Page"><img src="Card Image" width="45%"></img></a><a href="Card Page"><img src="Card Image" width="30%"></img></a>

    I'll do mine without spacing! (The pictures are below!)

    Card Page example:
    Card Image example:


    Hope this is useful. The ideal card size is 25->30%. (Cards with lots of text can use 35% at times!)
  • edited February 2017
    Thumbs size is somewhere around 27 to 28%

    What I really love is the discovery of using thumbs vs. percentages.

    Here is what I mean... notice the difference in size and image quality

    image vs. image

    Thumbs size is on the left, and you'll notice the clarity isn't quite as good.
    Percentage size is on the right, and the clarity is really good, especially with smaller text.
  • edited October 2017
    Short Lesson on Fancy Text!

    Left is the result.
    Right is the method.

    Bold Text : <b>Bold Text</b>
    Underlined Text : <u>Underlined Text</u>
    Strikethrough Text : <s>Strikethrough Text</s>
    Link Text : <a href="Your link">Link Text</a>
    Colored Text : <font color="green">Colored Text</font>
    Different Size Text : <font size="4">Different Size Text</font> (Note: The range of sizes is from 1 to 7.)
    Code Text : <code>Code Text</ code> (Note: Remove the space between / and code)

    If you have any questions, please leave a comment! :)
  • edited February 2017
    The following link will bring you to an extended tutorial.
    Click here for extended details.

    It's a lot to look through. Which is why I made this tutorial!
  • I used to be able to -right click- -copy- an image then -paste- it in the the link for a clickable link. Now I'm not able to do that...just paste a blank?
  • I use a laptop and Microsoft Edge, so I have to right click and "Ask Cortana" to see the full image. When I do that, it takes me to the page link, and then I just copy the address.
  • @modnation675
    Well, I don't know why it suddenly gave me issues when nothing has been reconfigured in my compture settings. But, Corwinnn's tip works. Thanks a lot.
  • edited July 2018


    I've been linking cards from other sites with the width tag, but that sentence pops up. How do I remove the part that says "This image has been resized to fit in the page. Click to enlarge."

    Edit: Ok, so after some experimenting and searching html tags, it looks the only way is to literally resize it smaller (to a pixel width of ~710px, less for mobile, which is probably the width of the comment column) so that it doesn't resize it on its own. That seems tedious, so if someone has another solution, that would be great.
  • somehow getting the blurry image issue again with the original code, any help perchance to get rid of this?
  • edited July 2018
    @Credius - Are you using the thumb version? You want to replace thumbs with full
  • Example
    image image
    The left image is the full version, the one on the right is the thumb version. Notice the clarity difference.

    Left Version Code
    <a href=><img src= width=35%></a>

    Right Version Code
    <a href=><img src= width=35%></a>

    Below is the thumb at actual size
  • ----------------------------------------------------------
    Click here to move to the start of the tutorial!
  • edited October 2018
    @modnation675 Anyone know how to insert images that are jpegs or pdfs?
  • @ShaperKyon You should be able to upload the images to Imgur
    If you can't then you can snap an image with snipping tools then save that image which can be uploaded to Imgur.
    From Imgur you use the [img src="Card Image" width="35%"> instead of [ ] ) format and drags the image from imgur into the "card image".

    I hope that helps ! :)
  • edited January 2019
  • edited January 2019
  • edited January 2019
    All good. I figured it out.
  • edited January 2019
    Having trouble? You can show me what you're trying to do (Replace all "<" & ">" with parentheses) and I might be able to help :D
  • how do you get the image on the page with the but you can see image on page
  • @Lujikul Okay, what's this about? You making purple a thing? I want in
Sign In or Register to comment.