Casper theme cover image

Themes
1

Hello,
I want to keep different publication cover image based on the device screen size. In the theme, header-background.js file where I should add the custom sized image url ?

This is the code:

.responsive-header-img {
    background-image: url({{img_url background size='xl'}});
}

@media(max-width: 1000px) {
    .responsive-header-img {
        background-image: url({{img_url background size='l'}});
        background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
            url({{img_url background size='xl'}}) 2x);
        background-image: image-set(url({{img_url background size='l'}}) 1x,
            url({{img_url background size='xl'}}) 2x);
    }
}

@media(max-width: 600px) {
    .responsive-header-img {
        background-image: url({{img_url background size='m'}});
        background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
            url({{img_url background size='l'}}) 2x);
        background-image: image-set(url({{img_url background size='m'}}) 1x,
            url({{img_url background size='l'}}) 2x);
    }
}
1 Like
2

Does anyone have a solution for this? I have a publication cover image that’s not scaling to fit different screen sizes. Is there a way to modify the code to make it possible to scale the image based on the size of the screen it’s viewed on?

3

This is exactly what I’m looking for as well. The ability to make the publication cover a responsive image so it can scale on desktop and mobile.

4

Did you ever fix this? I find it difficult displaying a single cover home page image which works for both desktop and mobile.
One solution is to have a different home page for mobile and redirect to that, but having one landing page is much more desirable.

5

With regards to the background/cover image, what exactly are you seeing on desktop vs mobile and what are you expecting or wanting to see? Could you post some screenshots perhaps?

6

I’m getting what I’m expecting… just wondered if people had any different solutions for this. :slight_smile:

Since mobile is portrait/vertical layout vs ​horizontal for desktop, displaying a single wide image on desktop can look too small on a mobile phone, unless it’s scaled to fit the display.

So a square image is a good compromise, there’s lots of ways to manipulate the image in CSS but it’s ideal to be able to get the browser to choose a correctly formatted image depending on the screen size and orientation.

If I can’t get it to change image depending on the screen size, I will probably try and create a full screen background image which is responsive and will work across mobile/desktop…

7

displaying a single wide image on desktop can look too small on a mobile phone, unless it’s scaled to fit the display.

This is the part that is confusing me because the image is scaled to fit the display. You can see this at demo.ghost.io.

But I’m probably misinterpreting what you mean by “scaled to fit the display” :thinking:

I predominantly use Casper and the cover images on my sites look fine on both desktop and smaller screens.

Have you tried playing around with different ways of setting the min and max height of .site-header-content? That’s what I’ve done, sometimes. And I’ve also found that using a simple background like the gradient that is used on the demo site, a solid colour background, a simple texture, a geometric pattern etc. can be easier to work with than a photograph, unless you can find a suitable one where the primary focus of the image is in the middle (where it will still be visible when the sides are cropped off on mobile).

8

Yeah it works on a blog page style website like the demo because it has text and other elements which flows beneath it, but it doesn’t really work on a wide image by itself.
It’s just a design problem for mobile/desktop in portfolio types of websites.

As I say, the best way like this thread is trying to achieve is to be able to change image based on screen size. Or the image could scale and overcrop the sides of the image on the mobile version. Yes, having an image which works when cropped is essential of course.

But it would work better to have a different home page image designed for mobile over desktop and send them to the relevant home page. Or better yet, the page loads a portrait orientation image for mobile and a wider image for desktop.

9

@Carnarts Okay, I think now I understand where the confusion might be coming from. Thank you for your patience :joy:

The topic title and original post referred to the Casper theme, so that’s the specific theme I was referring to, but I think you’re talking about using a different theme and style of site, “portfolio type”, having a background image that completely fills or covers the index/home page? The closest thing I could find to this in the Ghost theme marketplace just now was this one, for example?

Now that I understand that, I think… please correct me if I’m still wrong, what you are hoping to achieve with having completely different images displayed on different sized screens is possible by using CSS media queries or JavaScript, depending on whether the background images are being loaded using background-img (which is just a simple @media query as shown in the code excerpt contained within the original post) or an <img> tag which would make things a little bit more complicated.

Am I on the right track here, or am I still misunderstanding?

1 Like
10

Hi, Yes, this is exactly what I mean, sorry I should have been clearer, I’m adapting a theme based on Edge. :slight_smile:
That Subtle theme you’ve linked, the background image behaviour, that’s definitely something I’m planning to try on the home page of my Edge theme, or something similar to it anyway.

But yes, I’m also going to try and use @media queries to make it load different images for different displays but javascript could be a good way to go, any examples of how it could work with that would be interesting :slight_smile: