Search code examples
pythonpelican

Pelican image links break when viewing article through "categories"


I am sure I'm missing something obvious. I'm defining Categories through folder names inside the content folder. If I click content while viewing a page, I see folder names (e.g. categ1, categ2) plus 'misc', that's fine. When I click categ1, I see one complete article but the image links are now all broken.

localhost:8000/category/categ1.html

What I would like to see is just a click-able list of articles in that category. Or at the very least, not broken links.

(I have similar behavior if I try to use tags, but one thing at a time...)

There are no category lines in the .rst files.

Besides name, timezone etc. I am using these in my configuration.

UPDATE: Images are in the Images folder in Content. I've also put a copy of Images folder in categ1, but no help.

THEME = 'nmnlist' 

PATH = 'content'

# ARTICLE_PATHS = ['articles']    # have tried this also

STATIC_PATHS = ['images', 'pdfs']

RELATIVE_URLS = True  # have tried False also

PLUGINS = ["render_math"]

Solution

  • It sounds like this might be a problem with image URLs being relative.

    The Problem

    If this is the case, suppose you have a Markdown page in content/mypage.md that is generated into localhost:8000/mypage.html, and it has a (working) reference to an image:

    ![Alt text](content/myimage.png)
    

    which is rendered into the html:

    <img src="content/myimage.png" />
    

    and points to localhost:8000/content/myimage.png. However, if you then try and process that same Markdown into HTML for a categories page, it will render the same image markdown:

    ![Alt text](content/myimage.png)
    

    into the same html:

    <img src="content/myimage.png" />
    

    but since this is on the categories page at localhost:8000/categories/mycategory.html, this relative image URL now points to localhost:8000/categories/content/myimage.png and the image is broken on categories and tags pages.

    The Solution

    The solution is simple: one /. Use absolute references to images in your Markdown by prefixing them with a /: instead of using content/myimage.png, use /content/myimage.png:

    ![Alt text](/content/myimage.png)
    

    That will always render the image at localhost:8000/content/myimage.png, regardless of what page it is on.