I would like to add social media icons right beneath the profile picture, like the picture below (without name and title). I was using markdown and was wondering how this could be done. Thanks.
1 Like
Hi.
Here is the short answer.
Make some Markdown images with am empty line after the first picture and then add centering on the whole lot.
<div align="center">
</div>
I do something simple here
Here’s the long answer.
An alternative to align=center is to use a css class like
.center {
text-align: center
}
Putting Markdown inside HTML (without indenting Markdown) works great in GitHub Markdown, but not on Jekyll.
So you’ll probably want to have one Markdown page or includes file that is .md and use a layout to add the div tag and align center.
Lastly I want to add that using Markdown is probably a bad approach for this.
If you are writing text content and headings, then Markdown makes sense.
But when you want to center items (as noted above), and resize images (as covered below).
Especially if your icons are SVGs - if they are PNGs you can resize them as images themselves but if they are SVGs then that gives more flexibility. But… you need to apply a size to your SVGs to avoid them looking massive and Markdown in Jekyll can’t do that.
The same goes for your profile image. You won’t be able to specify a size, or use CSS to change the size easily, if you use Markdown.
So an HTML solution would be like this. And you can put this in your index.md as a Markdown field, but it is probably better as an includes file or in a layout for more control and reusability. Also note late of empty lines in the HTML, which allows me to ident without breaking the code.
---
---
## About me
<div class="center">
<a href="#">
<img src="{% link assets/me.png %}" alt="My profile" width="300">
</a>
<br>
<div class="social-icons">
<a href="{{ site.social.fb.target }}" alt="Facebook profile">
<img src="{% link assets/fb.svg %}" width="50">
</a>
<a><img></a>
</div>
</div>
Some more **Markdown** here.
You can also use svg tag instead of img tag for more control.
Hi, thank you so much for the detailed instruction. Yes, I would like to edit the “index.md”, add a profile picture, and add social media icons beneath the profile picture. I do not know much about HTML, could you please provide a snippet template that renders the “index.md” like the following picture? Much appreciated.
1 Like
Search “html text reflow around image”
This article covers that
In your case you’ll add the floating right to the div containing all your images, rather than a single image.
I won’t give the full solution though as you’ll learn and remember more by figuring it out yourself from pieces given then copy and pasting a solution.
If you want to learn html, Jekyll, markdown, etc. think of the problem you are trying to solve and search for it on Google or stackoverflow or Jekyll forums and someone has problem tried to do something similar. You might also have combine a few solutions.
