Update images and cards

index.html

@@ -14,9 +14,8 @@
 		<p>In this page, you will find a communications pack with examples of posts and images that you can use to share about your participation in this annotation sprint. Feel free to adapt all texts and images so that they appeal to communities of speakers in the language(s) you’re leading!</p>
 		<p>Here are some tips for better engagement:</p>
 		<p>1️⃣ Translate all texts and images to your target language.</p>
-		<p>2️⃣ Change the default parrot picture with your own profile picture!</p>
-		<p>3️⃣ Add your discord username so that collaborators can find you.</p>
-		<p>4️⃣ Share it with coworkers, family, friends and on any social network or channels of your choosing.</p>
+		<p>2️⃣ Add an image to your post to make it more eye-catching. Try the ones below!</p>
+		<p>3️⃣ Share it with coworkers, family, friends and on any social network or channels of your choosing.</p>
 		<p>If you have any questions, find Natalia over discord (@nelvirita) or email (natalia.elvira@huggingface.co).</p>
 		<div id="card-container"></div>
 	</body>

script.js

@@ -1,54 +1,37 @@
 
-const lead_announcement = `<p>I’m thrilled to share that I’ll be leading <var>Asturian and Aragonese</var> in Hugging Face’s collaborative annotation sprint! 🤗</p><p>I’ll be helping to build an open dataset to improve language models for our language. Do you want to join me? I’ll share more details about this soon!</p>`
-const recruit_collaborators = `<p>Do you want to improve the quality of language models in <var>Asturian and Aragonese</var>?</p><p>Join me in this collaborative annotation sprint! No experience needed - simply follow the link to start annotating!`
-const recruit_leads = `<p>I’m thrilled to share that I’ll be leading <var>Asturian and Aragonese</var> in Hugging Face’s collaborative annotation sprint! 🤗</p><p>Would you like to lead the efforts in your own language? Check if it’s still listed!</p>`
+const lead_announcement = `I’m thrilled to share that I’ll be leading <var>Asturian and Aragonese</var> in Hugging Face’s collaborative annotation sprint! 🤗</p><p>I’ll be helping to build an open dataset to improve language models for our language. Do you want to join me? I’ll share more details about this soon!`
+const recruit_collaborators = `Do you want to improve the quality of language models in <var>Asturian and Aragonese</var>?</p><p>Join me in this collaborative annotation sprint! No experience needed - simply follow the link to start annotating!`
+const recruit_leads = `I’m thrilled to share that I’ll be leading <var>Asturian and Aragonese</var> in Hugging Face’s collaborative annotation sprint! 🤗</p><p>Would you like to lead the efforts in your own language? Check if it’s still listed!`
 
-function createCard(title, text, url) {
+function createCard(title, text, url, image_src, image_url) {
     let url_text = text.replaceAll('<p>', '').replaceAll('</p>', '%0A%0A')
-    if (url) {
+    var text_block = (url) ? `<p>${text}</p><p>${url}</p>` : `<p>${text}</p>`
+    var image_button = (image_url) ? `<a href="${image_url}" target="_blank"><button class="button-4" role="button">Edit this image</button></a>` : `<a href="${image_src}" download><button class="button-4" role="button">Download this image</button></a>`
         
-        let template = `
-            <div class="card">
-                <h2>${title}</h2>
-                ${text}<p>${url}</p>
-                <a href="https://huggingface.co/docs/hub/spaces" target="_blank"><img alt="Image for posts to rectruit collaborators" src="images/lead_announcement.png"></a>
-                <div class="button-container" align="center">
-                <a href="https://huggingface.co/docs/hub/spaces" target="_blank"><button class="button-4" role="button">Edit this image</button></a>
-                <a href="https://x.com/intent/post?text=${url_text}${url}" target="_blank"><button class="button-4" role="button">Share in X</button></a>
-                <a href="https://www.linkedin.com/feed/?shareActive=true&text=${url_text}${url}" target="_blank"><button class="button-4" role="button">Share in LinkedIn</button></a>
-                <a href="https://bsky.app/intent/compose?text=${url_text}${url}" target="_blank"><button class="button-4" role="button">Share in Bluesky</button></a>
-                </div>
-            </div>
-            </br>
-            `
-        return template;
-        
-    } else {
-        let template = `
+    let template = `
         <div class="card">
             <h2>${title}</h2>
-            <p>${text}</p>
-            <a href="https://huggingface.co/docs/hub/spaces" target="_blank"><img alt="Image for posts to rectruit collaborators" width="500" src="images/lead_announcement.png"></a>
+            ${text_block}
+            <img alt="Image for posts to rectruit collaborators" src="${image_src}">
             <div class="button-container" align="center">
-            <a href="https://huggingface.co/docs/hub/spaces" target="_blank"><button class="button-4" role="button">Edit this template</button></a>
-            <a href="https://x.com/intent/post?text=${url_text}" target="_blank"><button class="button-4" role="button">Share in X</button></a>
-            <a href="https://www.linkedin.com/feed/?shareActive=true&text=${url_text}" target="_blank"><button class="button-4" role="button">Share in LinkedIn</button></a>
-            <a href="https://bsky.app/intent/compose?text=${url_text}" target="_blank"><button class="button-4" role="button">Share in Bluesky</button></a>
+            ${image_button}
+            <a href="https://x.com/intent/post?text=${url_text}${url}" target="_blank"><button class="button-4" role="button">Share in X</button></a>
+            <a href="https://www.linkedin.com/feed/?shareActive=true&text=${url_text}${url}" target="_blank"><button class="button-4" role="button">Share in LinkedIn</button></a>
+            <a href="https://bsky.app/intent/compose?text=${url_text}${url}" target="_blank"><button class="button-4" role="button">Share in Bluesky</button></a>
             </div>
         </div>
         </br>
         `
-        return template;
-    }
+    return template;
+        
 }
 
-function addCardToContainer(language, link, customText) {
+function addCardToContainer(title, text, url, image_src, image_url) {
     const cardContainer = document.getElementById('card-container');
-    const cardHTML = createCard(language, link, customText);
+    const cardHTML = createCard(title, text, url, image_src, image_url);
     cardContainer.innerHTML += cardHTML;
 }
 
-addCardToContainer("Announce you've been selected to be a lead!", lead_announcement);
-addCardToContainer("Recuit collaborators for your language", recruit_collaborators, 'https://nataliaelv-language-leads-dashboard.hf.space/');
-addCardToContainer("Recuit leads for other languages", recruit_leads, 'https://nataliaelv-language-leads-dashboard.hf.space/');   
-
+addCardToContainer("Announce you've been selected to be a lead!", lead_announcement, null, "images/lead_announcement.png", "https://docs.google.com/presentation/d/1CA4xLLf6rpUlDBym0SORrJZskNDKiBc51tngZkyGDXU/edit#slide=id.p");
+addCardToContainer("Recuit collaborators for your language", recruit_collaborators, url='https://nataliaelv-language-leads-dashboard.hf.space/', image_src="images/recruit_collaborators.png", image_url="https://docs.google.com/presentation/d/1Mouh1HpmJYPZFJ-99y9bRZyeb2lLqD2KB3btnXwVJyU/edit#slide=id.p");
+addCardToContainer("Recuit leads for other languages", recruit_leads, 'https://nataliaelv-language-leads-dashboard.hf.space/', image_src="images/recruit_leads.png");