Issue and Issue Archive use Media Library images

boulder_base.libraries.yml

@@ -257,7 +257,7 @@ ucb-current-issue:
     js/ucb-current-issue-block.js: {}
   css:
     theme:
-      css/ucb-current-issue-block.css: {}
+      css/block/ucb-current-issue-block.css: {}
 
 ucb-category-cloud:
   version: 1.x
@@ -281,7 +281,7 @@ ucb-latest-issue:
     js/ucb-latest-issue-block.js: {}
   css:
     theme:
-      css/ucb-latest-issue-block.css: {}
+      css/block/ucb-latest-issue-block.css: {}
 ucb-issue-archive:
   version: 1.x
   js:

css/ucb-latest-issue-block.css → css/block/ucb-latest-issue-block.css

@@ -8,6 +8,9 @@
 .ucb-latest-issue-card{
     max-width: 20%;
     margin-right: 20px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
 }
 
 .ucb-latest-issue-title{

js/ucb-current-issue-block.js

@@ -10,18 +10,21 @@ class CurrentIssueElement extends HTMLElement {
             }
         };
 
-        fetch(`/jsonapi/node/ucb_issue?include=field_ucb_issue_image&fields[file--file]=uri,url&filter[published][group][conjunction]=AND&filter[publish-check][condition][path]=status&filter[publish-check][condition][value]=1&filter[publish-check][condition][memberOf]=published&sort=-created`)
+        fetch(`/jsonapi/node/ucb_issue?include=field_ucb_issue_cover_image.field_media_image&fields[file--file]=uri,url&filter[published][group][conjunction]=AND&filter[publish-check][condition][path]=status&filter[publish-check][condition][value]=1&filter[publish-check][condition][memberOf]=published&sort=-created`)
             .then(handleError)
             .then((data) => this.build(data))
-            .catch(Error=> this.handleError(Error));
+            .catch(Error=> {
+                this.toggleMessage('ucb-al-loading');
+                this.handleError(Error)
+            });
     }
 
     build(data){
         if(data.data.length == 0){
             this.handleError({name : "No Issues Retrieved", message : "There are no Issues created"} , 'No Issues Found')
         } else {
             const title = data.data[0].attributes.title
-            const imgURL = data.included[0].attributes.uri.url
+            let imgURL
             const issueURL = data.data[0].attributes.path.alias
 
             const imgLinkEL = document.createElement('a')
@@ -40,24 +43,50 @@ class CurrentIssueElement extends HTMLElement {
             const titleEl = document.createElement('h3')
             titleEl.classList = "ucb-current-issue-block-title"
             titleEl.innerText = title
-
-            const imgEL = document.createElement('img')
-            imgEL.classList = 'ucb-current-issue-block-img'
-            imgEL.src = imgURL
-
+
+            // Image
+            const urlObj = {}; // key from data.data to key from data.includes
+            const idObj = {}; // key from data.includes to URL
+            // Remove any blanks from our articles before map
+            if (data['included']) {
+                const filteredData = data['included'].filter(url => !!url['attributes']['uri']);
+                // creates the urlObj, key: data id, value: url
+                filteredData.map((pair) => {
+                    // checks if consumer is working, else default to standard image instead of focal image
+                    if(pair['links']['large_image_style'])
+                        urlObj[pair['id']] = pair['links']['large_image_style']['href'];
+                    else
+                        urlObj[pair['id']] = pair['attributes']['uri']['url'];
+                });
+                // removes all other included data besides images in our included media
+                const idFilterData = data['included'].filter(item => item['type'] == 'media--image');
+                // using the image-only data, creates the idObj =>  key: thumbnail id, value : data id
+                idFilterData.map(pair => idObj[pair['id']] = pair['relationships']['thumbnail']['data']['id']);
+            }
+
+            const issue = data.data[0] ? data.data[0] : null
             const linkEl = document.createElement('a')
             linkEl.href = issueURL
 
 
             linkEl.appendChild(titleEl)
             titleDiv.appendChild(linkEl)
+
+            if(issue.relationships.field_ucb_issue_cover_image.data){
+                const issueId = issue.relationships.field_ucb_issue_cover_image.data.id;
+                imgURL = urlObj[idObj[issueId]]
+                const imgEL = document.createElement('img')
+                imgEL.classList = 'ucb-current-issue-block-img'
+                imgEL.src = imgURL
+                imgEL.alt = `${title} cover image`
+                imgLinkEL.appendChild(imgEL)
+                imgDiv.appendChild(imgLinkEL)
+            }
 
-            imgLinkEL.appendChild(imgEL)
-            imgDiv.appendChild(imgLinkEL)
 
             blockDiv.appendChild(imgDiv)
             blockDiv.appendChild(titleDiv)
-
+            this.toggleMessage('ucb-al-loading');
             this.appendChild(blockDiv)
         }
     }
@@ -79,10 +108,22 @@ class CurrentIssueElement extends HTMLElement {
         span.appendChild(message)
 
         this.appendChild(container)
-
-            console.error(Error)
+        console.error(Error)
 
     }
+
+    toggleMessage(id, display = "none") {
+        if (id) {
+          var toggle = this.querySelector(`#${id}`);
+          if (toggle) {
+            if (display === "block") {
+              toggle.style.display = "block";
+            } else {
+              toggle.style.display = "none";
+            }
+          }
+        }
+    }
 }
 
 

