Add Speakers List to website

[mariobehling]

On scroll over please show (insert in template html)

• icons/links
  • git repos
  • twitter
  • link to website
  • short bio or statement

The document with the speaker data is here: https://docs.google.com/spreadsheets/d/1S7D9PrR8QqC_bU8h6920Ni3IHHhgaz9Nq-092tyj_4c/edit#gid=0

1. [x] Roland, Turner
2. [x] Barry, Threw
3. [ ] Herr, Flupke
4. [ ] Luther, Goh
5. [x] Davide Storti
6. [x] Ron Dunn
7. [x] Hunter, Nield
8. [x] Shivam, Verma
9. [x] Hans, Bakker
10. [x] Rishi, Shah
11. [ ] Sameer, Kumar
12. [x] Adam, Drake
13. [x] Owais, Zahid
14. [x] Michael, Cannon
15. [x] Saif, Niazi
16. [ ] Deepak, Karki
17. [ ] Aishwarya, Kaliki
18. [x] Rahul, Mahale
19. [x] Syah Dwi, Prihatmoko
20. [x] Kukuh, Syafaat
21. [x] Martin, Bähr
22. [x] Tim, Oxley
23. [x] David, Effendi
24. [x] Sarvesh, Ranjan
25. [ ] Ankit, -
26. [x] Udayan, Tandon
27. [x] Sher Minn, Chong
28. [x] Sebastiaan, Deckers
29. [x] Tomaž, Vajngerl
30. [ ] Maxime, Pourrat
31. [x] Faris, Muhamad Ali Fadloli
32. [ ] Kushan, Kushan Joshi
33. [x] Mike, Anderson
34. [ ] Chris, Lamb
35. [x] Daniel, Pocock
36. [x] Derek, Dai
37. [ ] Parmeshwr Prasad, Vishwakarma
38. [x] Dr. Udaykumar, Khadke
39. [x] Sayanee, Basu
40. [x] Praveen (Gnovi), Patil
41. [ ] Jia Hen, Tee
42. [ ] Carter, Emmart
43. [x] Vincent, De Smet
44. [x] Jigyasa, Grover
45. [ ] Sagar, Pandey
46. [x] Bruce, Momjian
47. [ ] Michael, Rebultan
48. [x] William, Hooi
49. [ ]
50. [x] Anwesha, Das
51. [x] Huiren, Woo
52. [x] Kushal, Das
53. [ ] Sayan, Chowdhury
54. [x] Hong Phuc, Dang
55. [x] Joerg, Henning
56. [x] Rafal, Kowalski
57. [x] Sudheesh, Singanamalla
58. [ ] Alexander, Couzens
59. [x] Sudheesh, Singanamalla
60. [x] Jiin Joo, Ong
61. [ ] Phuc, Pham
62. [ ] Ganeshkumar, Shanmugam
63. [x] Michael Christen
64. [x] Cat, Allman
65. [x] Stephanie, Taylor
66. [x] Dan, Tran
67. [x] Gabriel, Perumal
68. [ ] Sahil, Bajaj
69. [ ] Gloria, Chiang
70. [x] Elizabeth, Joseph
71. [x] Dong, Ma
72. [ ] Matthew, Treinish
73. [x] Mhairi, O'Hara
74. [x] Fibish, Madathil
75. [x] Justin, Lee
76. [x] Thanh Son, Le
77. [x] Stephan, Wissel
78. [ ] Manan, Wason
79. [ ] Hai An, DANG
80. [x] Ningxin, Hu
81. [x] Zion, Ng
82. [x] Shadab, Zafar
83. [ ] Mark, Clarke
84. [ ] Garvit, Khatri
85. [x] Damini Satya, Kammakomati
86. [x] Meng Weng, Wong
87. [x] Nils, Magnus
88. [ ] Philips Kokoh, Prasetyo
89. [x] Aneesh, Devasthale
90. [ ] Sudheesh, Singanamalla
91. [x] Colin, Charles
92. [ ] Ishan, Khanna
93. [x] François, Cartegnie
94. [x] Yask, Srivastava
95. [x] Abdul, Rauf
96. [ ] Akhil, Pandey
97. [ ] Sandeep, Kapalawai
98. [ ] Anivar, Ammanath Aravind
99. [x] Robert, Reyes
100. [x] Ricky, Setyawan
101. [x] Mayank, Prasad
102. [x] Susan, Spencer
103. [x] Ulrich, Norbisrath
104. [x] Menghsuan, Tsai
105. [x] Rajat, Ujawane
106. [ ] Abhishek, Mishra
107. [ ] Kenji, Shimono
108. [ ] Alexander, Bezzubov
109. [ ]
110. [x] Chinmay, Pendharkar
111. [x] Eugene, Teo
112. [ ] Elda, Webb
113. [x] Jamen, Loh
114. [x] Syabiqah, Phang
115. [x] Wilfred, Wong
116. [x] Elda, Webb
117. [x] Keith, Bergelt
118. [x] Kevin, Huang
119. [x] Errazudin, Ishak
120. [x] Mayank, Sharma
121. [ ] Shwetank, Dixit
122. [x] Ricky, Setyawan
123. [ ] Anand, Jain
124. [ ] Abhishek, Ranjan
125. [ ] Manish, Kumar
126. [x] Jan-Christoph, Borchardt
127. [x] Sambuddha, Basu
128. [x] Sherman, Chen
129. [ ] Trilok, Tourani
130. [x] Satdeep, Gill
131. [ ] Ivan, Zimine
132. [ ] Norvan, Vogt
133. [x] Martin, Andrews
134. [ ] Amit, Shah
135. [x] Amita, Sharma
136. [x] Anisha, Narang
137. [x] George, Goh
138. [ ] Huzaifa, Sidhpurwala
139. [x] Lennart, Poettering
140. [ ] Liron, Aravot
141. [x] Parag Ashok, Nemade
142. [x] Sundeep, Anand
143. [ ] Yaniv, Bronhaim
144. [x] Harish, Pillay
145. [x] Alexandre, Lision
146. [x] Marco A., Gutiérrez
147. [x] Carsten, Haitzler
148. [ ] Oren, Golan
149. [x] David, Crellin
150. [x] Victoria, Bondarchuk
151. [ ] U-Zyn, Chua
152. [x] Swapneel, Patnekar
153. [x] Bernard, Leong
154. [x] Soares, Chen
155. [ ] Emin, Aksehirli
156. [x] Delynn, Ho
157. [x] Jaminy, Prabaharan
158. [x] Bunnie, Huang
159. [x] Lorenz, Gerber
160. [x] Amit Kumar, JHA
161. [x] Sahil, Shekhawat
162. [x] Masakazu, Takasu
163. [ ] Umair, Khan
164. [x] Kranthi Kiran, Guduru
165. [ ] Leon, Lim
166. [x] Saad, Chinoy
167. [x] Misako Ito
168. [x] Derek, Dai
169. [x] Satoshi Nagayasu
170. [x] Dilum Navanjana

