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

modnation675modnation675
edited February 2020 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:
http://mtgcardsmith.com/view/remus-angel-of-penance
Card Page example 2:
http://mtgcardsmith.com/view/ascending-angel
Card Image example:
http://mtgcardsmith.com/view/complete/full/2017/2/1/1487381520134947.png
Card Image example 2:
http://mtgcardsmith.com/view/complete/full/2017/2/5/1487381777743379.png

(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!)
https://www.dropbox.com/s/3bbgyr8zb560gr6/Tutorial 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!)
https://www.dropbox.com/s/hn0gecjqviaeupn/Tutorial A 2.png?dl=0

The result of the first example is this...
image

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

The result of the method for separate rows...
image
image

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!
«1

Comments

  • modnation675modnation675
    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:
    http://mtgcardsmith.com/view/remus-angel-of-penance
    Card Image example:
    http://mtgcardsmith.com/view/complete/full/2017/2/1/1487381520134947.png

    imageimage

    Hope this is useful. The ideal card size is 25->30%. (Cards with lots of text can use 35% at times!)
  • CorwinnnCorwinnn
    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.
  • modnation675modnation675
    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! :)
  • modnation675modnation675
    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!
  • Beydin13Beydin13
    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?
  • CorwinnnCorwinnn
    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.
  • Beydin13Beydin13
    image
  • Beydin13Beydin13
    @modnation675
    @Corwinnn
    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.
  • fiskertonfiskerton
    edited July 2018
    Question

    image

    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.
  • CrediusCredius
    somehow getting the blurry image issue again with the original code, any help perchance to get rid of this?
  • CorwinnnCorwinnn
    edited July 2018
    @Credius - Are you using the thumb version? You want to replace thumbs with full
  • CorwinnnCorwinnn
    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=https://mtgcardsmith.com/view/tarcis-princess-of-erebos-1><img src=https://mtgcardsmith.com/view/complete/full/2018/7/18/1531973881904402.png width=35%></a>

    Right Version Code
    <a href=https://mtgcardsmith.com/view/tarcis-princess-of-erebos-1><img src=https://mtgcardsmith.com/view/complete/thumbs/2018/7/18/1531973881904402.png width=35%></a>

    Below is the thumb at actual size
    image
  • TenebrisNemoTenebrisNemo
    ----------------------------------------------------------
    Click here to move to the start of the tutorial!
    ----------------------------------------------------------
  • CorwinnnCorwinnn
    edited October 2020

    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>
  • Rayne-LordRayne-Lord
    Any idea on how to post downloaded images? Stuff without an html?

    Just started a thread for maps--and can't figure out how to post any of mine lol.
  • MemoryHeadMemoryHead
    @Rayne-Lord I know it doesn't really answer your question, but one method (and the one I use in that kind of situation for preference) is running the image through a site like Imgur. That gives it an image link that the HTML code can use.
  • CorwinnnCorwinnn
    B = Bold
    I = Italics
    S = Strikethrough
    Numbered Bullets (all)
    Bullet Points (all)
    Format
     -Headers
     -Quote
     -Code
     -Spoiler
    Emojis
    Links
    Attach Files
    Attach Images
     -From Computer
     -From URL
    Alignment 
    HTML

    We might be in need of a new Tutorial!!


  • Fantastickill7Fantastickill7
    If you use use the HTML(</>) option everything works the same as it used to.
  • Fallen_Lord_VulganosFallen_Lord_Vulganos
    edited March 2020
    Hmm...

       

     Ight, it still works actually... just change the size to 200 or something bigger than 200. (The width above is 250)
  • MonkeyPirate2002MonkeyPirate2002
    Note on using the old HTML option:  If you go to edit the comment, the size of the image will change from a percentage to a flat number.
  • CorwinnnCorwinnn
    Width should be 250 so that we're not posting ginormous images and terrorizing the threads

    XD
  • SpellPiper2213SpellPiper2213
    For practice image
  • RanshiRanshi
    The old thing didn't work for me.

    <a href=https://mtgcardsmith.com/view/korvolds-hunger> <img src=https://mtgcardsmith.com/view/complete/full/2020/3/11/1583957281708294.png width=35%></a>
  • CnBCustomsCnBCustoms
    edited March 2020


    @Ranshi, did you click the "</>" button above the textbox? That should make it work.
  • RanshiRanshi
    Oh... I didn't notice that.
  • Bowler218Bowler218
    Or, of course, download the picture and use the little portrait icon:
    Seriously, did no one see my post on how to use the new layout?!?!
  • MemoryHeadMemoryHead
    @Bowler218 I think that people are interested specifically in being able to do the old HTML image linking, not just making an image appear. The HTML's a lot easier to resize and manipulate and you can embed a link in it.
  • Xero0Xero0
    I keep clicking the html button and it doesnt really work

  • Xero0Xero0
    do I press it before or after the code?

    and it kinda breaks noncode stuff sometimes
  • MemoryHeadMemoryHead
    @Xero0 Press the </> button, insert the code and fill it in with html locations and image sources or whatever else you're doing, then press it again.

    Basically, you want to have the </> option turned on so long as you're manipulating html code and turned off so long as you aren't. Also, make sure that it's turned off before you post the comment because the code acts differently in and out of it and so you can end up with incorrect image sizes. Always remember to preview the comment before posting to check whether it actually looks right.
Sign In or Register to comment.