js/ucb-issue-archive.js

@@ -11,41 +11,64 @@ class IssueArchiveElement extends HTMLElement {
         };
 
         // Pagination &page[limit]=5
-        fetch(`/jsonapi/node/ucb_issue?include=field_ucb_issue_image&fields[file--file]=uri,url&filter[published][group][conjunction]=AND&filter[publish-check][condition][path]=status&filter[publish-check][condition][value]=1&filter[publish-check][condition][memberOf]=published&sort=-created`)
-            .then(handleError)
+        fetch(`/jsonapi/node/ucb_issue?include=field_ucb_issue_cover_image.field_media_image&fields[file--file]=uri,url&filter[published][group][conjunction]=AND&filter[publish-check][condition][path]=status&filter[publish-check][condition][value]=1&filter[publish-check][condition][memberOf]=published&sort=-created`)
+        .then(handleError)
             .then((data) => this.build(data))
-            .catch(Error=> this.handleError(Error));
+            .catch(Error=> {
+                this.toggleMessage('ucb-al-loading');
+                this.handleError(Error)
+            });
     }
 
     build(data){
         if(data.data.length == 0){
+            this.toggleMessage('ucb-al-loading')
             this.handleError({name : "No Issues Retrieved", message : "There are no Issues created"} , 'Create Issues for All Issues to appear here')
         } else {
-            console.log(data)
             const archiveContainer = document.createElement('div')
             archiveContainer.classList='ucb-issue-archive-container col-lg-12 col-md-12 col-sm-12 col-xs-12'
             const issues = data.data
-            const issuesArt = data.included
+            // Media Image
+                const urlObj = {}; // key from data.data to key from data.includes
+				const idObj = {}; // key from data.includes to URL
+				// Remove any blanks from our articles before map
+				if (data['included']) {
+					const filteredData = data['included'].filter(url => !!url['attributes']['uri']);
+					// creates the urlObj, key: data id, value: url
+					filteredData.map((pair) => {
+						// checks if consumer is working, else default to standard image instead of focal image
+						if(pair['links']['large_image_style'])
+							urlObj[pair['id']] = pair['links']['large_image_style']['href'];
+						else
+							urlObj[pair['id']] = pair['attributes']['uri']['url'];
+					});
+					// removes all other included data besides images in our included media
+					const idFilterData = data['included'].filter(item => item['type'] == 'media--image');
+					// using the image-only data, creates the idObj =>  key: thumbnail id, value : data id
+					idFilterData.map(pair => idObj[pair['id']] = pair['relationships']['thumbnail']['data']['id']);
+				}
 
             for(let i=0;i<issues.length;i++){
                 const issue = issues[i]
-                const issueArt = issuesArt[i]
-
                 const title = issue.attributes.title
-                const imgUrl = issueArt.attributes.uri.url
                 const issueUrl = issue.attributes.path.alias
-
                 const issueContainer = document.createElement('div')
                 issueContainer.classList = 'ucb-issue-archive-card px-3'
-
-                const issueImg = document.createElement('img')
-                issueImg.classList = 'ucb-archive-card-img'
-                issueImg.src = imgUrl
-                issueImg.alt = `${title} issue artwork`
-
-                const IssueImgLink = document.createElement('a')
-                IssueImgLink.classList = 'ucb-archive-card-img-link'
-                IssueImgLink.href = issueUrl
+                if(issue.relationships.field_ucb_issue_cover_image.data){
+                    const issueId = issue.relationships.field_ucb_issue_cover_image.data.id;
+                    const imgUrl = urlObj[idObj[issueId]]
+                    const issueImg = document.createElement('img')
+                    issueImg.classList = 'ucb-archive-card-img'
+                    issueImg.src = imgUrl
+                    issueImg.alt = `${title} issue artwork`
+
+                    const IssueImgLink = document.createElement('a')
+                    IssueImgLink.classList = 'ucb-archive-card-img-link'
+                    IssueImgLink.href = issueUrl
+
+                    IssueImgLink.appendChild(issueImg)
+                    issueContainer.appendChild(IssueImgLink)
+                }
 
                 const issueTitle = document.createElement('h3')
                 issueTitle.classList = 'ucb-archive-card-title'
@@ -56,17 +79,29 @@ class IssueArchiveElement extends HTMLElement {
                 titleLink.href = issueUrl
                 titleLink.appendChild(issueTitle)
 
-                IssueImgLink.appendChild(issueImg)
-                issueContainer.appendChild(IssueImgLink)
+
                 issueContainer.appendChild(titleLink)
                 archiveContainer.appendChild(issueContainer)
             }
-
+            this.toggleMessage('ucb-al-loading')
             this.appendChild(archiveContainer)
 
         }
     }
 
+    toggleMessage(id, display = "none") {
+        if (id) {
+          var toggle = this.querySelector(`#${id}`);
+          if (toggle) {
+            if (display === "block") {
+              toggle.style.display = "block";
+            } else {
+              toggle.style.display = "none";
+            }
+          }
+        }
+    }
+
     handleError(Error){
         console.error(Error)
     }

js/ucb-latest-issue-block.js

@@ -10,41 +10,64 @@ class LatestIssueElement extends HTMLElement {
             }
         };
 
