Newbie question on customizing section pages

serpilb · April 10, 2017, 9:09pm

I have the following list.html under layouts/_default which gives me a nice image and title:

{{ partial “jumbotron” (dict “imageUrl” “/img/blog-index.jpg” “title” “Title”) }}

The problem is, all sections have the same image and title! I want to change this to section specific ones.

I tried adding section specific image and title in the layouts//single.html file:

{{ partial “head” . }}
{{ partial “nav” . }}
{{ partial “jumbotron” (dict “imageUrl” “/img/blog-index.jpg” “title” “Section Title”) }}

Read in {{ .ReadingTime }} minutes

But this does not work (well it only works if I click on one of the content files in this section, not on the list view).

Any pointers?

Thanks,
Serpil

rdwatters · April 10, 2017, 10:18pm

This is a little tough to read since you’re not not using code blocks, so the first matter of business is introducing you to Markdown code block syntax. If you want to write code in the forums, open the code block with triple back ticks (`) and close the code block with triple back ticks (`).

If you want to grab a .Title value for a section list page, you can do this easily by creating an “index” file in the respective section. For example, if you have a section called “posts,” create the following content file:

content/posts/_index.md

Then inside this file you can add front matter and content the way you normally would…

---
title: My Posts Section
date: 2017-04-10
---

Then in layouts/_default/list.html:

{{.Title}}
= > "My Posts Section" at yoursite.com/posts

Also, I’m not sure why you are using dict here if you keep passing the same values for every instance…

serpilb · April 10, 2017, 10:47pm

Sorry about not using the code blocks and thanks so much for your response! I am trying to customize an existing template, so not sure why {{ partial "jumbotron" (dict "imageUrl" "/img/blog-index.jpg" "title" "Title") }} is the way it is but here is the code block:

  <div class="mw7 center ph3">
    <div class="db mb3">
      <div class="mw7 relative bg-fix-primary mb3">
        <h1 class="f2 f1-l b di lh-title mb3 white mw6 bg-primary">
          {{.title}}
        </h1>
      </div>
      <div class="mw7 relative bg-fix-primary">
        {{ if .subtitle }}
        <p class="b f4 di lh-title mb3 white mw6 bg-primary">
          {{.subtitle}}
        </p>
        {{ end }}
      </div>
    </div>
  </div>
</div>

It adds an image that is centered the way I want it to plus a title on it. The problem is I want the title value to be copied from the sections.

serpilb · April 10, 2017, 10:51pm

Sorry, left out the top line. Here is the full code block:

<div class="pv5 pv6-l ph3 bg-center cover" style="background-image: url('{{.imageUrl}}')">
  <div class="mw7 center ph3">
    <div class="db mb3">
      <div class="mw7 relative bg-fix-primary mb3">
        <h1 class="f2 f1-l b di lh-title mb3 white mw6 bg-primary">
          {{.title}}
        </h1>
      </div>
      <div class="mw7 relative bg-fix-primary">
        {{ if .subtitle }}
        <p class="b f4 di lh-title mb3 white mw6 bg-primary">
          {{.subtitle}}
        </p>
        {{ end }}
      </div>
    </div>
  </div>
</div>

Made some progress by using a portion of the code in partial in my list.html file instead of using the whole partial which I did not write:

{{ partial "head" . }}
{{ partial "nav" . }}

<div class="pv5 pv6-l ph3 bg-center cover" style="background-image: url(/img/IMG_2531.jpg)">
    <div class="mw7 center ph3">
        <div class="db mb3">
            <div class="mw7 relative bg-fix-primary mb3">
                <h1 class="f2 f1-l b di lh-title mb3 white mw6 bg-primary">
                    {{.Title}}
                </h1>
            </div>
        </div>
    </div>
</div>


<div class="mw7 center">
  <ul class="flex-ns flex-wrap mhn1-ns pa3">
      {{ range .Data.Pages }}
      <div class="w-50-ns ph1-ns flex">
          {{ .Render "li"}}
          </div>
      {{ end }}
  </ul>
</div>

{{ partial "footer" . }}