[aviaryan]

Hi @mariobehling I would like to work on this issue. I saw the spreadsheet and I plan to programaticaly extract all data and put in the html file. I will take care of duplicates, missing images and will make sure that the output is neat and good-looking.

[joerx]

Please use the already extracted data here: https://github.com/fossasia/open-event-scraper/blob/master/out/speakers.json. If you have anything missing there, please open an issue or PR on open-event-scraper. Thanks!

[mariobehling]

Best is to upload any photo to Github instead of pulling them from original locations. It is too slow otherwise.

[aviaryan]

@mariobehling Yes. It will also be more reliable that way. I will download the images into the img directory.

[aviaryan]

@mariobehling @joerx There are 162 distinct speakers right now. Loading them at once will make the page gigantic. So I was thinking of adding a show more button to incrementally load them. Also I will use JS to fetch speakers at runtime to keep the HTML clean. What do you suggest ?

[daminisatya]

@aviaryan What are you up to ? with this issue?

[aviaryan]

I have downloaded the images, resized them and can generate the html code to add a speaker but I am not sure whether we should have all the speakers in the home page (dynamic) or in a separate page. @daminisatya What do you suggest ?

EDIT - My repo - https://github.com/aviaryan/2016.fossasia.org/tree/speakers

[jigyasa-grover]

@joerx +1

[aviaryan]

Hello . I have finished adding speakers (with bio, links) on the page. https://github.com/aviaryan/2016.fossasia.org/tree/speakers I can't show a preview because it's not in my gh-pages branch. (My gh-pages branch is tracking PR #22 ) Here is a screenshot

PS - Elegant icon pack lacks github icon so I am using something else as a placeholder for now. PS2 - For now, I have only included speakers who have a image. I can show a placeholder image for anyone who doesn't have one.

Let me know what you think.

[daminisatya]

Looks great (Y) @aviaryan But why dont you try to automate the addition of the list, that's how you can make the upmost use of the "speakers.json" file ;)