-        fetch(`/jsonapi/node/ucb_issue?include=field_ucb_issue_image&fields[file--file]=uri,url&filter[published][group][conjunction]=AND&filter[publish-check][condition][path]=status&filter[publish-check][condition][value]=1&filter[publish-check][condition][memberOf]=published&page[limit]=4&sort=-created`)
+        fetch(`/jsonapi/node/ucb_issue?include=field_ucb_issue_cover_image.field_media_image&fields[file--file]=uri,url&filter[published][group][conjunction]=AND&filter[publish-check][condition][path]=status&filter[publish-check][condition][value]=1&filter[publish-check][condition][memberOf]=published&page[limit]=4&sort=-created`)
             .then(handleError)
             .then((data) => this.build(data))
-            .catch(Error=> this.handleError(Error));
+            .catch(Error=> {
+                this.toggleMessage('ucb-al-loading');
+                this.handleError(Error)
+            });
     }
 
     build(data){
         if(data.data.length == 0){
             this.handleError({name : "No Issues Retrieved", message : "There are no Issues created"} , 'No Issues Found')
         } else {
             const issues = data.data
-            const issuesArt = data.included
-
             const latestIssueContainer = document.createElement('div')
             latestIssueContainer.classList = 'ucb-latest-issue-container'
+            // Media Image
+            const urlObj = {}; // key from data.data to key from data.includes
+            const idObj = {}; // key from data.includes to URL
+            // Remove any blanks from our articles before map
+            if (data['included']) {
+                const filteredData = data['included'].filter(url => !!url['attributes']['uri']);
+                // creates the urlObj, key: data id, value: url
+                filteredData.map((pair) => {
+                    // checks if consumer is working, else default to standard image instead of focal image
+                    if(pair['links']['large_image_style'])
+                        urlObj[pair['id']] = pair['links']['large_image_style']['href'];
+                    else
+                        urlObj[pair['id']] = pair['attributes']['uri']['url'];
+                });
+                // removes all other included data besides images in our included media
+                const idFilterData = data['included'].filter(item => item['type'] == 'media--image');
+                // using the image-only data, creates the idObj =>  key: thumbnail id, value : data id
+                idFilterData.map(pair => idObj[pair['id']] = pair['relationships']['thumbnail']['data']['id']);
+            }
 
             for(let i=0;i<issues.length;i++){
                 const issue = issues[i]
-                const issueArt = issuesArt[i]
-
                 const title = issue.attributes.title
-                const imgUrl = issueArt.attributes.uri.url
                 const issueUrl = issue.attributes.path.alias
-
                 const issueContainer = document.createElement('div')
                 issueContainer.classList = 'ucb-latest-issue-card'
+                // Image 
+                if(issue.relationships.field_ucb_issue_cover_image.data){
+                    const issueId = issue.relationships.field_ucb_issue_cover_image.data.id;
+                    const imgUrl = urlObj[idObj[issueId]]
+                    const issueImg = document.createElement('img')
+                        issueImg.classList = 'ucb-latest-issue-img'
+                        issueImg.src = imgUrl
+                        issueImg.alt = `${title} issue artwork`
+
+                    const IssueImgLink = document.createElement('a')
+                        IssueImgLink.classList = 'ucb-latest-issue-img-link'
+                        IssueImgLink.href = issueUrl
 
-                const issueImg = document.createElement('img')
-                issueImg.classList = 'ucb-latest-issue-img'
-                issueImg.src = imgUrl
-                issueImg.alt = `${title} issue artwork`
-
-                const IssueImgLink = document.createElement('a')
-                IssueImgLink.classList = 'ucb-latest-issue-img-link'
-                IssueImgLink.href = issueUrl
+                IssueImgLink.appendChild(issueImg)
+                issueContainer.appendChild(IssueImgLink)
+                }
 
                 const issueTitle = document.createElement('h3')
                 issueTitle.classList = 'ucb-latest-issue-title'
@@ -54,12 +77,11 @@ class LatestIssueElement extends HTMLElement {
                 titleLink.href = issueUrl
                 titleLink.appendChild(issueTitle)
 
-                IssueImgLink.appendChild(issueImg)
-                issueContainer.appendChild(IssueImgLink)
+
                 issueContainer.appendChild(titleLink)
                 latestIssueContainer.appendChild(issueContainer)
             }
-
+            this.toggleMessage('ucb-al-loading');
             this.appendChild(latestIssueContainer)
 
             // Add Archive link if articles >=4
@@ -94,10 +116,21 @@ class LatestIssueElement extends HTMLElement {
         span.appendChild(message)
 
         this.appendChild(container)
-
-            console.error(Error)
+        console.error(Error)
 
     }
+    toggleMessage(id, display = "none") {
+        if (id) {
+          var toggle = this.querySelector(`#${id}`);
+          if (toggle) {
+            if (display === "block") {
+              toggle.style.display = "block";
+            } else {
+              toggle.style.display = "none";
+            }
+          }
+        }
+    }
 }
 
 

templates/block/block--ucb-current-issue-block.html.twig

@@ -17,5 +17,9 @@
     {{ label }}
   </h2>
   {{ title_suffix }}
-    <current-issue-block></current-issue-block>
+    <current-issue-block>
+      <div id="ucb-al-loading" class="ucb-list-msg ucb-loading-data">
+        <i class="fa-solid fa-spinner fa-3x fa-spin-pulse"></i>
+      </div>
+    </current-issue-block>
 	</div>

templates/block/block--ucb-latest-issues-block.html.twig

@@ -17,5 +17,9 @@
     {{ label }}
   </h2>
   {{ title_suffix }}
-    <latest-issue-block></latest-issue-block>
+    <latest-issue-block>
+      <div id="ucb-al-loading" class="ucb-list-msg ucb-loading-data">
+        <i class="fa-solid fa-spinner fa-3x fa-spin-pulse"></i>
+      </div>
+    </latest-issue-block>
 	</div>