Hi there,
I am currently setting up a new website for our agency, and right now I am building out the page/directory structure and laying out some basic page structuring with bootstrap.
Everything is working smooth so far, hugo is a really great product. However, right now I am a bit stuck with my implementation of a portfolio page, which is - as you can probably imagine - kind of a blog.
You can check out the project here: I’ve made it public on github
I have created a filestructure as I think makes sense:
In Content there is a subdirectory with projects called “Portfolio”. In there I have created a single blog entry and another one with an image. The one with an image in turn holds a dir called images with all images connected to the blog post.
To display them I have in my theme created a directory called portfolio, holding a list.html which should be the custom list-page for the portfolio displaying all our projects.
There are some problems with that, that I don’t see how I can fix them right now:
- Images are not displayed in the rendered blog post, check out the project “A project with Image”
- I have no front-matter available for my list-page as i have only got the list.html available right now. This in turn means i can’t realle set meta/OG information later when I configure this in my head. Where could I put my list-pages front-matter? Would I need to create another page in “/Content” for this?
- On the list page, I want to set an image connected to a post as the background of the tile. How can I access the image file I want? Would I need to use inline styles in my html for this or can i accomplish this using css?
I would be very thankful for some input on these questions and also, as this is my first very big (or at least bigger than one-pagers with a blog) hugo project, if someone more seasoned could take a look over how I set things up, this would be insanely helpful. I think I might have made a lot of rookie mistakes!
Cheers from Germany and big thanks in advance,
Max
Well, if you refer to an image like that
in your MD file, it can’t be rendered unless you put it into static/images(static being located in your project’s root). You can’t (obviously, and you’d have already seen that by checking the error message(s) in your browser’s developer console) refer to an image with an absolute URL unless you store the image so that it can be accessed there.
Two solutions:
- refer to the image as
image/... in your MD file (without the leading slash, thus as a relative URL
- forego the
images directory and simply put your images directly in the same directory as your MD file, referring to them simply as filename.jpg.
I’m not sure what you’re trying to say here (by “my head” you probably mean the head element of your HTML, not really your head?). Here’s what I have in “my head”:
{{$title := .Title }}
{{$canonical := .Permalink}}
{{$desc := ""}}
{{ with .Description }}{{ $desc = . }}
{{ else }}
{{ with .Summary }}{{ $desc = . }}
{{ else }}
{{ $desc = .Site.Params.description }}
{{end}}
{{end}}
<meta name="description" content="{{ $desc}}">
<meta itemprop="description" content="{{ $desc }}" />
<meta property="og:description" content="{{ $desc }}" />
<title itemprop="name">{{$title}}</title>
<meta property="og:title" content="{{ $title }}" />
<meta itemprop="name" content="{{ $title }}" />
<meta name="application-name" content="{{ $title}}" />
<link rel="canonical" href="{{$canonical}}"/>
<meta name="url" content="{{ $canonical}}" />
<meta property="og:url" content="{{ $canonical }}" />
{{ with .Params.featured_image }}
{{$img := $.Page.Resources.GetMatch .}}
{{with $img}}
<meta itemprop="image" content="{{ .Permalink | absURL }}" />
<meta property="og:image" content="{{ .Permalink | absURL }}" />
{{end}}
{{end}}
That stuff is included in the head.html partial used for every single page, regardless of list or not.
As to your last question, I’d suggest that you first search around in the forum and then open a new thread if you still have questions. Basically, what you’re looking for is a list template that outputs a summary and the featured image for every post it lists. That should give you some keywords to search for.
Hi @chrillek thanks alot for the extensive answer! I was already able to clean up some stuff with your help. However, what I can’t seem to figure out is how to get the referencing of images from within a post right.
I went with your second suggestion as I feel its the most effective way forward, looking at how I plan this site’s structure out in my head. However, I still receive a 404 and hugo tries to locate it in my root dir.
Can you spot my mistake?
Dir structure:
content
|_portfolio
|_projectwithimage
|_demobild.jpg
|_index.md
This is the content of my index.md:
---
Title: "A Project with Image"
publishDate: "2022-09-08"
Summary: "W/ Image dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
Categories: ['UiUx']
projectYear: "2022"
---
This Project has an Image
This works fine when visiting:
http://localhost:1313/portfolio/projectwithimage/
structure
content/
├── portfolio/
│ └── projectwithimage/
│ ├── demobild.jpg
│ └── index.md
└── _index.md
content/portfolio/projectwithimage/index.md
@jmooring thanks for your reply!
I have it set up exactly as you do, but it does not work on my machine. Weird.
Any ideas? Maybe there is some setting/configuration I need to adjust?
Please post a link to the public repository for your project.
See https://discourse.gohugo.io/t/requesting-help/9132.
Let us see your code
Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.
If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.
@chrillek @jmooring I had already posted the public repository in my initial opening post 
I noticed that (again, that’s why I deleted my post). But: When I clone your repository and
hugo -D server it, I see the image on ...portfolio/projectwithimage just fine. So your repository is fine, and I guess, something else is not.
Completely unrelated: You might want to rethink your choice of white on black. There’s a reason why printed text (which is meant to be read) is printed black on white, not the other way around.
