Horrible image scaling

Developer help
1

Hi,

So, after a friend told me about Ghost, I have chosen to use it instead of Wordpress.
I normally have used Wordpress for all my projects, but I want to try something new.

I have a huge issue on my site right now that is using the “Editorial” theme.
The images shown on the front page with the “feature post” and within all articles themselves are blown up to insane sizes. There seems to be no way for me to change the size of the image.

I have tried with small 300x300 images, but that get blown up so it fills out the whole screen.
The only device that doesnt have this problem is mobile. It seems to scale fine on there.

But on Desktop in Chrome, the images are 200% to 1000% bigger than they should be.

Does anyone know how to fix this, or is this just an issue within Ghost?

Setup:

Digital Ocean droplet.
Running on Ubuntu 18.
Ghost version 3.0
Site is live at ekultur.dk

2

Also, same goes for the logo that I put that says: eKultur.dk Danmarks Digitale Debatforum.

Ghost asks me to make it a 600x72 size image… But what is shown is completely shrinked in and can barely be read.

3

Hey, are you talking about the individual posts where the images are larger than they should be?

4

Hey there @eKultur :wave:. I’ve just taken a look at your site and I can see you’ve uploaded a small image to the feature image area. The theme places the feature image at a large scale across the top of the post, I’d recommend using smaller images inside of the post content itself and uploading a more stylistic image for the large feature image.

Again the logo size is a stylistic choice within the theme. You can go in and change the size using code injection or editing the theme by downloading it in the Design section of the Admin. There is the option to choose a different theme if it doesn’t suit your content, we have lots to choose from:

3 Likes
5

Hi, I am having the exact same issue with the Editorial theme. I’ve posted elsewhere in the forum seeking help, to no avail. I’m currently corresponding with the Ghost Support team (who are awesome), but the solution appears to be far more complex than it should be. Images default to being enormous, regardless of the size of the original image.

6

Hi guys, another user of Editorial here.

I’ve given up pretty soon on a non-coding solution so I moved to a coding solution.
I’ve dealt with it modifying the SASS files.
First download the theme from the design tab.

Open the file _images.scss under assets/main/sass/

Look for the code below (the part you want to edit is around line 56)

		&.main {
			display: block;
			margin: 0 0 (_size(element-margin) * 1.5) 0;
			width: 100%;

			img {
				width: 100%;
                        }

Inside

img {
	   width: 100%;
    }

Add

max-width: 600px;
margin: 0 auto;

It should look like

img {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }

The first line you add will guarantee that no image grows bigger than 600px. This is arbitrary and what looked good for me. Trying playing around with this value to your taste.

The second line will make sure that the images look centralized even when the images don’t occupy the whole screen.

To rebuild the theme make sure you have gulp installed and run

gulp zip

inside the theme folder.
You will find a zip file inside of dist with the compiled version of the theme zipped, ready to be uploaded.