How to align multiple card images on the same line
TappedOut forum
Posted on March 31, 2018, 5:12 a.m. by Dragoon91
Hello,
I would like to know if it's possible to align multiple images on the same line in deck description. Right now, they show up as one image per line. I've tried different things but it didn't work well, I'm not used to HTML. Has anyone managed to do it ?
Thank you for your help :)
Sadly, this doesn't seem to work. I wrote:
<center>
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=380442&type=card" style="display:inline-block;" />
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=152874&type=card" style="display:inline-block;" />
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=433063&type=card" style="display:inline-block;" />
</center>
And it shows up like this:
March 31, 2018 6:53 a.m.
multimedia says... #4
Hey, yes it shows not lining up here because there's not enough room to display the images in a line in a forum comment. It's not lining up when you use that code in the description of your deck page?
Here is the code in a deck page description of mine: Control the Suns (Budget). As you can see the images are lined up. I didn't change anything in the code.
<center>
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=380442&type=card" style="display:inline-block;" />
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=152874&type=card" style="display:inline-block;" />
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=433063&type=card" style="display:inline-block;" />
</center>
If the code isn't working for you in your deck description please link me to your deck page and post all your description code here.
March 31, 2018 7:12 a.m.
No, they do not line up like that in my deck description : Chaos Reborn II: Revenge of the Random Maelstrom :'(
Here is the code description:
<br>
# <center> Entropic Uprising: New Chaos Reborn, Episode 2: Revenge of the Random Maelstrom</center> #
<br><br>
<i>"Life cannot be calculated. That's the big mistake our civilization made. We never accepted that randomness is not a mistake in the equation -- it is part of the equation."</i>
<p align="right"> - Jeanette Winterson in “<i>The Stone Gods</i>”</p>
<br><br>
<center><img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=420667&type=card"></center>
<br><br>
<p align="justify">The goal is to only have nonland cards with random effects (i.e. cascade, flip-a-coin, reveal the top card, etc.). This deck aims to be a classic, normal deck: you've got draw, ramp, removal, tutors, threats, recursion, etc. (check the custom categories for more details) but you'll never know how things will work out and if you're gonna end up ahead of the table or not. I however try to ensure nothing goes _against_ you, so I avoid effects like [[Mogg Assassin]] or [[Desperate Gambit]]. There's still a few of them but I try to cut them as time goes by. As MaRo said in [one of his articles](https://magic.wizards.com/en/articles/archive/making-magic/kind-acts-randomness-2009-12-14) about randomness in Magic, I want excitement when I play this deck, not tension.</p>
<br><br>
<center>
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=380442&type=card" style="display:inline-block;" />
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=152874&type=card" style="display:inline-block;" />
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=433063&type=card" style="display:inline-block;" />
</center>
<center><img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=413674&type=card">
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=414365&type=card">
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=426576&type=card">
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=369003&type=card">
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=366248&type=card"></center>
<br><br>
<p align="justify">Keep in mind that this is a gimmicky, casual, multiplayer deck. The curve is high and the chances of winning are really low, but it's always a blast to play. I started this deck in 2011 with [[Ruhan of the Fomori]] at the helm (followed by [[Maelstrom Wanderer]] and now Yidris) so I tried a lot of different things but feel free to suggest cards! I'm not too interested in chaos cards (such as [[Warp World]], [[Scrambleverse]], [[Eye of the Storm]] and the likes) as I want this deck to not be unfun to play against. The mana base is pretty budget as I need my better lands for my other, more serious decks :)</p>
<br><br><br>
<p align="justify">Just FYI, there is a combo that is absolutely on theme with this deck: [[Chance Encounter]] + [[Frenetic Efreet]]. You can activate the Efreet's ability in response to itself as many times as you want (let's say a billion, just to be sure). If you win at least 10 of those flips, you'll have enough counters on Chance Encounter to win at your next upkeep. Even after having won once with it, I ultimately decided to cut it since both cards don't do much when they're not combined. Just be aware that, in a tournament setting, since the ability involved in the combo has a random outcome, you can't shortcut it and just say "I win"; The rules asks you to resolve all those flips, even though after 10 wins, they don't matter. But I guess it's up to the judge to decide :)</p>
What did I do wrong ?
March 31, 2018 7:35 a.m.
multimedia says... #6
Hey, check out Second Sun Control to see if this is what you want your deck description to look like.
# <center> Entropic Uprising: New Chaos Reborn, Episode 2: Revenge of the Random Maelstrom</center> #
<br><br>
<i>"Life cannot be calculated. That's the big mistake our civilization made. We never accepted that randomness is not a mistake in the equation -- it is part of the equation."</i>
<p align="right"> - Jeanette Winterson in “<i>The Stone Gods</i>”</p>
<br>
<center><img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=420667&type=card"></center>
<br><br>
<p align="justify">The goal is to only have nonland cards with random effects (i.e. cascade, flip-a-coin, reveal the top card, etc.). This deck aims to be a classic, normal deck: you've got draw, ramp, removal, tutors, threats, recursion, etc. (check the custom categories for more details) but you'll never know how things will work out and if you're gonna end up ahead of the table or not. I however try to ensure nothing goes _against_ you, so I avoid effects like [[Mogg Assassin]] or [[Desperate Gambit]]. There's still a few of them but I try to cut them as time goes by. As MaRo said in [one of his articles](https://magic.wizards.com/en/articles/archive/making-magic/kind-acts-randomness-2009-12-14) about randomness in Magic, I want excitement when I play this deck, not tension.</p>
<br>
<center>
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=380442&type=card" style="display:inline-block;" />
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=152874&type=card" style="display:inline-block;" />
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=433063&type=card" style="display:inline-block;" />
</center>
<center>
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=413674&type=card" style="display:inline-block;" />
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=414365&type=card" style="display:inline-block;" />
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=426576&type=card" style="display:inline-block;" />
</center>
<center>
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=369003&type=card" style="display:inline-block;" />
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=366248&type=card" style="display:inline-block;" />
</center>
<br>
<p align="justify">Keep in mind that this is a gimmicky, casual, multiplayer deck. The curve is high and the chances of winning are really low, but it's always a blast to play. I started this deck in 2011 with [[Ruhan of the Fomori]] at the helm (followed by [[Maelstrom Wanderer]] and now Yidris) so I tried a lot of different things but feel free to suggest cards! I'm not too interested in chaos cards (such as [[Warp World]], [[Scrambleverse]], [[Eye of the Storm]] and the likes) as I want this deck to not be unfun to play against. The mana base is pretty budget as I need my better lands for my other, more serious decks :)</p>
<br>
<p align="justify">Just FYI, there is a combo that is absolutely on theme with this deck: [[Chance Encounter]] + [[Frenetic Efreet]]. You can activate the Efreet's ability in response to itself as many times as you want (let's say a billion, just to be sure). If you win at least 10 of those flips, you'll have enough counters on Chance Encounter to win at your next upkeep. Even after having won once with it, I ultimately decided to cut it since both cards don't do much when they're not combined. Just be aware that, in a tournament setting, since the ability involved in the combo has a random outcome, you can't shortcut it and just say "I win"; The rules asks you to resolve all those flips, even though after 10 wins, they don't matter. But I guess it's up to the judge to decide :)</p>
<br/>
I cleaned the code up a little, separating a block of three cards wrapped in a center tag per line instead of mashing them all together. Three card images when centered is the max that deck descriptions can fit when they're lined up.
Try this out and let me know if it works.
March 31, 2018 7:55 a.m.
multimedia says... #7
I linked to the wrong deck in my last post: Control the Suns (Budget) is the correct deck with your example.
March 31, 2018 8:06 a.m.
Thank you for your help, I did a copy/paste of your code as you did exactly what I wanted, but it still doesn't work, I don't know why!
March 31, 2018 8:13 a.m.
multimedia says... #9
Do you see the images in a line at my deck page with your example?
I'm trying to figure out why the HTML style attribute is not loading for you, but it loads perfectly fine for me.
March 31, 2018 8:17 a.m.
Yes, your deck shows up with three images per line, but not mine :(
March 31, 2018 8:21 a.m.
multimedia says... #11
What browser are you using: Chrome, Firefox, Safari, or IE?
March 31, 2018 8:23 a.m.
multimedia says... #13
Hey when I inspect the images in your deck description they don't show as having the style="display:inline-block;" this bit of code is what you want to line up the images.
Try this for me to test style in your description in something other than an image.
<p style="color:red;">Do you see this as color red?</p>
Please paste this code on top of your description to test, you can always delete it later.
March 31, 2018 8:44 a.m. Edited.
multimedia says... #14
Hey, it just occurred to me Tappedout has a problem sometimes with displaying an updated description right away. The code is changed in the description, you can view it changed in the editor, but these changes don't show up on the actual deck page. This same problem happens frequently with updates.
Most of the time to fix this you can logout of the site and then login again. If this doesn't work then wait a day and see if your deck description has changed. In the Firefox browser you can also clear the cache.
March 31, 2018 9:55 a.m. Edited.
Well, I pasted the line of code in the description and the text doesn't appear in red. I logout and cleared the cache but nothing has changed so far...
March 31, 2018 5:33 p.m.
multimedia says... #16
After saving in the editor, when you're in the editor for your deck do you see the description code as changed? Does the code in the editor show you the display:inline-block part of an image?
I need to understand if the code is actually updating when you save it. On this site code for a deck can be changed and updated, but not displayed properly outside the editor. If you can see the changed description code in the editor then this is a display problem not a code problem.
March 31, 2018 8:11 p.m.
Yes, the code is updated in the deck editor, I can clearly see the display:inline-block part.
multimedia says... #2
Hey, you can do this with CSS. You can use the style attribute with HTML.
Example:
This example is showing three images which are lined up and centered in the same area.
You can use style to add CSS to HTML; display:inline-block is a CSS property that's allowing the images to be displayed on the same line next to each other.
Hope this answered your question.
March 31, 2018 6:20 a.m.