It all looks good except the section titles are plural, i.e. instead of “Explore” it produces “Explores” as the title, instead of “Deploy”, it shows “Deploys”. I have no idea how this could happen. It doesn’t seem like a styling issue.

rdwatters · April 11, 2017, 3:38am

Make sure you have the following in your site’s config.toml:

pluralizelisttitles = false

You can also set the title to whatever you want by including an _index.md in the appropriate section. Then you can set an image and a title in the front matter. For example, the content file at content/deploy/_index.md:

---
title: My Longer Deploy Title
image: deploy-image.jpg
---

Then in the above partial, modify style="background-image: url(/img/IMG_2531.jpg)" to style="background-image: url(/img/{{.Params.image}})" so that you can set different images for each section…

serpilb · April 11, 2017, 4:47am

That was it.

pluralizelisttitles = false

Fixed the plurization problem, thank you!

I added the _index.md file you suggested but I don’t see the title and image being picked up from there.

SERPIL-M-P18V:content serpil$ tree
.
├── aboutus.md
├── contact.md
├── deploy
│   ├── GETTING_STARTED.md
│   └── _index.md
├── develop
│   ├── BUILD.md
│   ├── CONSUMER_DEVELOPER_INTEGRATION.md
│   ├── REQUESTS.md
│   └── REQUIREMENTS.md
├── explore
│   └── EXAMPLES.md
└── post
    └── beginners_guide.md

4 directories, 10 files
SERPIL-M-P18V:content serpil$ cat deploy/_index.md
---
title: My Longer Deploy Title
image: IMG_7179.jpg
---

list.html:

{{ partial "head" . }}
{{ partial "nav" . }}
<!--<div class="pv5 pv6-l ph3 bg-center cover" style="background-image: url(/img/IMG_2531.jpg)">-->
<div class="pv5 pv6-l ph3 bg-center cover" style="background-image: url(/img/{{.Params.image}})">
    <div class="mw7 center ph3">
        <div class="db mb3">
            <div class="mw7 relative bg-fix-primary mb3">
                <h1 class="f2 f1-l b di lh-title mb3 white mw6 bg-primary">
                    {{.Title}}
                </h1>
            </div>
        </div>
    </div>
</div>


<div class="mw7 center">
  <ul class="flex-ns flex-wrap mhn1-ns pa3">
      {{ range .Data.Pages }}
      <div class="w-50-ns ph1-ns flex">
          {{ .Render "li"}}
          </div>
      {{ end }}
  </ul>
</div>

{{ partial "footer" . }}

rdwatters · April 11, 2017, 5:20am

Hmmm…can you check your console and make sure that Go templates did not scrub out the image as “unsafe.” If it’s not showing up, you can use the following instead:

<div class="pv5 pv6-l ph3 bg-center cover" style="background-image: url(/img/{{.Params.image | safeCSS}})">

I’m assuming you’re keeping this image in the static/img directory?

As far as the {{.Title}} value, it will pull it first from a section’s respective _index.md title field and then default to the section name if there is no _index.md for a section. So, for example, your example and develop directories don’t have _index.md in them and are therefore going to fall back to “Example” and “Develop,” respectively.

Are you not seeing “My Longer Deploy Title” when you go to http://localhost:1313/deploy/ ?

serpilb · April 11, 2017, 1:30pm

Yes, all my images are in static/img directory.

I do not see “My Longer Deploy Title” when I go to http://localhost:1313/deploy. Instead I see the default section name and _index.md file looks like another content in that section.

Thanks so much for helping me this through!

rdwatters · April 11, 2017, 1:42pm

Huh. And you are including the underscore in _index.md, correct?

Do you have a repo you can point me to so that I can take a look at source please?

serpilb · April 11, 2017, 1:45pm

Yes, the I included underscore in _index.md. I just pushed the code to : https://github.com/OpenBMP/openbmp-www/tree/master/site
Let me know if you have any issues accessing it. Thanks!

rdwatters · April 11, 2017, 2:27pm

Thanks for pushing this to GH. So I’m getting the expected behavior. Looks like you are using Netlify’s “Victor Hugo.” Can you tell me a bit more about, e.g., the machine you’re using, OS, Hugo version, etc, please?

