creativecommons · Queen-codes · Oct 2, 2024 · Oct 3, 2024 · Oct 4, 2024 · Oct 10, 2024
@@ -49,6 +49,12 @@ code {
   left: unset;
 }
 
+.hidden {
+  display: none;
+}
+#no-resources-text {
+  text-align: center;
+}
 #thumbnaillist {
   grid-area: content;
   display: grid;
@@ -318,3 +324,13 @@ footer .donate a {
     font-size: 5vw;
   }
 }
+
+@media (min-width: 1024px) {
+  #no-resources-text {
+    position: absolute;
+    top: 65%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 80%;
+  }
+}
@@ -79,6 +79,23 @@ dynamicStyle.type = "text/css";
 dynamicStyle.innerHTML = ".thumbnailbox { display: none; }";
 document.head.appendChild(dynamicStyle);
 
+// To display a No matching resources text
+function noResourcesText() {
+  //this selects all resources available
+  const availableResources = document.querySelectorAll(".thumbnailbox");
+  // Check if any of the resources are currently available and shown
+  const availableResourceFound = Array.from(availableResources).some(
+    (resource) => window.getComputedStyle(resource).display === "block"
+  );
+  const messageText = document.getElementById("no-resources-text");
+  // If no resources are matching remove hidden to show the text
+  if (!availableResourceFound) {
+    messageText.classList.remove("hidden");
+    //if a resource is available, add hidden class to hide text
+  } else {
+    messageText.classList.add("hidden");
+  }
+}
 // If no filter is selected, display all the resources by "display:block"
 if (!topic && !medium && !language) {
   dynamicStyle.innerHTML += " .thumbnailbox { display: block; }";
@@ -97,6 +114,10 @@ if (!topic && !medium && !language) {
   dynamicStyle.innerHTML += `${selectedFilters} { display: block; }`;
 }
 
+document.addEventListener("DOMContentLoaded", function () {
+  noResourcesText();
+});
+
 // If user has selected some Topic filter, add class resourcenavtopicknown with "display:block".
 // Otherwise, add class resourcenavtopicunknown with "display:block"
 // This is for displaying the list of available filters to be selected from

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <title>{{ page.title }} | Creative Commons Resource Archive</title>
@@ -61,7 +61,10 @@ <h1>Resources</h1>
 
         <!-- If the page following this layout is All (all.html), then display the page content here -->
         {% if page.title == "All" %} {{content}} {% endif %}
-
+        <!--The div to display the messsage when no resources are matching-->
+        <div id="no-resources-text" class="hidden">
+          <p>No resources are matching these filters</p>
+        </div>
         <!-- This is the section that shows all the resource cards in the site.
        The homepage shows upto 16 'featured' items ordered (1) to (16 or lesser) -->
         <ul id="thumbnaillist">
@@ -71,7 +74,9 @@ <h1>Resources</h1>
             class="thumbnailbox {{ page.topic }} {{ page.medium }} {{page.language}}"
           >
             <article>
-              <img class="thumbnail" src="{{page.image-thumb}}" />
+              <img class="thumbnail" src="{{page.image-thumb}}" alt="{% if
+              page.image-alt %}{{ page.image-alt }} {% else %} "" {% endif %} "
+              />
               <h3 class="thumbnailtitle">
                 <a class="thumbnailLink" href="{{ page.permalink }}"
                   >{{ page.title }}</a
@@ -93,7 +98,9 @@ <h3 class="thumbnailtitle">
             class="thumbnailbox {{ page.topic }} {{ page.medium }} {{page.language}}"
           >
             <article>
-              <img class="thumbnail" src="{{page.image-thumb}}" />
+              <img class="thumbnail" src="{{page.image-thumb}}" alt="{% if
+              page.image-alt %}{{ page.image-alt }} {% else %} "" {% endif %} "
+              />
               <h3 class="thumbnailtitle">
                 <a class="thumbnailLink" href="{{ page.permalink }}"
                   >{{ page.title }}</a

@@ -41,11 +41,17 @@ <h1>{{page.title}}</h1>
 
       <!-- else, display the {image-full} image here -->
       {% if page.image-full %}
-      <figure><img src="{{page.image-full}}" /></figure>
+      <figure>
+        <img src="{{page.image-full}}" alt="{% if page.image-alt %}{{
+        page.image-alt }} {% else %} "" {% endif %} "/>
+      </figure>
       {% else %}
 
       <!-- If the resource doesn't contain embed or image-full, display a placeholder here -->
-      <figure><img src="/_assets/images/placeholder-500.gif" /></figure>
+      <figure>
+        <img src="/_assets/images/placeholder-500.gif"alt="{% if page.image-alt
+        %}{{ page.image-alt }} {% else %} "" {% endif %} " />
+      </figure>
       {% endif %} {% endif %}
 
       <!-- The links to download, view or visit the resource are present here -->

@@ -6,6 +6,7 @@ weight: 1
 featured: 7
 image-full: /_assets/images/buildingonthepast-500.png
 image-thumb: /_assets/images/buildingonthepast-200.png
+image-alt: "A boy wearing a green long-sleeve shirt, with the words Creativity on the image."
 topic: creativity
 language: en
 medium: video
@@ -15,4 +16,4 @@ downloadurl: https://archive.org/details/Justin_Cone_-_Building_On_The_Past_-_64
 embed: <iframe src="https://archive.org/embed/Justin_Cone_-_Building_On_The_Past_-_640x480" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
 author: Justin Cone
 license: CC BY 3.0
