Unable to add background image -

[chenyuz3]

I copied the example for adding background image as the manual suggested below:

A refined landing page

Our journey begins here @(layout=content, background-image='url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c74c7b38-1836-46fb-a163-ebf5451be1dd/d6819u8-6893c092-8268-46d5-b03c-874dbff5c2bd.png/v1/fill/w_999,h_800,q_70,strp/moffee_wallpaper_by_steveart718_d6819u8-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODIwIiwicGF0aCI6IlwvZlwvYzc0YzdiMzgtMTgzNi00NmZiLWExNjMtZWJmNTQ1MWJlMWRkXC9kNjgxOXU4LTY4OTNjMDkyLTgyNjgtNDZkNS1iMDNjLTg3NGRiZmY1YzJiZC5wbmciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.MU0qRdrNSUT4Ug_BTEcG36ulwVYA3khPq0dM1s81Trk")')

however here is what I get as result: only words appeared

[BMPixel]

Thank you, I’ll look into it.

[chenyuz3]

Thank you, I’ll look into it.

By the way I edit the builder.py file to add UTF-8 encoding as following... not sure if this cause the problem

def read_options(document_path) -> PageOption: """Read frontmatter options from the document path""" with open(documentpath, "r", encoding='utf-8') as f: # Added encoding='utf-8' document = f.read() , options = parse_frontmatter(document) return options

[BMPixel]

I pushed a commit to fix this issue. This happens because parse_deco function cannot recognize commas in quotes. You can see the fix in the next version release or install from git repo.

[chenyuz3]

I tried again in the new version with the following syntax:

A refined landing page

Our journey begins here
@(layout=content, background-image='url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c74c7b38-1836-46fb-a163-ebf5451be1dd/d6819u8-6893c092-8268-46d5-b03c-874dbff5c2bd.png/v1/fill/w_999,h_800,q_70,strp/moffee_wallpaper_by_steveart718_d6819u8-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODIwIiwicGF0aCI6IlwvZlwvYzc0YzdiMzgtMTgzNi00NmZiLWExNjMtZWJmNTQ1MWJlMWRkXC9kNjgxOXU4LTY4OTNjMDkyLTgyNjgtNDZkNS1iMDNjLTg3NGRiZmY1YzJiZC5wbmciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.MU0qRdrNSUT4Ug_BTEcG36ulwVYA3khPq0dM1s81Trk)")')

However there is still no background image shown:

[BMPixel]

Seems like there is an extra ")" in your url. Remove the ")" and it's working. And you may need install moffee directly from the git repo to apply latest changes.

Our journey begins here
@(layout=content, background-image='url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c74c7b38-1836-46fb-a163-ebf5451be1dd/d6819u8-6893c092-8268-46d5-b03c-874dbff5c2bd.png/v1/fill/w_999,h_800,q_70,strp/moffee_wallpaper_by_steveart718_d6819u8-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODIwIiwicGF0aCI6IlwvZlwvYzc0YzdiMzgtMTgzNi00NmZiLWExNjMtZWJmNTQ1MWJlMWRkXC9kNjgxOXU4LTY4OTNjMDkyLTgyNjgtNDZkNS1iMDNjLTg3NGRiZmY1YzJiZC5wbmciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.MU0qRdrNSUT4Ug_BTEcG36ulwVYA3khPq0dM1s81Trk")')

[chenyuz3]

Seems like there is an extra ")" in your url. Remove the ")" and it's working. And you may need install moffee directly from the git repo to apply latest changes.

Our journey begins here
@(layout=content, background-image='url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c74c7b38-1836-46fb-a163-ebf5451be1dd/d6819u8-6893c092-8268-46d5-b03c-874dbff5c2bd.png/v1/fill/w_999,h_800,q_70,strp/moffee_wallpaper_by_steveart718_d6819u8-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODIwIiwicGF0aCI6IlwvZlwvYzc0YzdiMzgtMTgzNi00NmZiLWExNjMtZWJmNTQ1MWJlMWRkXC9kNjgxOXU4LTY4OTNjMDkyLTgyNjgtNDZkNS1iMDNjLTg3NGRiZmY1YzJiZC5wbmciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.MU0qRdrNSUT4Ug_BTEcG36ulwVYA3khPq0dM1s81Trk")')

I tried without the extra ")" but it is still the same... could it be caused by that I changed to UTF-8 encoding in the builder.py myself? I had to do this as there were Chinese in my folder path or in the content

[BMPixel]

I see. I don't think that encoding will cause this problem. Is it possible for you to give me the content of the generated html? You can find the html file in the output of the cli command. It looks like Generated html written to [path].

[chenyuz3]

MS - AI Supply Chain – Measuring the AI Capex Sustainability - 20240819.zip

Thanks for your effort and here is the generated HTML file for my test.md

[BMPixel]

Thank you for your information. Looks like the fix is not working in your environment. Maybe reinstall moffee to make sure you are using the latest version from repo:

pipx install git+https://github.com/BMPixel/moffee.git

pip install moffee will not work as the released version has not included latest updates.

[chenyuz3]

Thank you for your information. Looks like the fix is not working in your environment. Maybe reinstall moffee to make sure you are using the latest version from repo:

pipx install git+https://github.com/BMPixel/moffee.git

pip install moffee will not work as the released version has not included latest updates.

It worked! Thanks for your patience and sorry for being a newbie in coding/python lol

[BMPixel]

You're welcome! If you like, this repo may serve as a good start point for you to familiarize python development as it's still new and simple.