Okay
  Public Ticket #1797239
Wrong image path
Closed

Comments

  • Henrik started the conversation

    I'm trying to create a theme (and finding it rather hard). Currently, I'm running into this:


    [WARNING] renderer-context.js: wrong image path - missing dimensions for: /Users/_/_/Publii/sites/zendy/input/media/posts/2


    Is this symptomatic of stuff missing from config, or does it have something to do with the templates?


    (PS., what do you think about creating a public Slack space for Publii instead of this ticketing system?)

  •  358
    Thomas replied

    Hi,

    Is this warning blocks your rendering?

    I suppose that the warning is caused by empty fields in the db - I will investigate it and try to fix in the next release, but it should not block the rendering process.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

  • Henrik replied

    Thank you for the response!


    I've managed to change the error message. It seems that the theme name as per config.json has to be identical to the folder name. Is this correct? I had the name "Zendy Theme" in config.json, stored in "Zendy" as folder name, and Publii promptly went and looked for the theme in sites/zendy/input/themes/zendy theme/ rather than sites/zendy/input/themes/zendy/

    I fixed this (renamed the theme in config.json), but nevertheless, it's still not quite happy:

    An error (1002) occurred during parsing index.hbs file.
    ENOENT: no such file or directory, open '/Users/_/_/Publii/sites/zendy/input/themes/zendy/assets/css/style.css'

    However, copy-pasting the path from the error message, there's indeed a CSS file where it expects it to be. There's not much in it, but it's there for sure:

    cat '/Users/_/_/Publii/sites/zendy/input/themes/zendy/assets/css/style.css'
    a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{width:100%;height:100%}body{width:100%;height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}li,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before{content:'';content:none}q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

    Edit: I've noticed that this happens only when I click "Save & preview" from settings. If I click "Preview your changes" instead, the site generates just fine.

    By the way, what's the correct way to develop a theme? Currently, I have it sitting in publii/themes, and I "reinstall" it when trying it out. Should I develop it directly from publii/sites/zendy/input/themes instead? The reinstalling bit does make for a slow-ish feedback loop. 


    It seems I can edit it directly in the sites folder, but I'm worried about it being purged or altered due to being a working copy rather than the canonical version.

  •  358
    Thomas replied

    Hi again,

    "I've managed to change the error message. It seems that the theme name as per config.json has to be identical to the folder name. Is this correct?"

    Yes - the name in the config.json must be equal to the directory name.

    Regarding the style.css file problem - it is very weird, at this moment I have no idea why it happens as both buttons uses the similar code.

    "By the way, what's the correct way to develop a theme? Currently, I have it sitting in publii/themes, and I "reinstall" it when trying it out. Should I develop it directly from publii/sites/zendy/input/themes instead? The reinstalling bit does make for a slow-ish feedback loop. "

    You can edit the theme files directly in the site input folder, without reinstalling it - during the render, Publii will load the new files.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

  • Henrik replied

    Thank you again!

    "Yes - the name in the config.json must be equal to the directory name."

    This would be excellent to have in the documentation (or I didn't read the documentation carefully enough).

    "Regarding the style.css file problem - it is very weird, at this moment I have no idea why it happens as both buttons uses the similar code."

    Maybe I'm engaging in non-deterministic programming here, but for the moment, preview works, so I'm not going to touch it. :)

    I'm making decent headway (though I'm ignoring the original problem for now). I'm all the way to visual-overrides.js now, which is currently just generating:

    div#hero { background-image: url("../../media/website/1540270101453.svg")}

    Where the URL is extracted from params, set by the user in theme settings. However, the weird thing is, once it has passed through the renderer, the relative path is stripped away. The last line in style.css in the preview folder is,

    div#hero{background-image:url(media/website/1540270101453.svg)}


    I notice that it's also stripping the quotation marks out of there. Is this by design? What's the proper way of inserting an image URL into CSS?

  •  358
    Thomas replied

    Hi,

    I will check the documentation in the free time and the update it if necessary.

    The CSS is compressed and the compressor removes quotes as they are unnecessary - you can always disable CSS compression under site settings.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

  • Henrik replied

    "I will check the documentation in the free time and the update it if necessary."

    If the documentation is on Github, I can make a PR if you want.

    "The CSS is compressed and the compressor removes quotes as they are unnecessary - you can always disable CSS compression under site settings."

    Right, but it also seems to remove the relative path. Is this because an absolute path is expected? I.e., do I need to somehow get the server path and add it to the "media/website/1540270101453.svg" segment?

  •  358
    Thomas replied

    Regarding images - could you provide an example what you have in the CSS code and what you get?

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

  • Henrik replied

    For example, I'm trying to output (using the override),

    .logo { background-image: url(../../media/website/Logo-Red.svg);}


    Since in CSS, the image is pulled in relative from the CSS file location, I have to prepend  "../../" to "media/website/Logo-Red.svg" as supplied from params.

    Because of the "compression", this comes out as media/website/Logo-Red.svg after generation, which points to the wrong place.

    As far as I can tell, this can only be resolved in one of two ways: include the absolute path in params, or allow relative paths in the url(…).

  •  358
    Thomas replied

    Hi,

    Did you tried to use relative paths to the images directory inside your theme, instead of using media/website catalog?

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

  • Henrik replied

    Since the images are user-defined, I'm not sure I can do that.

    Let's turn it around: what's the recommended way of accessing user-generated images in CSS? Let's say I have an element that changes background depending on a class set on the parent element. In CSS, I can select for this, but as there is no parent selector, this can't be done by injecting styles onto the element. Also, setting styles directly on an element is frowned upon, unless absolutely necessary.

    Relative paths are valid CSS, so removing them should be considered a bug in my opinion.

    Oh! I should point out that they are all SVGs so there's no need for responsiveness.

  •  358
    Thomas replied

    Hi again,

    I have tried to reproduce this issue, but I am unable to do it - I had always proper relative paths.

    The only thing which I can do - is force disable rebase feature of the clean CSS library: https://github.com/GetPublii/Publii/issues/265

    required change is visible here: https://github.com/GetPublii/Publii/commit/045fb45c8bf415cabdfa766db9cd4ac10ff96302#diff-d9881c828b537e8b79fb7f38c3f8570e

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

  • Henrik replied

    Thank you Thomas,

    Very odd though. This is what I generate, and what shows up in style.css:

    /* from override output directly */
    div#hero > div#hero-text-container { color: #FFFFFF; }
    header.scrolling { background-image: url(../../media/website/1540270101453.svg);}
    #promo-area-1 { min-height: 400px; }
    #promo-area-2 { min-height: 400px; } /* from style.css */
    div#hero>div#hero-text-container{color:#fff}
    header.scrolling{background-image:url(media/website/1540270101453.svg)}
    #promo-area-1{min-height:400px}
    #promo-area-2{min-height:400px}

  •  358
    Thomas replied

    Hi,

    Did you tried to apply my change on Publii source files and then check if it helps with your case?

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!