----
+---
@@ -5,6 +5,7 @@ published: true
 weight: 3
 image-full: /_assets/images/cc-version-40-for-education-500.png
 image-thumb: /_assets/images/cc-version-40-for-education-200.png
+image-alt: "A black background displaying creative commons logo and the 4.0 version of education"
 topic: oer licenses
 language: en
 medium: slides
@@ -15,8 +16,8 @@ author: Jane Park
 license: CC BY 2.5
 ---
 
-In 2013, we launched version 4.0 of the CC license suite and it is ready for anyone to use now to apply to their educational resources or other creative works. 
+In 2013, we launched version 4.0 of the CC license suite and it is ready for anyone to use now to apply to their educational resources or other creative works.
 
-But what does that mean? What's new in 4.0 that wasn't there in 3.0? And just as importantly, what has stayed the same so that you don't have to worry about changes to licenses you weren't expecting? Lastly, I'll go over some examples of organizations and institutions who have already upgraded to the 4.0 version of whatever license they were using. 
+But what does that mean? What's new in 4.0 that wasn't there in 3.0? And just as importantly, what has stayed the same so that you don't have to worry about changes to licenses you weren't expecting? Lastly, I'll go over some examples of organizations and institutions who have already upgraded to the 4.0 version of whatever license they were using.
 
-Note: These slides are meant to be used as a resource by presenters --- please download the file and see the detailed notes accompanying each slide for the actual information. 
+Note: These slides are meant to be used as a resource by presenters --- please download the file and see the detailed notes accompanying each slide for the actual information.
@@ -6,6 +6,7 @@ featured: 4
 layout: resource
 image-full: /_assets/images/creative-commons-kiwi-500.jpg
 image-thumb: /_assets/images/creative-commons-kiwi-200.jpg
+image-alt: "Creative commons logo, and a blue and green globe with interwoven threads on it "
 topic: licenses
 language: en
 medium: video
@@ -17,4 +18,4 @@ author: Creative Commons Aotearoa New Zealand
 license: CC BY 3.0
 ---
 
-A quick video on the basics of Creative Commons. Downloadable from [Vimeo](//vimeo.com/26118296) and [Internet Archive](//archive.org/details/CreativecommonsKiwi).
+A quick video on the basics of Creative Commons. Downloadable from [Vimeo](//vimeo.com/26118296) and [Internet Archive](//archive.org/details/CreativecommonsKiwi).
@@ -7,6 +7,7 @@ author: Minist&#232;re de la Culture et des Communications
 license: CC BY-SA 4.0
 image-full: /_assets/images/les-licences-creative-commons-500.png
 image-thumb: /_assets/images/les-licences-creative-commons-200.png
+image-alt: "Visual representation of the various types of creative commons licenses."
 topic: licenses
 language: fr
 medium: video
@@ -15,4 +16,3 @@ blurb: A short video that explains how Creative Commons licenses work.
 downloadurl: http://www.dailymotion.com/video/x1tg4gv_les-licences-creative-commons_webcam
 embed: <iframe frameborder="0" width="480" height="270" src="//www.dailymotion.com/embed/video/x1tg4gv" allowfullscreen></iframe><br /><a href="http://www.dailymotion.com/video/x1tg4gv_les-licences-creative-commons_webcam" target="_blank">Les licences Creative Commons</a> <i>by <a href="http://www.dailymotion.com/culture-gouv" target="_blank">culture-gouv</a></i>
 ---
-
@@ -7,6 +7,7 @@ featured: 10
 layout: resource
 image-full: /_assets/images/oer-whats-in-it-for-me-500.png
 image-thumb: /_assets/images/oer-whats-in-it-for-me-200.png
+image-alt: "A graphic illustration explaining the benefits of Open Educational Resources."
 topic: oer
 language: en
 medium: print
@@ -19,4 +20,3 @@ license: CC BY 4.0
 ---
 
 Created during a 2-day workshop meeting of open education enthusiasts in Porto, Portugal ([related blog post](http://web.archive.org/web/20160328190836/http://oerpolicy.eu/postcard-from-the-oer-workshop-in-porto/)).
-
@@ -7,6 +7,7 @@ author: Martin Missfeldt
 license: CC BY-SA 3.0 DE
 image-full: /_assets/images/what-does-creative-commons-mean-500.gif
 image-thumb: /_assets/images/what-does-creative-commons-mean-200.gif
+image-alt: "An illustration of what creative commons mean and how they grant permission for sharing works."
 topic: licenses
 language: de en
 medium: infographic
@@ -18,4 +19,4 @@ downloadurl: http://www.bildersuche.org/en/creative-commons-infographic.php
 A fun infographic explaining the conditions on CC licenses.
 
 - [German](http://www.bildersuche.org/creative-commons-infografik.php)
-- [English](http://www.bildersuche.org/en/creative-commons-infographic.php)
+- [English](http://www.bildersuche.org/en/creative-commons-infographic.php)
@@ -6,6 +6,7 @@ featured: 10
 layout: resource
 image-full: /_assets/images/why-open-education-matters-500.gif
 image-thumb: /_assets/images/why-open-education-matters-200.gif
+image-alt: "A cartoon illustration of a child studying, with a rocket and scientific equations representing asprirations."
 topic: oer
 language: en
 medium: video
@@ -19,4 +20,4 @@ license: CC BY-SA 3.0
 
 Fun, animated video about open educational resources. Winner of Creative Commons' [Why Open Education Matters video competition](http://creativecommons.org/weblog/entry/33343).
 
-[Also available on Vimeo.](http://vimeo.com/43401199)
+[Also available on Vimeo.](http://vimeo.com/43401199)