How to place images that are linked and sized into tables on the Tech Forum.
Putting images in tables has been a serious struggle for me. I have had several people ask me how to do it and was always at a loss. I am happy to say I have finally figured out how to pull it off and I would like to share this with you.
We are after a table like the one below. It is your standard table with four cells. Each one contains an image and that image is linked to a product page.
Nuts
| Thread size | Metal | Plastic |
|---|---|---|
| M3 |  |
 |
| M4 |  |
|
How to do this
First we need an image. I am using the technique where the address is linked to a variable and stored at the bottom of the page. Each of the four images are actually all the same size. The size can be changed in line by increasing or decreasing the pixel count in this code.
![image|100x100][M3Metal]
If I change both the horizontal and vertical size from 100 to 50, this is what happens:
Next, I am going to link them to a Digi-Key product page using the same technique.
![image|100x100][M3Metal]
[ ][M3MetalLink]
[![image|100x100][M3Metal]][M3MetalLink]
The line built above will work anywhere in your post, but if you try to put it in a table you will see it does not work as you intend. This code:
## Nuts
|ThreadSize|Metal|Plastic|
|---|---|---|
|M3|[![image|100x100][M3Metal]][M3MetalLink] |[![image|100x100][M3Plastic]][M3PlasticLink] |
|M4|[![image|100x100][M4Metal]][M4MetalLink] |[![image|100x100][M4Plastic]][M4PlasticLink] |
[M3Metal]:upload://8jI37HvTmgnJrXP8itwyFCDGosD.jpeg
[M3MetalLink]:https://www.digikey.com/en/products/detail/b-f-fastener-supply/MHNZ-003/274973
[M3Plastic]:upload://izLuK5lgqjpuu1wjbTzQWLnEFUL.jpeg
[M3PlasticLink]:https://www.digikey.com/en/products/detail/essentra-components/HN-M3-79/391781
[M4Metal]:upload://MIDIwIPJGrnULIKMevZZImQlU9.jpeg
[M4MetalLink]:https://www.digikey.com/en/products/detail/b-f-fastener-supply/MHNZ-004/274974
[M4Plastic]:upload://izLuK5lgqjpuu1wjbTzQWLnEFUL.jpeg
[M4PlasticLink]:https://www.digikey.com/en/products/detail/essentra-components/HN-M4-79/391783
Will produce these results:
Nuts
| ThreadSize | Metal | Plastic |
|---|---|---|
| M3 | [![image | 100x100]M3Metal]M3MetalLink |
| M4 | [![image | 100x100]M4Metal]M4MetalLink |
Notice that the images do not show up? All we have is text? Also notice the space " " where the pipe " | " used to be in the code? It is treating the pipe differently than we intended in this situation.
The solution is to escape the pipe characters so they can work correctly. We do this by placing the character " \ " before the pipe
\ \
|M3|[![image |100x100][M3Metal]][M3MetalLink] |[![image |100x100][M3Plastic]][M3PlasticLink] |
The correct code should look like this
|M3|[![image\|100x100][M3Metal]][M3MetalLink]|[![image\|100x100][M3Plastic]][M3PlasticLink]|
Thats all there is too it.
Here is the complete and correct code:
## Nuts
|Thread size|Metal|Plastic|
|:---:|:---:|:---:|
|M3|[![image\|50x50][M3Metal]][M3MetalLink]|[![image\|50x50][M3Plastic]][M3PlasticLink]|
|M4|[![image\|50x50][M4Metal]][M4MetalLink]|[![image\|50x50][M4Plastic]][M4PlasticLink]|
[M3Metal]:upload://8jI37HvTmgnJrXP8itwyFCDGosD.jpeg
[M3MetalLink]:https://www.digikey.com/en/products/detail/b-f-fastener-supply/MHNZ-003/274973
[M3Plastic]:upload://izLuK5lgqjpuu1wjbTzQWLnEFUL.jpeg
[M3PlasticLink]:https://www.digikey.com/en/products/detail/essentra-components/HN-M3-79/391781
[M4Metal]:upload://MIDIwIPJGrnULIKMevZZImQlU9.jpeg
[M4MetalLink]:https://www.digikey.com/en/products/detail/b-f-fastener-supply/MHNZ-004/274974
[M4Plastic]:upload://izLuK5lgqjpuu1wjbTzQWLnEFUL.jpeg
[M4PlasticLink]:https://www.digikey.com/en/products/detail/essentra-components/HN-M4-79/391783
Here is the table with the images linked.
Nuts
| Thread size | Metal | Plastic |
|---|---|---|
| M3 | |
|
| M4 | |
|
I hope this helps someone!