And just to clarify, you are running the Victor Hugo Browsersyn server by running npm start and not hugo server, correct?

[[EDIT: This is a more updated screenshot of what I’m seeing]]

serpilb · April 11, 2017, 2:36pm

I am using my laptop running MacOS Sierra (10.12.4) and I start hugo using hugo server:

SERPIL-M-P18V:site serpil$ hugo -v server
INFO: 2017/04/11 07:33:13 hugo.go:405: Using config file: /Users/serpil/Documents/workspace/ws-openbmp/openbmp-www/site/config.toml
WARN: 2017/04/11 07:33:13 hugo.go:489: No theme set
INFO: 2017/04/11 07:33:13 hugo.go:513: /Users/serpil/Documents/workspace/ws-openbmp/openbmp-www/site/static/ is the only static directory available to sync from
INFO: 2017/04/11 07:33:13 hugo.go:551: syncing static files to /
Started building sites ...
WARN: 2017/04/11 07:33:13 template_i18n.go:61: No translation bundle found for default language "en"
INFO: 2017/04/11 07:33:13 site.go:1489: found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
WARN: 2017/04/11 07:33:13 template_i18n.go:44: Translation func for language en not found, use default.
WARN: 2017/04/11 07:33:13 template_i18n.go:44: Translation func for language en not found, use default.
WARN: 2017/04/11 07:33:13 template_i18n.go:44: Translation func for language en not found, use default.
WARN: 2017/04/11 07:33:13 site.go:2404: Unable to locate layout for 404 page: [404.html]
WARN: 2017/04/11 07:33:13 site.go:2373: "404.html" is rendered empty
Built site for language en:
0 draft content
0 future content
0 expired content
10 pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
total in 17 ms
WARN: 2017/04/11 07:33:13 hugo.go:573: Skip I18nDir: lstat /Users/serpil/Documents/workspace/ws-openbmp/openbmp-www/site/i18n: no such file or directory
Watching for changes in /Users/serpil/Documents/workspace/ws-openbmp/openbmp-www/site/{data,content,layouts,static}
WARN: 2017/04/11 07:33:13 hugo.go:573: Skip I18nDir: lstat /Users/serpil/Documents/workspace/ws-openbmp/openbmp-www/site/i18n: no such file or directory
Serving pages from memory
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Hugo version:

Hugo Static Site Generator v0.17 BuildDate: 2016-10-07T07:42:05-07:00

I’ll try npm start as soon as I get to work in an hour or so.

rdwatters · April 11, 2017, 4:32pm

@serpilb

I created a PR to save you some time:

serpilb · April 11, 2017, 8:09pm

@rdwatters, thanks for all the pointers. I finally managed to do npm install and start. However, I still don’t see the longer title. I wish I merged your PR first thing in the morning but now I committed some changes (to fix an issue with victor hugo) so not sure if I should merge your changes. I did clone https://github.com/rdwatters/openbmp-www.git to see if it would work but no luck. Any more ideas? Thanks!
It just occurred to me that the problem might be related to my path settings. I am using IntelliJ as my IDE and I see some cannot resolve file under this line you added in list.html

<div class="pv5 pv6-l ph3 bg-center cover" style="background-image: url(/img/{{.Params.image | default "IMG_2531.jpg"}})">

rdwatters · April 12, 2017, 12:27am

Did you npm install in here as well? Take a look at the PR and the changes I made and you’ll see what you need to do in your own templating…

As far as the IDE, I’m deferring to you, haha. I’m a text editor guy LMK if you run into another snag!

serpilb · April 23, 2017, 4:25am

@rdwatters thanks for all your help. The solution you recommended works. I was using an older version of hugo. After upgrading to latest build, I see section specific titles and images using the front matter in _index.md.

Topic		Replies	Views
Setting custom meta desc and title for a section support	8	3892	December 2, 2016
Questions about list layout support	4	467	August 19, 2019
Page variables in list template via _index.md support	5	1704	January 17, 2017
Customize a part of list.html for a specific content type? support	1	589	November 14, 2019
Different summary pages support	5	472	January 5, 2019

Newbie question on customizing section pages

{{.Title}}

Related topics