[aviaryan]

@daminisatya I have automated everything, but in Python :pensive: (Link to the dirty script) Next, I will use JavaScript to load data from the json file. This will hopefully keep the HTML source cleaner. :sunglasses:

[sudheesh001]

@aviaryan Maybe what we could do is I think @daminisatya has also been working on this and has the JS part of it ready, Can you push the resized images with the format you've taken, use the name part of each speaker object to save the image and you could submit that as a pull request and her patch which she mailed me could help in finishing this, I am excited to see both of you finish this.

@@ -1237,6 +1133,36 @@
         <script src="js/tweetsfetcher.js"></script>
         <script src="js/placeholders.min.js"></script>
         <script src="js/scripts.js"></script>
+        <script>
+        $.ajax({
+           type : 'GET',
+           dataType : 'json',
+           url: '/schedule/speakers.json',
+           success : function(data) {
+               // console.log(data);
+               var names = data.speakers;
+               var speakerString = "";
+               for (var nameValue = 0; nameValue < names.length; nameValue++) {
+                   speakerString += "<div class=\"col-md-3 col-sm-6 speaker-column\">"+
+                                    "<div class=\"speaker\">"+
+                                    "<div class=\"image-holder\">"+
+                                    "<img class=\"background-image\" alt=\"\" src=\""+names[nameValue].photo+"\" height=\"285\" width=\"285\"\">"+
+                                    "<div class=\"hover-state text-center preserve3d\">"+
+                                       "<div class=\"social-links vertical-align\">"+
+                                           "<a href=\"#\"><i class=\"icon social_twitter\"></i></a>"+
+                                           "<a href=\"#\"><i class=\"icon social_linkedin\"></i></a>"+
+                                       "</div>"+
+                                   "</div>"+
+                               "</div>"+
+                               "<span class=\"speaker-name\">"+names[nameValue].name+"</span>"+
+                               "<span>"+names[nameValue].organisation+"</span>"+
+                           "</div>"+
+                       "</div>";
+               }
+               $('#speakersList').append(speakerString);
+           } 
+       });
+        </script>
     </body>
 </html>

It probably needs an edit in this line "<img class=\"background-image\" alt=\"\" src=\""+names[nameValue].photo+"\" height=\"285\" width=\"285\"\">" where the names[nameValue].photo can be replaced by the filename depending on how you name it.

Does this sound good ? @aviaryan and @daminisatya

[daminisatya]

@sudheesh001 sounds good. @aviaryan Can you raise a PR of all the resized downloaded images. Since you have already done with it ! We can push those images into this code and the list works fine. Looks like the image names are appended with the first and last name.

[aviaryan]

@sudheesh001 @daminisatya Sure. :+1:

Few points -

1. As I have implemented speaker bio, you will have to change speakerString code. You can see the new code here.
2. Similarly you can add website and github links too Code
3. Images are named as speaker name -> removes spaces -> lowercase. All are with .jpg extension.
4. Lots of speakers don't have images and images of some speakers weren't downloadable. For them, you may use img/default_profile.png
5. Bio can take a maximum of around 180 chars. Anything more than that will overflow. I used this code to keep bio in limits.

def trimBio(bio):
    st = 0
    while (bio.find('.', st) > -1):
        if bio.find('.', st) > 180:
            if st == 0:
                return bio[:180]
            else:
                return bio[:st]
        st = bio.find('.', st) + 1
    return bio[:180]

[mariobehling]

@aviaryan what about all those speakers? Could you make a pull request and then we work step by step to improve? We need the speaker on the page asap.

Also could you set up the github pages on your account. So we can see the progress more easily? Cheers.

[mariobehling]

@aviaryan Could you please join the channel http://fossasia-slack.herokuapp.com and the channel app-dev

[mariobehling]

@all interesting work here. I see that no photo has been added so far to the site and that you are working on scripts. This seems like over-engeneering. I need help to add photos to the page manually now. the script generated images that are distorted and you overwrote existing images not taking care of capitals. This broke the site and we had missing images making the page looking like a page from 1998. Please help me to do this manually at first and then improve step by step.

[aviaryan]

@aviaryan what about all those speakers? Could you make a pull request and then we work step by step to improve? We need the speaker on the page asap.

I stopped working on it after #23 got merged. From there, @daminisatya was adding the JS to dynamically load speakers from .json file. Her PR is #24 . It is currently missing bio and other links. What PR should I make ? @mariobehling

Slack Channel joined. username - aviaryan