I’m using the new source theme (hosted) and my publication image is getting cut off on desktops. There was a thread in here about using CSS selectors to change the image for mobile views but there doesn’t appear to be a way to do this without reuploading the theme and hosting an image file somewhere to pull from.
Is there another way better way? Can we request a mobile image option for the publication cover image on this theme?
This can be accomplished with code injection and stashing the image on an unpublished post. It’d be a better user experience to edit the theme, but if you can’t upload a custom theme, this is still possible.
Thank you. And what would the code injection part of this look like? I don’t see a way to do this via CSS in the header, targeting the publication image.
I figured this out (with the help of Ghost support) and some additional research.
You can use the content property to target the image class for the publication cover with a CSS media query in the code injection.
<style>
@media only screen and (max-width: 600px) {.gh-header-image {content: url(https://imagefile.jpg);}}
</style>
This other solution (https://css-tricks.com/replace-the-image-in-an-img-with-css) might work as well. It didn’t for my case, but led me to another idea.