search

kakawait / hugo-tranquilpeak-theme

A gorgeous responsive theme for Hugo blog framework
https://tranquilpeak.kakawait.com
GNU General Public License v3.0
926 stars 525 forks source link

Change author image to image from file #182

Closed dmaupin12 closed 6 years ago

dmaupin12 commented 7 years ago

I can't seem to figure out how to update the author picture to a file I have saved in the image folder. The background image is working correctly, but the picture="ex.jpg" shows a ?.

thanks for your help!

kakawait commented 7 years ago

Could you please share with me your toml configuration?

dmaupin12 commented 7 years ago

Sorry for the mess. Below is my code to the toml file.

baseurl = "https://examplewebsite.com/"
relativeurls = true
languageCode = "en-us"
defaultContentLanguage = "en-us"
title = "example website"
theme = "hugo-tranquilpeak-theme"
googleAnalytics = ""
disqusShortname = ""
ignoreFiles = ["\\.Rmd$", "_files$", "_cache$"]

[permalinks]
    post = "/:year/:month/:day/:slug/"

# Menu Configuration
[[menu.main]]
  weight = 1
  identifier = "home"
  name = "Home"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-home\"></i>"
  url = "/"
[[menu.main]]
  weight = 2
  identifier = "categories"
  name = "Categories"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-bookmark\"></i>"
  url = "/categories"
[[menu.main]]
  weight = 3
  identifier = "tags"
  name = "Tags"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-tags\"></i>"
  url = "/tags"
[[menu.main]]
  weight = 4
  identifier = "archives"
  name = "Archives"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-archive\"></i>"
  url = "/archives"

[params]
  # Customize date format use to render blog post date, categories and other
  # You must use date format used by Go Time package https://golang.org/pkg/time/
  # Months (not work with short month like "jan", "feb", etc) are translated if translation exists on i18n folders
  # Default format is: January 2, 2006 
  # dateFormat = "2 January 2006"

  # Global keywords configuration. Following keywords will be add to every pages
  # keywords = ["development", "next-gen"]

  # Hide sidebar on all article page to let article take full width to improve reading, and enjoy wide images and cover images. (true: enable, false: disable)
  clearReading = true

  # Define categories will create hierarchy between parents: `categories = ["foo", "bar"]` will consider "bar" a sub-category of "foo". 
  # If false it will flat categories.
  hierarchicalCategories = true

  description = "Hugo tranquilpeak theme demo"

  # Customization
  # Define the behavior of the sidebar
  # 1: Display extra large sidebar on extra large screen, large sidebar on large screen,
  #    medium sidebar on medium screen and header bar on small screen and
  # extra large sidebar is swiped on extra large screen and large sidebar on all lower screen (default)
  # 2: Display large sidebar on large screen, medium sidebar on medium screen and
  #    header bar on small screen and large sidebar is swiped
  # 3: Display medium sidebar on large and medium screen and header bar on small screen and
  #    medium sidebar is swiped
  # 4: Display header bar on all screens, extra large sidebar is swiped on extra large screen and
  #    large sidebar is swiped on all lower screens
  # 5: Display header bar on all screens and large sidebar is swiped on large screen
  # 6: Display header bar on all screens and medium sidebar is swiped
  sidebarBehavior = 1

  # Your blog cover picture. I STRONGLY recommend you to use a CDN to speed up loading of pages.
  # There is many free CDN like Cloudinary or you can also use indirectly
  # by using services like Google Photos.
  # Current image is on AWS S3 and delivered by AWS CloudFront.
  # Otherwise put your image in folder `static/_images/` (development)  or in `source/assets/images/` if you can't or don't want to build the theme,
  # and use relative url : `your-image.png`
  coverImage = "cover.jpg"

  # Display an image gallery at the end of a post which have photos variables (false: disabled, true: enabled)
  imageGallery = true

  # Display thumbnail image of each post on index pages (false: disabled, true: enabled)
  thumbnailImage = true
  # Display thumbnail image at the right of title in index pages (`right`, `left` or `bottom`)
  # Set this value to `right` if you have old posts to keep the old style on them
  # and define `thumbnailImagePosition` on a post to overwrite this setting
  thumbnailImagePosition = "bottom"
  # Automatically select the cover image or the first photo from the gallery of a post if there is no thumbnail image as the thumbnail image
  # Set this value to `true` if you have old posts that use the cover image or the first photo as the thumbnail image
  # and set `autoThumbnailImage` to `false` on a post to overwrite this setting
  autoThumbnailImage = true

  # Your favicon path, default is "/favicon.png"
   favicon = "favicon.png"

  # Header configuration
  # The link at the right of the header is customizable
  # You can add a link (as an icon) at the right of the header instead of the author's gravatar image or author's picture.
  # By default, author's gravatar or author's picture is displayed.
  #     url: /#search
  #     icon: search
  #     class: st-search-show-outputs

  # Custom CSS. Put here your custom CSS files. They are loaded after the theme CSS;
  # they have to be referred from static root. Example
  # customCSS = ["css/foo.css"]

  # Custom JS. Put here your custom JS files. They are loaded after the theme JS;
  # they have to be referred from static root. Example
  # customJS = ["js/foo.js"]
