I am trying to save the current page from the range iteration to $page and then extract the pagenumber which I will use to match the id of recent works.
But it seems my attempt is incorrect.
create a data file (in JSON format) holding your BLOG posts which you want displayed on the home page in a similar manner to Recent Works, or
store your blog posts as markdown files in the content/blog directory, and have the list of blog posts displayed in as tiled images (like Recent Works) rather than a long list as the theme currently does?
Hi Funkydan2,
I am going for number 2. The tab I want to display using recentworks layout is called, “Projects.”
I created a list.html within a Projects folder that I created within layout.
So the Projects folder within layouts has a list.html, which should specify the “Projects” page layout.
I copied the html code from recentworks and tried to modify it so that the Projects page will have tiles display. Since recentworks put it’s data within a json file, I did the same and created a new file called projects.json within data, and thought that I would need to update projects.json with new tiles as I add more blogs/content to Projects
If so, I don’t think you need to double handle things with blog posts (markdown files with front matter) as well as data files. All you need is the markdown + front matter.
In layouts/projects/list.html you’ll want code that uses the logic of the current layouts/_default/list.html (so, ranging through the pages of the paginator) and the html/css of layouts/partials/recentworks.html.
In your layouts/projects/list.html you’ll need something like this:
Completely untested…have a look at the default list.html to work out what needs to go before and after this code to make it work (this will replace something like lines 9-21 of the default/list.html)…but it’s the basic idea.
How it works is that it uses .Paginator to go through your blog files in date order. It then takes the .Permalink value for each page and the Pages .Title and .image (all of which need to be set in each page’s frontmatter) to build the ‘tiles’ of the index page.
Hopefully, this points you in the right direction.
Okay got it working:
I added Image variable in front matter of .md, and then accessed it via .Params.image in the range loop of Projects/list.html
Thank you so much.
UPDATE:
So it seems the layout is a little different for some reason.
Recent works is aligned left to right in rows, while my version seems to be aligned top to bottom.
Is it something with the variable $area?
{{ range $index, $area := .Site.Data.recentworks }}
Glad to hear I pointed you in the right direction.
Could you share your code - either do a bunch of copy and pastes…or best, create a Git repository and share a link
Either you’ve changed the original layouts/partials/recentworks.html and you just need to re-download the original, or you’ve done something to the CSS which has changed the layout.
Hi funkydan.
Ashamedly, I am not very good with git, so I had to watch a few video and learn the basics.
It’s pretty cool everything can be done from the command line
So your layouts/projects/list.html isn’t finished.
The way I learnt to use hugo was by doing exactly what you’re doing - look at someone’s theme and work out why it works, and how to make it do what you want.
So what you need to do is look more closely at layouts/_default/list.html
You need to make your layouts/projects/list.html look more like the default - so for starters, load the header partial at the start and the footer partial at the end, and there’s probably some other HTML you’ll need to write to get things laid out how you want.
Interesting. This is my first time building a website ( the only programming I know is related to Computer Vision and Python). I don’t think I want to do it professionally as it seems stressful, but It’s a pretty cool skill to have and want to try building a few.
Thank you. I will take a closer look at this and play around with it a bit more. I had to finish up some other work, so I’m sorry for the late reply.
I’m no CSS expert, and it’s a bit tricky without seeing all the code. Could you share your code to a git repository, then maybe someone can clone it and see what the relevant part of the CSS is?
(This is most likely a CSS/HTML thing, and so a little outside the scope of the Hugo forums…on the other hand, it’s a helpful community!)
Oops - I forgot that you’d linked to that earlier.
Could you push your latest updates, because at the very least the projects layout is still broken…there’s nothing in their to load the CSS or scripts. It most likely needs to start with {{ partial "header.html" }}.
Well at the moment your site doesn’t build because you’ve got an extra comma in your json files.
With git…you should be able to just delete the files, and then commit the changes, and then those files will be removed from the repository (actually they’re still there in history…but not in a place where they’ll cause issues).
And looking at your data, the images are possibly displaying the way they are because they’re lower-resolution images than the size allocated in the CSS file.