Theme settings resetting after changing package.json

Developer help
1

Hey everybody!

I want to change the settings for adaptive images. I use the Mono theme. I changed the package.json file. Instead of the code:

      "image_sizes": {
            "xxs": {
                "width": 100
            },
            "xs": {
                "width": 150
            },
            "s": {
                "width": 320
            },
            "xm": {
                "width": 440
            },
            "m": {
                "width": 600
            },
            "l": {
                "width": 960
            },
            "xl": {
                "width": 1200
            },
            "xxl": {
                "width": 2000
            }
        },

I added the code:

     "image_sizes": {
            "xxs": {
                "width": 100
            },
            "xs": {
                "width": 150
            },
            "s": {
                "width": 320
            },
            "xm": {
                "width": 512
            },
            "m": {
                "width": 768
            },
            "l": {
                "width": 1024
            },
            "xl": {
                "width": 1440
            },
            "xxl": {
                "width": 1920
            },
            "max": {
                "width": 2560
            }
        },

Then I updated the package.json on the server and reloaded Ghost for my site with the command: sudo systemctl restart ghost_mysite

After this action, the theme settings are reset to default! In the Ghost control panel I see the default settings. What could be the problem?

2

Settings are attached to the specific name of the theme and folder. Any chance you uploaded a new version or changed the name in the package.json?

3

Hmm, it looks like the theme settings are rolled back when the package.json contains any error. I have fixed in my file

“max”: {“width”:2560

to

“xxxl”: { “width”: 2560

and now the settings are not reset.

But another problem has arisen: it is impossible to upload an image. When trying to upload a photo for a team member, I see “Something went wrong while loading images”, see screenshot.

I see that no new folders are being created in the /images/size/ on the server for my new image sizes in the package.json

Error-image-loading
Error-image-loading737Ă—783 42.9 KB

4

I think Ghost’s max resize is 2000, so it might be refusing to generate your largest size?

5

I re-set the 777 permissions for all folders inside /images/ and the photos started uploading. Yes, the w2560 folder is not being created, ok, it is optional.

Folders w1024 and w1920 have appeared, and they contain the webp format inside, which is good.

But the w1440 folder and the w150 folder did not appear at all.

Also, the webp format files in the w100 and w320 folders that existed before did not appear.

I can’t understand the logic and the pattern.

6

(I don’t work for the Ghost Foundation, and I haven’t had my fingers in this particular bit of code too much.)

Ghost doesn’t generate an image of particular size/format until it gets a request for it. So if you haven’t loaded a page in the theme that requests those sizes (or if using srcsets, with a screen size that causes requests for those sizes), then that may be why you don’t see them. Updating package.json does not, as far as I understand it, cause any image generation automatically.

1 Like
7

Thank you, Cathy, It looks like the truth. Hm… I have this code in my author.hbs:

 <div class="author-image-wrapper">
                        <figure>
                            <img   
                                class="author-image"                  
                                srcset="{{img_url profile_image size="xxs" format="webp"}} 100w,
                                        {{img_url profile_image size="xs" format="webp"}} 150w,
                                        {{img_url profile_image size="s" format="webp"}} 320w,
                                        {{img_url profile_image size="xm" format="webp"}} 512w,
                                        {{img_url profile_image size="m" format="webp"}} 768w,
                                        {{img_url profile_image size="l" format="webp"}} 1024w,
                                        {{img_url profile_image size="xl" format="webp"}} 1440w,
                                        {{img_url profile_image size="xxl" format="webp"}} 1920w,
                                        {{img_url profile_image size="xxxl" format="webp"}} 2560w"
                                src="{{img_url profile_image size="s"}}"
                                alt="{{name}}"
                            >    
                        </figure> 
                    </div>

I’ve tryed directly load size=“s” to get 320w. And I have opened my site on smartphone. Unfortunately, nothing has changed. I don’t see the webp file in the w320 folder on the server.

8

if you directly construct the desired url, do you get served an image, and if so, what size?

9

O, yes, directed url on w320 gives me the right size 320px! And the file apears in the folder! But my problem I am trying to resolve is that on authors page is too small for me, and on single author page the image too large for me - Ghost theme uses the same image both to theese pages. I would like to have my own size for page one and page two. I will just send to you by personal message the urls to my site’s pages. Take a look please!

10

I do not do free support by PM, sorry.

I suspect that your size issue on these pages is going to be resolved by adjusting the css, rather than (or in addition to) changing the size of the image being loaded.

2 Likes