RaquelR Posted August 23, 2021 Share Posted August 23, 2021 Site URL: https://raquelrusso.com/blog Hello! Is it possible to show the thumbnail image inside the blog post page? Preferably in a similar position as it appears in the blog list? I've attached screenshots to better show what I mean. Thank you so much to anyone who knows how to do this! Link to comment
iamdavehart Posted August 23, 2021 Share Posted August 23, 2021 You could of course add it manually at the top of your blog post, but you'd have to do that for each post and I'm assuming that's not the question/answer you're looking for. There's no option to do this automatically in the latest version of squarespace (7.1) without some javascript as far as I can tell, so you'd need to have a business/premium account to do this option. I don't think its the best way to do it to be honest, as there will be a bit of a lag as the image element is dynamically added in, but posting it here in case anyone finds it useful. Open the Blog's Settings, Go To Advanced and then add this script to the Post Blog Code Injection <style> div.blog-item-image-wrapper { margin-bottom:12px; } img.blog-item-image { width:100%; } </style> <script> const i = document.querySelector('meta[itemprop="image"]'); const u = !!i ? i.getAttribute('content') : ''; if (u) { const c1 = document.querySelector('.blog-item-inner-wrapper'); const c2 = document.querySelector('.blog-item-content-wrapper'); const ed = document.createElement('div'); ed.setAttribute('class','blog-item-image-wrapper'); const ei = document.createElement('img'); ei.setAttribute('class','blog-item-image'); ei.setAttribute('src',u); ed.appendChild(ei); c1.insertBefore(ed,c2); } </script> you could then style how this image is displayed with the two classes at the top of this code. I would recommend raising this as a feature request with Squarespace as I'd imagine others have asked for an option to include the picture at the top of the blog post. Begona and tuanphan 2 Dave Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
RaquelR Posted August 23, 2021 Author Share Posted August 23, 2021 Thank you so much for your time! I will do a feature request as you suggest and maybe someday it will be possible in Squarespace 7.1. Thanks once again! Link to comment
nico_ Posted November 11, 2021 Share Posted November 11, 2021 Hi Dave, I actually have the same question, but I'm trying to get the thumbnail to show up above the meta/title of my post instead of below. I'm not familiar with javascript so I can't seem to figure out how to do this with your code. Any help would be wonderful! Individual post page: https://www.curiosityandcuriosities.com/collect/petridishstudy-amoeboid password: ifyouknowyouknow Thank you! Link to comment
iamdavehart Posted November 12, 2021 Share Posted November 12, 2021 in the javascript, the varible c2 finds the element that you want to insert the picture before, so change that from the "content" wrapper to the "top" wrapper. const c2 = document.querySelector('.blog-item-top-wrapper'); all the other code can stay the same, hope that helps jmerrill and nico_ 1 1 Dave Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
nico_ Posted November 13, 2021 Share Posted November 13, 2021 🙌 Thank you so much for your help! Link to comment
IdTaylor Posted March 15 Share Posted March 15 (edited) Thanks so much for this. I just have a follow on question. Now that squarespace allows blogs behind a paywall to show a preview with the title and the excerpt, is it also possible to include this featured image? Thank you! https://www.david-taylor.org/paid-blog/why-orchestras-stick-with-bad-decisions Edited March 15 by IdTaylor Link to comment
tuanphan Posted March 18 Share Posted March 18 On 3/15/2024 at 6:28 PM, IdTaylor said: Thanks so much for this. I just have a follow on question. Now that squarespace allows blogs behind a paywall to show a preview with the title and the excerpt, is it also possible to include this featured image? Thank you! https://www.david-taylor.org/paid-blog/why-orchestras-stick-with-bad-decisions I just tried above code and it still run. Or you want image in another position? Which position? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment