Jump to content

Can you put your excerpt under your Blog Post Page Title?

Recommended Posts

On 5/6/2021 at 9:31 AM, Rendy said:

Site URL: https://www.rendyreviews.com/movie-reviews/mortal-kombat-review

Hi,

I wanted to know if there's a way I can inject CSS to put like an excerpt under the blog post title before it proceeds my reviews in order to make it look professional. 

Make it look like similar to this in some way.

Screen Shot 2021-05-05 at 10.28.43 PM.png

You can take advantage of the meta tag to get the excerpt content, paste this into Settings->Advanced->Code Injection

<script>
document.addEventListener('DOMContentLoaded', function() {
    var element = document.querySelector('.BlogItem-title');
  	if (!element) {
    	return;
    }
    var newElement = document.createElement('h2');
    newElement.style.order = 2;
    newElement.className = "BlogItem-excerpt";
    newElement.innerHTML = document.querySelector('[property="og:description"]').getAttribute("content");
    var elementParent = element.parentNode;

    elementParent.insertBefore(newElement, element.nextSibling);
});
</script>

Target it as class name BlogItem-excerpt to style it. Btw, you made a great job with the blog, I hardly notice it was created in Squarespace

image.thumb.png.e868880f14d57203a84f9563ef77993d.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
On 5/9/2021 at 11:03 PM, bangank36 said:

<script> document.addEventListener('DOMContentLoaded', function() { var element = document.querySelector('.BlogItem-title'); if (!element) { return; } var newElement = document.createElement('h2'); newElement.style.order = 2; newElement.className = "BlogItem-excerpt"; newElement.innerHTML = document.querySelector('[property="og:description"]').getAttribute("content"); var elementParent = element.parentNode; elementParent.insertBefore(newElement, element.nextSibling); }); </script>

Oh my gosh, thank you.

Now additional question. Is there a way I can also add my share code to the under the header/excerpt instead of having to inject it into my reviews via the code block.

This is the code:

Thank you.

<!-- ShareThis BEGIN --><div class="sharethis-inline-share-buttons"></div><!-- ShareThis END -->

Link to comment
  • 1 year later...
On 2/23/2023 at 1:56 AM, 99saintclaire said:

- I can't get this code to work on 7.1 / Fluid Engine. I've tried in Header and Footer Code Injection - still no luck. Do you have an update?

Site URL: systms.club/article/quadrant-method

Try this code with new class name

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var element = document.querySelector('.blog-item-title');
  	if (!element) {
    	return;
    }
    var newElement = document.createElement('h2');
    newElement.style.order = 2;
    newElement.className = "blog-item-excerpt";
    newElement.innerHTML = document.querySelector('[property="og:description"]').getAttribute("content");
    var elementParent = element.parentNode;

    elementParent.insertBefore(newElement, element.nextSibling);
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

@Beyondspace : @tuanphan : Hello!  Thank You for providing an answer to this question.  I am implementing it on a client site.  I hope you don't mind a follow-up question as I am far from a Javascript expert.  It looks like the script is pulling the excerpt content but not the formatting.  For example, in the screenshots below when I place a line break in the excerpt, the line break is not pulled over with the script.  All the text is captured in HTML on the same line.  How would I amend the script for line breaks to be captured?

There also appears to be a character count restriction.  Can that be lifted?

Any help you can provided would be appreciated! 😃

 

SCREENSHOT 1 : Excerpt

image.png.cb3e14d3c9004f2b60a30abb41843306.png

 

SCREENSHOT 2 : HTML with script executed

image.png.fa6840a23d5a7819a54033c0a89e1eec.png

Edited by SHADOWNUT
Link to comment
  • 8 months later...
On 2/26/2023 at 2:15 AM, tuanphan said:

Try this code with new class name

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var element = document.querySelector('.blog-item-title');
  	if (!element) {
    	return;
    }
    var newElement = document.createElement('h2');
    newElement.style.order = 2;
    newElement.className = "blog-item-excerpt";
    newElement.innerHTML = document.querySelector('[property="og:description"]').getAttribute("content");
    var elementParent = element.parentNode;

    elementParent.insertBefore(newElement, element.nextSibling);
});
</script>

 

Hey @tuanphan is it possible to style the font colour & size of the excerpt showing on blog post page from this? I am using Will Myers code (https://www.will-myers.com/articles/blog-post-banner-image-update) to display the featured image on blog post page, now with the excerpt on top I need to change the font colour to white for legibility:

image.thumb.png.b07f2ebf02bff83003c6ebac0cce65fd.png

 

Edited by Rickshaw
Link to comment
On 12/19/2023 at 5:02 PM, Rickshaw said:

Hey @tuanphan is it possible to style the font colour & size of the excerpt showing on blog post page from this? I am using Will Myers code (https://www.will-myers.com/articles/blog-post-banner-image-update) to display the featured image on blog post page, now with the excerpt on top I need to change the font colour to white for legibility:

image.thumb.png.b07f2ebf02bff83003c6ebac0cce65fd.png

 

Can you share link to a blog? I can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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