Hi everyone, first post on the forum. I have some issues I am trying to get to the bottom of, one concerning best practices and another concerning an error.
First, I developed a theme for a publication some months ago during 4.x and they have since upgraded to 5.x. The site is hosted on Ghost’s servers with Ghost Pro. Recently (most likely since the update, but possibly before, they are not sure) they have noticed some images not displaying properly on mobile - these images are being mixed and matched between different posts.
So, a post displays properly on desktop views (and in desktop browser dev tools mobile views) but (occasionally, but not always) improperly when viewed on a mobile device. Post A has image X Y and Z within it, and post B has image P Q and R within it, but post B is displaying image Y (in error) on mobile. This error might happen both in drafting and after publication of a post.
These errors appear to resolve when the team re-uploads the images in the post experiencing the error.
My thoughts are that there may be an issue with custom theme functionality I built for them initially. Below is custom code located in home.hbs which positions a featured post at the top of the post-card feed, and then outputs every other non-featured post in the post-card feed. There are some images interspersed which likely aren’t relevant to the question of “am I doing this right?”
<main id="site-main" class="site-main outer">
<img class="whatever" src="whatever"/>
<div class="inner posts">
<div class="post-feed{{#match @custom.feed_layout "List"}} list{{/match}}">
{{#get "posts" include="tags,authors" filter="featured:true" limit="all" as |featured|}}
{{#foreach featured}}
{{> "post-card"}}
{{/foreach}}
{{/get}}
<img class="whatever" src="whatever"/>
<img class="whatever" src="whatever"/>
{{#foreach posts}}
{{#unless featured}}
{{> "post-card"}}
{{/unless}}
{{/foreach}}
</div>
</div>
</main>
Ultimately, this functionality works… but may also be incredibly janky in implementation. I am asking if there is an “official” best practice for implementing this functionality (featured post at top of feed)? Is my implementation acceptable? Is my implementation potentially introducing this error for the publication?
Any help is appreciated. Thanks much.
EDIT: I think we’ve made some headway on the errors (something related to image resizing and file names that wouldn’t be affected by the above), but I am still very interested if there is a best practice on creating a sticky featured post functionality on the first page of an infinite scroll feed.