mcrice123 / morphic

Repository for web site code
0 stars 0 forks source link

Image paths broken using Hugo relURL #1

Closed mcrice123 closed 6 years ago

mcrice123 commented 6 years ago

The images on this site are not showing and it appears to be caused by the relURL function returning the wrong path for the image. The function most likely doesn't work because of my choice of baseUrl.

A snapshot of the element displayed on the website: image

My config.toml file:

languageCode = "en-us"
title = "Morphic Graphic Novel Series"
#baseurl = "https://mcrice123.github.io/morphic/"
publishDir = "docs"
theme = "hugo-future-imperfect"
preserveTaxonomyNames = true
paginate = 5
# disqusShortname = "maria_rice"
disqusShortname = ""
googleAnalytics = ""
pluralizeListTitles = false

[params]
  # Sets the meta tag description
  description          = "Official website for the graphic novel series 'Morphic', created by Maria Rice"
  # Sets the navbarTitle that appears in the top left of the navigation bar
  navbarTitle          = "Morphic"
  # Sets where "View More Posts" links
  viewMorePostLink     = "/blog/"

# Optional Params
  # Sets navbarTitle to match the section of the website
  dynamicTitles        = false
  # Sets RSS icons to appear on the sidebar with the social media buttons
  rssAppearAtTop       = true
  rssAppearAtBottom    = true
  # Sets Social Media icons to appear on the sidebar
  socialAppearAtTop    = true
  socialAppearAtBottom = true
  # Sets Categories to sort by number of posts instead of alphabetical
  categoriesByCount    = false
  # Sets Estimated Reading Time to appear in post headers
  includeReadingTime   = true
  # Sets the Favicon and Version for the site. Default support is for
  # apple-touch-icon-precomposed.png, favicon.png, favicon.ico, and mstile.png.
  # These are stored in the favicon folder. See the following for more information:
  # https://github.com/audreyr/favicon-cheat-sheet
  loadFavicon          = false
  faviconVersion       = ""
  # Sets Social Share links to appear on posts
  socialShare          = true
  # Load custom CSS or JavaScript files. The variable is an array so that you
  # can load multiple files if necessary. You can also load the standard theme
  # files by adding the value, "default".
  # customCSS            = ["default", "/path/to/file"]
  # customJS             = ["default", "/path/to/file"]
  customCSS            = ["default"]
  customJS             = ["default"]

# Disqus will take priority over Staticman (github.com/eduardoboucas/staticman)
# due to its ease of use. Feel free to check out both and decide what you would
# prefer to use. See Staticman.yml for additional settings.
[params.staticman]
  # Sets Statiman to be active
  staticman = false
  # Sets the location for Staticman to connect to
  username  = ""
  repo      = ""
  branch    = ""

  [params.staticman.recaptcha]
    sitekey = "SITE_KEY"
    secret  = "ENCRYPTED_SECRET"

  # These are optional params related to the sidebar. They are recommended, but not
  # required for proper functionality. HTML is supported within the params.
[params.intro]
  header    = "Morphic"

  paragraph = "A fantasy graphic novel series by Maria Rice"

  about     = "Meet Erica 'Errie' Bright, a regular teenaged girl who discovers the existence of powerful beings called Morphics just outside her hometown of Ash Root."

  # This appears at the top of the sidebar above params.intro.header.
  # A width of less than 100px is recommended from a design perspective.
  [params.intro.pic]
    src       = "/img/main/wolflogo.jpg"
    # Sets Image to be a cirlce
    circle    = false
    # Sets Image to be Future Imperfect's hexagon
    imperfect = true
    width     = ""
    alt       = "Morphic Graphic Novel Series"

[params.postAmount]
# Sets the number of recent posts to show in the sidebar. The default value is 5.
    sidebar = 5

# Sets the menu items in the navigation bar
# Identifier prepends a Font Awesome icon to the menu item
[[menu.main]]
  name = "Home"
  url = "/"
  #identifier = "fa fa-home"
  weight = 1

#[[menu.main]]
 # name = "About"
 # url = "/about/"
  #identifier = "fa fa-id-card-o"
 # weight = 2

[[menu.main]]
  name = "Blog"
  url = "/blog/"
  #identifier = "fa fa-newspaper-o"
  weight = 3

[[menu.main]]
  name = "Categories"
  url = "/categories/"
  #identifier = "fa fa-sitemap"
  weight = 4

[[menu.main]]
  name = "Main Cast"
  url = "/characters/"
  weight = 5

# Sets Social Media icons to appear and link to your account. Value should be your
# username unless otherwise noted. These are the icons affected by socialAppearAtTop
# and socialAppearAtBottom.
[social]
  # Coding Communities
  github          = "mcrice123"
  #gitlab          = ""
  #stackoverflow   = "" # User Number
  #bitbucket       = ""
  #jsfiddle        = ""
  #codepen         = ""
  # Visual Art Communities
  #deviantart      = ""
  #flickr          = "example"
  #behance         = ""
  #dribbble        = ""
  # Publishing Communities
  #wordpress       = ""
  #medium          = ""
  # Professional/Business Oriented Communities
  #linkedin        = "example"
  #foursquare      = ""
  #xing            = ""
  #slideshare      = ""
  # Social Networks
  facebook        = "MorphicGraphicNovel"
  #googleplus      = ""
  #reddit          = "example"
  #quora           = ""
  #youtube         = ""
  #vimeo           = ""
  #whatsapp        = "" # WhatsApp Number
    # WeChat and QQ need testing.
  #  wechat          = ""
  #  qq              = "" # User ID Number
  #instagram       = "example"
  #tumblr          = ""
  #twitter         = "example"
  #skype           = ""
  #snapchat        = ""
  #pinterest       = "example"
  #telegram        = "example"
  #vine            = ""
  # Email
 # email           = "example"

And my layouts/post/featured.html that returns the image element for a majority of the posts where the image isn't showing up:

{{ if and (isset .Params "featuredpath") (ne .Params.featuredpath "") }}
    {{ $.Scratch.Set "path" .Params.featuredpath }}

    {{ if and (isset .Params "featured") (ne .Params.featuredpath "") }}
        {{ $.Scratch.Set "structType" "page" }}
        {{ partial "img-path" . }}
        {{ $path := $.Scratch.Get "path" }}
        {{ $alt := $.Scratch.Get "alt" }}
        {{ $img := $.Scratch.Get "img" }}

        <a href="{{ .RelPermalink }}" class="image featured">
            <img src="{{ $path | relURL }}" alt="{{ $alt }}">
        </a>
    {{ end }}
{{ end }}

Perhaps I'm misunderstanding how the relURL function works. Any suggestions as to how to fix this is appreciated.

mcrice123 commented 6 years ago

Turns out I did the image urls wrong to begin with.

First, I ran the local server incorrectly. I thought I was doing it wrong when I set the base url to 'mcrice123.github.io/morphic', but actually that was correct and I was navigating to 'localhost:1313' on my browser and not seeing anything. I didn't look too closely at the terminal when it said 'Web Server is available at http://localhost:1313/morphic/'.

Therefore, I commented out the base url in the config to run on the local server and I played around with the image paths to get them to show up on the browser. I formatted them like "../../img/book1/bw_page1.jpg" when they should have been formatted like "/img/book1/bw_page1.jpg" in the markdown files. When I change the image urls to the correct path, the images appear when the server is run correctly AND when pushed to the public site, so the problem is solved.