Hello, I am a beginner in Ghost. I was deeply attracted by Ghost’s beautiful interface recently. Although I am not a front-end developer, I have decided to try deploying it myself to explore it further.
I am using Ghost version 5.52 with the default Casper theme. So far, I have found solutions for most of the basic functionalities through Google and the community. However, I have been struggling with an issue related to images recently. I apologize for being a novice with no coding knowledge.
Here are my concerns: I want to add a shadow and rounded corners to the cover images of my articles, whether they are from the built-in Unsplash library or uploaded by myself. Based on my research, it seems that I only need to inject a CSS code snippet through the admin backend to achieve this. I have tried several similar code snippets, but none of them have had any effect. Can someone help me or guide me on how to properly implement this as a beginner? Thank you very much.
It should look something like this：
Hello Cathy, thank you very much for your help. I don’t dare to use the tag ‘’@‘’ to @ you. I’ve seen a helper in the community who may have misused @ to interrupt your work, so I mind doing that myself for fear of interrupting your work. However, I am still very grateful for your reply. The following is the reply to the question you mentioned: The code I used:
I have tried to insert this code in the post header of the Code injection function of the specified article alone, and even the global header of the admin management background has been tested separately. The local and global tests do not seem to have taken effect. The picture on the cover of the article seems to be still at right angles, and the shadow effect is not displayed. I’m not sure if the post-card-image keyword in the code correctly matches the part defined in the template, so it doesn’t work. Most of the test code is no different from the above, because I was on google search, the code did not take effect, so the previous test code can not be found back to accurately reproduce this problem. I have a habit of deleting some browsing history when the browser is closed, so I can’t retrieve the complete code snippets that I think are “invalid”, but roughly remember that the difference is the post-card-image keyword。
Hi!
I don’t see .post-card-image as a selector on casper.ghost.io. (If you have a different version of Casper, it certainly might be valid there.)
What worked to get the border radius is: (UPDATE - read below instead)
.post-full-image {
border-radius:8px !important
}
(You can also add your box shadow code there.)
You probably do need the !important, at least at some widths, to override the existing values set in the CSS.
Tip: On smaller screens, the image is full width, and so setting margin-left and margin-right to 1vw gives you room to actually see the shadows.
Update: Then I loaded the very latest version of Casper, and the selectors were different! So here’s what looks like it works now:
Hi, Cathy. I’m so excited. Maybe that’s the spirit of open source and sharing, and I love that atmosphere. With your help, the code works, and yes, it works. The keywords in Casper are different from those in the code I provided, at least in part so far. There was no change at all before. Now here’s the problem: previously I added a cover for each post, yes, a cover. As I enter the page into each post, the top cover image works under your code. But in the entire site’s home page, will default to show a lot of articles, including those cover pictures, in this page, those covers and no change, although I want to achieve the effect is the default home page all article covers will look more beautiful, but you have helped me to complete I did not expect, great. I wonder if the cover tag of the article displayed on the homepage is another keyword, not gh-canva.article-image? If possible, could it be unified into a single block of code so that I can inject it once and have the same effect in both places? I injected too many blocks of functionality into the site, and there was a noticeable delay when the site loaded.
You can put multiple CSS selectors in the code injection, no problem. If you’re seeing slow-downs from adding CSS, you’re either adding a ridiculous amount (many many many screens full), or the problem isn’t CSS but something else, like some javascript library you’re loading, perhaps. (Analytics and advertisements and tracking are all good suspects for a slow-down. A few lines of CSS are not.)
Click on a single article to go in, and the cover has an effect, which is great. However, the cover thumbnails included in the list of articles displayed on the homepage of the website do not seem to have changed, and they should need to be assigned to another tag, but I can’t locate this tag. As shown in the screenshot above.
