[Bug] Image format extensions messed up

[ghost]

Demo URL: https://paritosh-negi.github.io/myghostblog/

Images are not loading because of wrong image format extensions.

Can anyone help me to fix this?

[abhijithvijayan]

@Paritosh-Negi I will look onto it asap.

Please confirm if you used the instructions from this project's readme.

[ghost]

Yes, I followed the instructions carefully twice; still, images are not loading.

[abhijithvijayan]

@Paritosh-Negi can reproduce the issue, I guess it is the issue with buster tool.

Let me see if I can manually fix that with some changes to the script.

[abhijithvijayan]

@Paritosh-Negi I have fixed the issue.

Checkout new demo

Steps to fix: Delete the existing deploy.sh script and replace with new content from https://raw.githubusercontent.com/abhijithvijayan/ghost-on-github-pages/master/deploy.sh

Give execute permission(one time only)

chmod u+x deploy.sh

Then deploy with ./deploy.sh

Feel free to reopen the issue if this doesn't solve your issue.

[ghost]

Thank you, all images are loading now 👍

[paddy420Smokers]

Hi, Im still getting the error.

[abhijithvijayan]

Did you use the new script? Also create a demo repo.

[paddy420Smokers]

Yes Ive used the new script. Do I need a demo repo for it to work? Anyway thanks for your quick reply. Thought this thread was dead.

[paddy420Smokers]

Heres the Demo Ive setup: https://paddy420smokers.github.io/cannalogie/ (You can see that the first changed image is not appearing.)

Git Rep: https://github.com/paddy420Smokers/cannalogie

Note: Ive changed the port from 2368 (Its already in use) to 2380. Ive changed the port in the new deploy.sh and in the development.js did I miss something?

Also Im struggling with the Image bug for a few weeks now. I hope you can help me! Thanks again for your great work :)

[paddy420Smokers]

I can see that something messes up with the Image ending

Check the attached picture.

[abhijithvijayan]

@paddy420Smokers I will look on it soon

[tejakummarikuntla]

Hi @abhijithvijayan , I'm facing the exact issue, Any updates on the solution?

[abhijithvijayan]

This is an easy fix.

I didnt get any updates on this, hence I missed.

This is caused by new major changes in ghost and buster deprecation.

Even though buster is deprecated, minor tweaks on deployment script can make ghost fully work like before.

[tejakummarikuntla]

No @abhijithvijayan , I didn't see its fixed. The image extensions are getting messed up still.

[abhijithvijayan]

Will get this fixed asap.

Could you attach the image source(the messed up content)?

[tejakummarikuntla]

I don't think the issue is with Buster , I tried doing the same thing with Wget, [I didn't use Buster here] wget -r -nH -P docs -E -T 2 -np -k http://localhost:2368/ Ref Still, I find the same issue coming up, probably the issue is due to the latest update of Ghost.

[abhijithvijayan]

The deployment script here has fix for png files, all it takes is same code for jpg

If you could attach the html image broken source here, I can attach the resolution as well

[abhijithvijayan]

Also thanks for suggesting way to use wget

I will migrate the instructions and script and fix all that issue and let you know

[tejakummarikuntla]

No @abhijithvijayan , I didn't use any JPG files, all I used is PNG. Please find the attachment.

[tejakummarikuntla]

@abhijithvijayan This filename issue is occurring at three diff location which reflects at post-card-image image class.

1. static/index.html
2. static/PUBLISHED_BLOG_TITLE/index.html
3. static/tag/CORRESPONDING_PUBLISHED_BLOG_TAG/index.html

[abhijithvijayan]

@tejakummarikuntla

As this issue was raised once before, I pushed a fix to resolve this, it was resolved to jpg images only.

As now with png, its a simple fix. All it takes is copying these lines as that of png

https://github.com/abhijithvijayan/ghost-on-github-pages/blob/682acca45af056b58da4b2e83964a05d7b2c6b3d/deploy.sh#L52

https://github.com/abhijithvijayan/ghost-on-github-pages/blob/682acca45af056b58da4b2e83964a05d7b2c6b3d/deploy.sh#L53

https://github.com/abhijithvijayan/ghost-on-github-pages/blob/682acca45af056b58da4b2e83964a05d7b2c6b3d/deploy.sh#L54

[tejakummarikuntla]

Hi @abhijithvijayan , Adding the following lines which mimics the .jpg format in deploy.sh, fixed this!

find static -name *.html -type f -exec sed -i '''s#.pngg 600w#''.png 600w''#g' {} \;        
find static -name *.html -type f -exec sed -i '''s#.pngng 1000w#''.png 1000w''#g' {} \;
find static -name *.html -type f -exec sed -i '''s#.pngpng 2000w#''.png 2000w''#g' {} \;

[abhijithvijayan]

Could you send a PR for this?

[tejakummarikuntla]

Absolutely !!!!

[abhijithvijayan]

@tejakummarikuntla Thanks.

Just one thing, buster generated urls as per user, does wget breaks the asset links or something without doing so?

[tejakummarikuntla]

But @abhijithvijayan , I think we gotta another problem. The mobile view from chrome is totally fine, but the entire webpage is totally messed up when I open the site on my mobile.

• I faced this issue even before the .png fix [Only for this (Casper (default) theme)] Any possible solution? http://tejakummarikuntla.github.io/blog

• I didn't find this issue when I left Buster and went for Wget approach. It was totally working fine. this is by using wget: http://tejakummarikuntla.github.io/bog_wget

[abhijithvijayan]

@tejakummarikuntla Could you attach the live link of the site?

I will take a look at it. Probably wget broke something.

[tejakummarikuntla]

@abhijithvijayan , I tried using the png, jpg typo clearing bash script on Wget generated files instead of Buster generated files. It worked really well, I don't see any issues with the Mobile view now. As we can see various issues are rising with Buster which requires py2 dependency as well.

Why don't we use Wget in this project instead of Buster. What do you say?

[abhijithvijayan]

Sure. I will accept PRs

wget can then replace p2 dependancy issue and buster deprecation.

I prefer ghost over everything I have ever used. It's so easy to use and SEO friendly and with wget, this can have SSG.

[abhijithvijayan]

@tejakummarikuntla

Your build is not successful with patched links. I will fix the script.

[abhijithvijayan]

@tejakummarikuntla Everything is set to use wget

The script fixes jpeg, jpg, png image formats.

Everything seems to work flawlessly.

Try again with the latest script and feel to reopen this issue, if anything comes up.

[DieYiSu]

Hi @abhijithvijayan ,

I have found some problem when I run your deploy.sh on my Macbook Pro, and I have fixed it :)

• The sed shell command which trying to replace jpgg with jpg
• The sed shell symbol in the command which trying to replace localhost:2368 with username and gh_repo.
• The Fixing Images step should be to do on the setup step.
• The master branch had been replaced with main branch by Github team at 2020/10, so you don't need to create master and gh-pages branch.

I will send the PR to you.