kakawait commented 7 years ago

@dmaupin12 Sorry for delay, I was totally busy from other projects and personal life.

In your configuration file I didn't find any author customization and in particular author.picture do you miss something?

Else you can find doc about how to customize anything related to author (image too) https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#author

maryjonah commented 7 years ago

Hello kakawait, I cannot find author.picture in the config.toml file. When i do add it i get an error. What is available is picture and the theme does not seem to find it picture

kakawait commented 7 years ago

@maryjonah When I said author.picture I mean picture property inside author block like following: https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/exampleSite/config.toml#L42

On your screenshot you fill 

picture = "/images/maryjonah.jpg"

But on which folder do you put your image?

For example, if I put avatar.gif inside <path_to_your_hugo_blog_folder>/static/img/avatar.gif then I'm updating my config.toml like following (don't forget to comment gravatarEmail

baseurl = "https://tranquilpeak.kakawait.com"
languageCode = "en-us"
title = "Hugo tranquilpeak theme"
theme = "hugo-tranquilpeak-theme"
disqusShortname = "hugo-tranquilpeak-theme"
googleAnalytics = "UA-39774706-2"
paginate = 7
canonifyurls = true
defaultContentLanguage = "en-us"

[permalinks]
  post = "/:year/:month/:slug/"

[taxonomies]
  tag = "tags"
  category = "categories"
  archive = "archives"

[author]
  name = "Thibaud Leprêtre"
  bio = "Super bio with markdown support **COOL**"
  job = "Java backend developer"
  location = "France"
  # Your Gravatar email. Overwrite `author.picture` everywhere in the blog
  # gravatarEmail = "thibaud.lepretre@gmail.com"
  # Your profile picture
  # Overwritten by your gravatar image if `author.gravatarEmail` is filled
  picture = "/img/avatar.gif"
  # Your Twitter username without the @. E.g : thibaudlepretre
  twitter = "thibaudlepretre"
  # Your google plus profile id. E.g : +ThibaudLepretre or 114625208755123718311
  googlePlus = "+ThibaudLepretre"

...

It works as expected

screen shot 2017-11-01 at 09 43 43
maryjonah commented 6 years ago

I figured out the error and have sorted the issue out. https://maryjonah.github.io/ https://maryjonah.github.io/ I placed the image in the img folder but rather called the images folder.

Thank you.

On Wed, Nov 1, 2017 at 8:44 AM, Thibaud Lepretre notifications@github.com wrote:

@maryjonah https://github.com/maryjonah When I said author.picture I mean picture property inside author block like following: https://github.com/kakawait/hugo-tranquilpeak-theme/blob/ master/exampleSite/config.toml#L42

On your screenshot you fill

picture = "/images/maryjonah.jpg"

But on which folder do you put your image?

For example, if I put avatar.gif inside <path_to_your_hugoblog folder>/static/img/avatar.gif then I'm updating my config.toml like following (don't forget to comment gravatarEmail

baseurl = "https://tranquilpeak.kakawait.com"languageCode = "en-us"title = "Hugo tranquilpeak theme"theme = "hugo-tranquilpeak-theme"disqusShortname = "hugo-tranquilpeak-theme"googleAnalytics = "UA-39774706-2"paginate = 7canonifyurls = truedefaultContentLanguage = "en-us"

[permalinks] post = "/:year/:month/:slug/"

[taxonomies] tag = "tags" category = "categories" archive = "archives"

[author] name = "Thibaud Leprêtre" bio = "Super bio with markdown support COOL" job = "Java backend developer" location = "France"

Your Gravatar email. Overwrite author.picture everywhere in the blog

gravatarEmail = "thibaud.lepretre@gmail.com"

Your profile picture

Overwritten by your gravatar image if author.gravatarEmail is filled

picture = "/img/avatar.gif"

Your Twitter username without the @. E.g : thibaudlepretre

twitter = "thibaudlepretre"

Your google plus profile id. E.g : +ThibaudLepretre or 114625208755123718311

googlePlus = "+ThibaudLepretre" ...

It works as expected [image: screen shot 2017-11-01 at 09 43 43] https://user-images.githubusercontent.com/275609/32266823-2f4815fa-bee9-11e7-909b-1f5de6fd6266.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/kakawait/hugo-tranquilpeak-theme/issues/182#issuecomment-341035172, or mute the thread https://github.com/notifications/unsubscribe-auth/AGMZ7Tca9kBoEBQjQaixbqWsGYxMYsfUks5syC9ggaJpZM4OKq8a .

-- Mary Jonah

kakawait commented 6 years ago

Seems to be fixed for you I will close the issue, feel free to re-open if not