Jump to content

author bio avatar on summary block page

By NewClassicalDesign, in Customize with code

Go to solution Solved by NewClassicalDesign,

Recommended Posts

NewClassicalDesign Level 4

NewClassicalDesign

Posted
Posted

Site URL: https://salientglobal.com/home-draft

Hey all,

I am trying to add in some javascript so I can get the author bio avatar photo to show up on under the featured blog post in a summary block on the home page (using list style). 

page is https://salientglobal.com/home-draft

pw is: pagepreview

here is the script i am trying to insert: I've tried it both as a separate code block and injected into the header of the page. 

<script>
  
var img = document.createElement("img");

if (document.getElementsByClassName("summary-metadata-item--author").innerHTML.indexOf('Author Name1') != -1) {
   img.src = "INSERT_IMAGE_HERE";
img.setAttribute("style", "width:80px;");
  } else if {
    document.getElementsByClassName("summary-metadata-item--author").innerHTML.indexOf('Author Name2') != -1){
   img.src = "INSERT_IMAGE_HERE";
img.setAttribute("style", "width:80px;")
  }
  else {
     img.src = "NO_PHOTO_IMAGE"
  }

var block = document.getElementsByClassName("summary-metadata-item--author");
block.appendChild(img);
  
  
</script>

Any thoughts on if what I am trying is even possible? Or anyone else have a more elegant solution than the above?

Link to comment
  • Replies 3
  • Views 616
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Beyondspace Level 14

Beyondspace

Posted
Posted
40 minutes ago, NewClassicalDesign said:

Site URL: https://salientglobal.com/home-draft

Hey all,

I am trying to add in some javascript so I can get the author bio avatar photo to show up on under the featured blog post in a summary block on the home page (using list style). 

page is https://salientglobal.com/home-draft

pw is: pagepreview

here is the script i am trying to insert: I've tried it both as a separate code block and injected into the header of the page. 

<script>
  
var img = document.createElement("img");

if (document.getElementsByClassName("summary-metadata-item--author").innerHTML.indexOf('Author Name1') != -1) {
   img.src = "INSERT_IMAGE_HERE";
img.setAttribute("style", "width:80px;");
  } else if {
    document.getElementsByClassName("summary-metadata-item--author").innerHTML.indexOf('Author Name2') != -1){
   img.src = "INSERT_IMAGE_HERE";
img.setAttribute("style", "width:80px;")
  }
  else {
     img.src = "NO_PHOTO_IMAGE"
  }

var block = document.getElementsByClassName("summary-metadata-item--author");
block.appendChild(img);
  
  
</script>

Any thoughts on if what I am trying is even possible? Or anyone else have a more elegant solution than the above?

Is it the result your want to achieve?

image.thumb.png.5c548bb007a15a0f8c57fd248d2f1312.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution
NewClassicalDesign Level 4

NewClassicalDesign

Posted
  • Author
  • Solution
Posted

ended up answering my own question. For what its worth I had to add the script in a separate code block in its own <div> since it wasn't letting me append an element in the summary block itself. Then I styled the block so it appeared beneath the author. Also I realized document.getElementsByClassNames produces an array-like object instead of an element so I had to iterate over it to search for the text.

Here is the updated script I used:  

<div id="author-feature" style="margin-top:-100px;">
  
</div>

<script>

var img = document.createElement("img");
let author = document.getElementsByClassName('summary-metadata-item--author');
  
for (i = 0; i < author.length; i++) {
	if(author[i].innerHTML.includes('Bryan Specht')){
   img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce73e9cfee41177b9e75/1635307123576/BRYAN_b_w_square.png";
img.setAttribute("style", "width:100px; border-radius:50%;");
      var block = document.getElementById("author-feature")
      block.appendChild(img);
    }
	else if(author[i].innerHTML.includes('Rick Shaughnessy')){
   img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce8f24061f5729aaf1ad/1635307151493/RICK_b_w_square.png";
img.setAttribute("style", "width:100px; border-radius:50%;");
      var block = document.getElementById("author-feature")
      block.appendChild(img);
    }
	else if(author[i].innerHTML.includes('Charlie Witkowski')){
   img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce766084256498dff499/1635307126503/CHARLIE_b_w_square.png";
img.setAttribute("style", "width:100px; border-radius:50%;");
      var block = document.getElementById("author-feature")
      block.appendChild(img);
    }
	else if(author[i].innerHTML.includes('Andrea Zimmerman')){
   img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce6c25addd661972eb89/1635307116533/ANDREA_b_w_square.png";
img.setAttribute("style", "width:100px; border-radius:50%;");
      var block = document.getElementById("author-feature")
      block.appendChild(img);
    }
	else if(author[i].innerHTML.includes('Jaclyn Johnston')){
   img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce8562c22f532e4a39d8/1635307141583/JACLYN_b_w_square.png";
img.setAttribute("style", "width:100px; border-radius:50%;");
      var block = document.getElementById("author-feature")
      block.appendChild(img);
    }
	else if(author[i].innerHTML.includes('Tricia Ewald')){
   img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce95b52a8b6c21764ae0/1635307158005/TRICIA_b_w_square.png";
img.setAttribute("style", "width:100px; border-radius:50%;");
      var block = document.getElementById("author-feature")
      block.appendChild(img);
    }
	else if(author[i].innerHTML.includes('Daniel Welch')){
   img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178ce7b72d1556873b61489/1635307131576/DANIEL_1_b_w_square.png";
img.setAttribute("style", "width:100px; border-radius:50%;");
      var block = document.getElementById("author-feature")
      block.appendChild(img);
    }


  	else {
      img.src = "https://static1.squarespace.com/static/614a0273f17c0447042d5f78/t/6178d2e414c5322fe396ec28/1635308260460/salient_favicon.png";
      var block = document.getElementById("author-feature")
      block.appendChild(img);
    }
}  
</script>

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources