Add an option to connect main pic to social profile image from facebook,

github or gravatar.

In reference to issue #206, implement an option to connect main pic to
facebook, github or gravatar profile image.
This commit is contained in:
Manas 2017-02-11 00:09:14 +05:30 committed by Marcus Eisele
parent 4cc543b527
commit abd037068d
4 changed files with 51 additions and 1 deletions

View file

@ -7,6 +7,7 @@ In alphabetical order:
5. Jose Zamudio <jose.zamudiobarrera@postgrad.manchester.ac.uk>
6. Jørn Ølmheim <jorn@olmheim.com>
7. Kartik Arora <chipset95@yahoo.co.in>
8. Manas Gupta <manas94gupta@gmail.com>
8. Marcus Eisele <marcus.eisele@gmail.com>
9. Mike Kasberg <kasberg.mike@gmail.com>
10. Nathan Jaremkio <njaremko@gmail.com>

View file

@ -60,6 +60,26 @@ lines: # You can add HTML Tags in the Text
me-img: "/img/jetpacktocat.png"
# To use facebook profile pic comment the previous line and uncomment the following
# line, and replace 'user_id' with your facebook user id.
# Facebook user id can be found by clicking on your profile pic and the large number
# in the end of the url just before '&type' is your user id.
# Note: fbid is not the same as user id and user id only contains numbers
# me-img: "https://graph.facebook.com/user_id/picture?type=large&width=500&height=500"
# To use github profile pic uncomment the following line and replace 'user_name'
# with your github user name.
# me-img: "https://github.com/user_name.png?size=500"
# To use gravatar profile pic uncomment the following line and replace 'email_hash'
# with your gravatar profile email hash.
# You can create the email hash by using an online tool like 'http://www.md5hashgenerator.com/'
# just enter your email and it will generate the hash.
# me-img: "https://www.gravatar.com/avatar/email_hash?s=500"
##############################
# Color the browser elements #
##############################

View file

@ -11,7 +11,11 @@
<span class="intro-text">{{ content }}</span>
<h5>&nbsp;</h5>
<a href="#{{ site.pages_list['About'] }}" class="page-scroll">
<img class="img-me" src="{{site.baseurl}}{{ site.me-img }}" alt="">
{% if site.me-img contains "https://" %}
<img class="img-me" src="{{ site.me-img }}" alt="">
{% else %}
<img class="img-me" src="{{site.baseurl}}{{ site.me-img }}" alt="">
{% endif %}
</a>
</div>
</div>

View file

@ -61,4 +61,29 @@ You can set your image from the following variable:
me-img: "/img/jetpacktocat.png"
</code></pre>
If you want to connect your Facebook profile image then you can use the following.
Replace `user_id` with your facebook user id. Facebook user id can be found by clicking
on your profile pic and the large number in the end of the url just before '&type' is your user id.
Note: fbid is not the same as user id and user id only contains numbers.
<pre><code data-trim class="yaml">
me-img: "https://graph.facebook.com/user_id/picture?type=large&width=500&height=500"
</code></pre>
If you want to connect your Github profile image then you can use the following.
Replace `user_name` with your Github user name.
<pre><code data-trim class="yaml">
me-img: "https://github.com/user_name.png?size=500"
</code></pre>
If you want to connect your Gravatar profile image then you can use the following.
Replace `email_hash` with your Gravatar profile email hash.
You can create the email hash by using an online tool like [md5hashgenerator](http://www.md5hashgenerator.com/),
just enter your email and it will generate the hash.
<pre><code data-trim class="yaml">
me-img: "https://www.gravatar.com/avatar/email_hash?s=500"
</code></pre>
All set!