Editing the new Casper 3 theme - post inline images?

Developer help
1

Hi – just trying to restore one of the design choices for the previous Casper theme i.e. I think version 1.5. The new 3.0 version has moved the post preview image into the body of the post. I’d like to either move it back to where it was, i.e. something like a header image, or remove it from the post entirely and definitely not have it in the body of the post.

You can see an example post here: Life as an interracial couple in 1960s North Carolina

Thoughts? Help?

Thanks!

Saleem.

2

If you prefer an older version of Casper, you can download them from the release archive.

The latest version of the previous design is here:

3

But I like other aspects of Casper 3.0! Is there a way to use code injections or editing the template to make the change I’m after?

S.

4

Hi,

I managed to do this by editing page.hbs, modifying this way :

{{#post}}
    {{!-- The big featured header, it uses blog cover image as a BG if available --}}
    <header class="site-home-header">
        {{#if feature_image}}
            {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
        {{/if}} 
            <div class="inner">
                {{> "site-nav"}}
                <div class="site-header-content">
                    <h1 class="site-title">
                        {{title}}
                    </h1>
                </div>
            </div>
        </div>
    </header>



    <main id="site-main" class="site-main outer">
        <div class="inner">

            <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
                <section class="post-full-content">
                    <div class="post-content">
                        {{content}}
                    </div>
                </section>

            </article>

        </div>
    </main>
5

Thank you! So this should replace the full {{#post}} section? If so then I did that but it didn’t see to have an effect? I may well be doing it wrong?

S.

6

It replaces from the {{#post}} to the :slight_smile: Is it good for you ?

7

The smiley?! I think there was some autofill there? :slight_smile:

S.

8

my bad !
to the </main>

9

Yes that’s what I thought – and that’s what I tried. But let me try again and see…

10

Yeah, I tried twice; no change. :confused:

S.

11

Sorry for the delay !

What you describe is a bit weird. May I see your whole page.hbs ?
From my point of view it looks like your page.hbs is not the one called. Maybe you could try to edit post.hbs the same way ?

12

You might have to restart the ghost server for changes to templates if it is running in production mode.

13

Is there any reason not to just use a CSS !important in code-injection?

14

So I’ve played with it for 1/2 an hour this evening to get the main page looking more like v2 Casper.
I just added the following in my Code injection:

<style type='text/css'>
/* more like Casper-v2 posts overlay header */    
#site-main, .posts {
    overflow: visible;
    z-index: 2000;
  }

.post-feed {
  margin-top: -70px;
  padding-top: 12px !important;
  z-index: 2000;
  background-color: hsla(180,100%,100%,0);
}

.post-card-image-link, .post-card-content {
    background-color: white;
  }

/* this fixes text at 0px in mobile devices */
.post-card-content {
    padding-left: 2px;
    padding-right: 4px;
  }
.post-card-content-link, .post-card-meta {
    padding-left: 38px;
  }
</style>

Note that this also fixes an annoyance when viewing your site in mobile where the text is banged right up against the left edge of the screen and so slightly hard to read.

IMHO this is simpler than modifying the templates.

15

So my previous example has a few bugs when interacting with Dark mode in Mobile.

This is a better version, and tweaks cover-page and article-page:

/* Cover page - more like Casper-v2 - first-post overlays header image */    
#site-main, .posts, .post-feed {
  overflow: visible;
  z-index: 2000;
}

.post-feed {
  margin: -5vh 0 0 0;
  padding-top: 0 !important;
}
  
.post-card {
  padding: 0 0 2em 0;
  margin-bottom: 2em;
  margin-right: 1em;
}
  
/* fixes text hard-left on mobile devices */
/* Seems to make more sense to set padding on content
   rather than matching the same setting on both
   child elements */
.post-card-content {
  padding: 0.5em 0.5em 0.5em 1.5em;
}
.post-card-content-link, .post-card-meta {
  padding-left: 0 !important;
}
  
/* Article page - more like Casper v2 */
/* text overlays post image */  
.post-content {
  position: relative;
  top: -6em;
  padding: 0.5em 0.5em 0.5em 1em;
  background-color: white;
}

@media (prefers-color-scheme: dark) {
  .post-content {
    background-color: black;
  }
}

This is much easier than modifying the template - the CSS tweaks just go into your Code Injection -> Site Header.

17

Hi, do you maybe have a similar (code inject) solution for the Casper 4.0.4? :wink: