I am currently using the Solo theme. It is working perfectly for my needs, however, I would like to add a simple feature. Before my loop of posts, I would like to add a featured post slider. My preference would be that this list is randomized across all posts marked featured at page reload.
I found the following: How to Create a Featured Post Slider in Ghost | Bright Themes
from BrightThemes.com and it was exactly what I was looking for (not the randomization part), but I cannot seem to get it to work with my theme.
I am making the code edits to my index.hbs template and I have copied the scripts and CSS link to my site code injection footer (also tried header). I can achieve a list of featured posts, but no slider or images. Simple text links only.
Random guess: do you need to load jquery? Check your console log (f12 in the browser) and see if there are any hints.
1 Like
I will check that. There is something on that page about how scripts are added to {{{block “scripts”}}} in default.hbs. I do not have this helper in my default.hbs in my theme. Do I need to add that {{{block “scripts”}}} to my page?
I set my console to verbose mode. I am not seeing any errors. I verified that the resources are getting loaded from the code injection properly.
If you don’t add the block scripts section, the contentfor section won’t get added to the page. That’s a problem!
I have tried to add it to my default.hbs, but nothing is changing. I still have a list of links to features stories, but no slider. Something I read said that the block helper could not be put in the index.hbs. I am not sure what I need to do to marry up the script in index.hbs to the script block in default.hbs.
This code exists in my index.hbs:
{{! Featured posts }}
{{#get 'posts' filter='featured:true' limit='all' as |featured|}}
<div class='featured-feed js-featured-feed'>
{{#foreach featured visibility='all'}}
<div class='featured-card'>
{{! Feature Image }}
{{#if feature_image}}
<a
class='featured-card__media m-b-sm'
href='{{url}}'
title='{{title}}'
aria-label='{{title}}'
>
<img
class='lazyload'
data-srcset='{{img_url feature_image size='s'}} 300w,
{{img_url feature_image size='m'}} 600w'
srcset='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
data-sizes='auto'
data-src='{{img_url feature_image size='s'}}'
src='{{img_url feature_image size='xxs'}}'
alt='{{title}}'
/>
</a>
{{/if}}
{{! Post Title }}
<h2 class='fw-600 m-b-0 text-acc-1 text-xl'>
<a href='{{url}}' aria-label='{{title}}'>{{title}}</a>
</h2>
</div>
{{/foreach}}
</div>
{{/get}}
{{#contentFor 'scripts'}}
<script>
const sliderContainer = document.querySelector('.js-featured-feed'); if
(sliderContainer) { const slider = tns({ container: sliderContainer, items:
3, slideBy: 1, loop: true, autoplay: false, gutter: 32, nav: true,
responsive: { 0: { items: 1, }, 768: { items: 2, }, 992: { items: 3, } } });
}
</script>
{{/contentFor}}
I added the block script section to my existing default.hbs (only a portion shown here):
{{#is "post, page"}}
{{> "pswp"}}
{{/is}}
<script src="{{asset "built/main.min.js"}}"></script>
{{{block "scripts"}}}
{{ghost_foot}}
</body>
</html>
The code does not seem to be doing anything differently on my page.
Under the hero image and before that first post is where I expected, or wanted, to see that slider.
Does the js-featured-feed Div exist in the page?
Ah, I see it.
So… trying to figure out where the problem is- do you get the posts but no carousel? Or no posts at all? If the former, suspect a JavaScript or css selector problem. If the latter, do you actually have posts marked featured?
Great question! And thank you so much for helping me. I do get the posts. In the picture above, those are the 3 posts related to ADHD that are text links only.
And you included the code that loads tiny-slider.js?
This is in my site-wide code injection footer:
<script
src='https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/min/tiny-slider.js'
integrity='sha512-D/zaRVk05q6ERt1JgWB49kL6tyerY7a94egaVv6ObiGcw3OCEv0tvoPDEsVqL28HyAZhDd483ix8gkWQGDgEKw=='
crossorigin='anonymous'
></script>
<link
rel='stylesheet'
href='https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css'
integrity='sha512-eMxdaSf5XW3ZW1wZCrWItO2jZ7A9FhuZfjVdztr7ZsKNOmt6TUMTQgfpNoVRyfPE5S9BC0A4suXzsGSrAOWcoQ=='
crossorigin='anonymous'
/>
I just moved it to the header for the site-wide code injection and it appears to be working some, but not perfect.
The featured image pictures are not loading
Does your theme have a size “s” defined in package.json?
In my package.json file, I have image sizes ranging from XS (width 150) to xxl (width 2000). There is a S size defined as width 300.
Could this be something?
In the section below, there is a reference to a feature-card. I looked through the CSS files loaded on the page from the console and I see references to other types of cards, but no reference to a feature-card. Is this something I need to define? Maybe another default theme shipped with this card defined?
<div class='featured-card'>
{{! Feature Image }}
{{#if feature_image}}
<a
class='featured-card__media m-b-sm'
href='{{url}}'
title='{{title}}'
aria-label='{{title}}'
/>
<img
class='lazyload'
data-srcset='{{img_url feature_image size='s'}} 300w,
{{img_url feature_image size='m'}} 600w'
srcset='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
data-sizes='auto'
data-src='{{img_url feature_image size='s'}}'
src='{{img_url feature_image size='xxs'}}'
alt='{{title}}'
>
</a>
{{/if}}
{{! Post Title }}
<h2 class='fw-600 m-b-0 text-acc-1 text-xl'>
<a href='{{url}}' aria-label='{{title}}'>{{title}}</a>
</h2>
</div>
Entirely possible that you’re missing all the css, yes. I see a lot of styles that I don’t think are present in Solo. But still, I’d have guessed you’d get something. You’re probably also missing the javascript code that parses the data-src and data-srcset, but I see a plain old src attribute inside that img tag that I would have expected to result in an xxs image being visible anyway.
Can you link the site with this code? There might be something obvious, but it’s hard to debug code snippets without seeing them live.
I spent some time digging through the CSS last night. After a lot of consideration, I decided to look into the Dawn theme. It actually offered what I was looking for out of the box. The Solo theme seemed like the best base for what I wanted, but I clearly had not given Dawn enough of a look.
At some point, once I get some actual readership…I will look into some more customizations and potentially even a custom theme. For now, I think I have what I need. I really appreciate your time and effort. I have created a supporters page on my site which will also have a section dedicated to people who have given me help on sites like the Ghost Forum. I made sure to link to your site.
1 Like
Aww, thanks. Sorry I couldn’t help more, and I’m glad you were able to get things working with Dawn!
1 Like
Please. You were a huge help. I am not a web designer, or programmer. So, you pointed me in some very helpful directions. That post I was working off of…I really wish they had stated what theme they were building that on. Then I would know what portions of code or templates I might be missing.
1 Like
