Trouble with a Ghost theme (html or css)
February 16, 2024 10:01 AM Subscribe
For financial reasons, I'm trying to decide if I want to switch to Ghost (from Wordpress). One of their themes, Ruby, looks like it might be suitable, but I'm having trouble changing the height of the images being displayed. Can you help me figure out what's going on?
I have this one page on my site where I sell records. The images are always square-ish.
On this Ghost theme, the images are rectangular. I've messed around a bit with the code but for the life of me cannot get the images to be any other height. I have searched the code of every file in theme for the word height and have messed with every one that seems like it could be relevant (ie, not line-height etc.).
The image height never changes. How do I figure out which variable, presumably in the CSS, that I need to change?
Note that I tried to post the code of the page here using both CODE and PRE tags but neither worked. I realize this might be futile but thought it was worth a shot.
I have this one page on my site where I sell records. The images are always square-ish.
On this Ghost theme, the images are rectangular. I've messed around a bit with the code but for the life of me cannot get the images to be any other height. I have searched the code of every file in theme for the word height and have messed with every one that seems like it could be relevant (ie, not line-height etc.).
The image height never changes. How do I figure out which variable, presumably in the CSS, that I need to change?
Note that I tried to post the code of the page here using both CODE and PRE tags but neither worked. I realize this might be futile but thought it was worth a shot.
don't ask me why they're using padding to set the image heights, maybe it's a trick to allow the image to auto-crop to the desired aspect ratio
posted by BungaDunga at 10:42 AM on February 16 [1 favorite]
posted by BungaDunga at 10:42 AM on February 16 [1 favorite]
I'm seeing a ".post-feed .featured" with a min-height that makes the all-image (featured) articles larger. This seems to stretch the rows into taller rectangles, and removing it does make a "featured" post respect the dimensions of the image (until you get into the responsive styling, don't forget to resize your browser to test phone layouts.)
For the image/text ones, changing the object-fit to "scale-down" instead of "cover" gives you a little square image in the rectangle. BundaDunga's change give you a square image with the text attached to the bottom.
Of course, mixing the full-image cards with the text-image cards means that one of the two kinds is going to have some non-image padding to match the row height.
posted by Anonymous Function at 10:48 AM on February 16
For the image/text ones, changing the object-fit to "scale-down" instead of "cover" gives you a little square image in the rectangle. BundaDunga's change give you a square image with the text attached to the bottom.
Of course, mixing the full-image cards with the text-image cards means that one of the two kinds is going to have some non-image padding to match the row height.
posted by Anonymous Function at 10:48 AM on February 16
If you have access to Chat GPT, especially v4, ive found that it can sometimes be useful to help figure these things out, or at least give you options to try. Its solved more than a few weird css issues for me at least.
posted by cgg at 10:50 AM on February 16
posted by cgg at 10:50 AM on February 16
Response by poster: None of those suggestions had any effect that I can tell.
Absolutely baffled, but thanks. I appreciate the help.
posted by dobbs at 11:40 AM on February 16
Absolutely baffled, but thanks. I appreciate the help.
posted by dobbs at 11:40 AM on February 16
The images are being automatically resized (with constrained width and cropping the top/bottom to fit) because of the object-fit: cover; rule on the .u-object-fit class. If you want to show the whole image instead, you can change that to object-fit: contain; but it won't look quite as clean.
You can also tweak the displayed height of the images (sort of) by changing the padding-bottom percentage on the .u-placeholder.rectangle rule. If you increase this too much there are gaps between the image and the slug though.
According to devtools at least, these rules are all in the utilities.css file.
posted by neckro23 at 12:15 PM on February 16
You can also tweak the displayed height of the images (sort of) by changing the padding-bottom percentage on the .u-placeholder.rectangle rule. If you increase this too much there are gaps between the image and the slug though.
According to devtools at least, these rules are all in the utilities.css file.
posted by neckro23 at 12:15 PM on February 16
As I look at and resize the main ghost theme - those "cards" on the main page are resizing to adapt to the screen width. And when the page has two columns of cards the cards are roughly squarish. I suspect forcing these cards to be square is going to have side effects at other sizes that you're not going to like.
Ghost appears to be a paid theme from a paid service (unless I'm misunderstanding) -- I would inquire as part of your purchase process if there is a page layout that accommodates forcing a square presentation for the cards at all screen sizes. If they can't accommodate this basic need you have I don't think this particular theme suits you.
Looking at the CSS I see CSS grid controls the sizing of the columns at a larger width and then CSS Flexbox at lower widths. You could remove the grid constraint, then set an aspect-ratio of 1 on the cards and get it roughly to work, but this all seems like the kind of hackery that a theme like this is meant to avoid.
posted by artlung at 12:44 PM on February 16
Ghost appears to be a paid theme from a paid service (unless I'm misunderstanding) -- I would inquire as part of your purchase process if there is a page layout that accommodates forcing a square presentation for the cards at all screen sizes. If they can't accommodate this basic need you have I don't think this particular theme suits you.
Looking at the CSS I see CSS grid controls the sizing of the columns at a larger width and then CSS Flexbox at lower widths. You could remove the grid constraint, then set an aspect-ratio of 1 on the cards and get it roughly to work, but this all seems like the kind of hackery that a theme like this is meant to avoid.
posted by artlung at 12:44 PM on February 16
Response by poster: Thanks for the new answers. Tied up with something at the moment but will try again tomorrow. Thank you, all.
artlung, yes it's a paid service and the theme is included. However, I don't want to pay for the service and then find out it's not suitable as they don't offer refunds, so am trying to mess with it first to see how pliable it is to someone with my weak skillset.
posted by dobbs at 2:38 PM on February 16
artlung, yes it's a paid service and the theme is included. However, I don't want to pay for the service and then find out it's not suitable as they don't offer refunds, so am trying to mess with it first to see how pliable it is to someone with my weak skillset.
posted by dobbs at 2:38 PM on February 16
« Older Multiple Office logins on desktop? | Dessert or liqueur that best captures the essence... Newer »
You are not logged in, either login or create an account to post comments
.u-placeholder.rectangle { padding-bottom: 100%; }posted by BungaDunga at 10:34 AM on February 16