Trouble creating link in toml file via markdownify

support
1

Hi all. I am creating my first Hugo site using the Frances theme.

I’d like to make a modification to include an outbound link to an external website in the text within the dropdown section of each image. However, I am having trouble getting this link to work via markdown and markdownify, and I must have something wrong with how I have tried to set this up in the corresponding toml and html files.

I uploaded the code I’m working on to github here: https://github.com/naterattner/hugo-frances-test

I believe the files I need to work in are the artworks.toml file and the index.html file that is found via Hugo > portfolio-hugo > themes > frances > layouts.

In that index file, I tried to add markdownify for some of the elements in the artwork file as follows:

{{ define "main" }}
<p style="text-align:left; margin-left:17px">Data, graphics, and journalism <br /> <a href="https://twitter.com/naterattner" target="_blank">@naterattner</a></p>
	<ul id="og-grid" class="og-grid">
		{{ range $.Site.Data.artworks.artworks }}
			<li>
				<a 
					href="" 
					data-largesrc="{{ .image }}" 
					data-title="{{ .title }}" 
					data-mediums="{{ .mediums | markdownify}}"
					data-dimensions="{{ .dimensions | markdownify}}"
					data-description="{{ .description | markdownify}}">
					<img class="d-none d-sm-block" src="{{ .thumb }}" alt="{{ .alt }}">
					<img class="d-block d-sm-none" src="{{ .image }}" alt="{{ .alt }}">
					{{ .title | markdownify }}
				</a>
			</li>
		{{ end }}
	</ul>
{{ end }}

I then tried to add a markdown link for the final artwork like so:

[[artworks]]
alt = "Test Alt"
description = "**c. 1928**"
dimensions = "**39cm x 46cm** [test link](https://www.google.com)"
image = "img/keyboard_imports_full.png"
mediums = "Watercolour [test link](https://www.google.com)"
thumb = "img/keyboard_imports_thumb.png"
title = "Keyboard imports"
href="https://google.com"

However, this just displays the “test link” text in the dropdown without any external link.

Any assistance is much appreciated. Thanks in advance.

2

First, I cloned your repo and ran hugo server -DEF:

Building sites … WARN 2020/05/27 13:43:25 found no layout file for "HTML" for kind "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/05/27 13:43:25 found no layout file for "HTML" for kind "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/05/27 13:43:25 found no layout file for "HTML" for kind "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/05/27 13:43:25 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/05/27 13:43:25 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

Second, the file structure of your site is wrong. There’s no content, missing layouts, etc.

.
├── archetypes
│   └── default.md
├── config.toml
└── themes
    └── frances
        ├── archetypes
        │   └── default.md
        ├── content
        │   ├── about
        │   │   └── _index.md
        │   ├── contact
        │   │   └── _index.md
        │   └── posts
        │       └── test-post.md
        ├── exampleSite
        │   └── config.toml
        ├── images
        │   ├── screenshot.png
        │   ├── tn-expanded.png
        │   └── tn.png
        ├── layouts
        │   ├── contact
        │   │   └── list.html
        │   └── index.html
        ├── LICENSE
        └── README.md

Third, it looks like you’ve deleted some important files. Here’s what the file structure should be for a virgin installation of the frances theme:

frances-original
        ├── archetypes
        │   └── default.md
        ├── content
        │   ├── about
        │   │   └── _index.md
        │   ├── contact
        │   │   └── _index.md
        │   └── posts
        │       └── test-post.md
        ├── data
        │   └── artworks.toml
        ├── exampleSite
        │   └── config.toml
        ├── images
        │   ├── screenshot.png
        │   ├── tn-expanded.png
        │   └── tn.png
        ├── layouts
        │   ├── 404.html
        │   ├── about
        │   │   └── list.html
        │   ├── contact
        │   │   └── list.html
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── list.html
        │   │   └── single.html
        │   ├── index.html
        │   └── partials
        │       ├── footer.html
        │       ├── header.html
        │       └── head.html
        ├── LICENSE
        ├── README.md
        ├── static
        │   ├── css
        │   │   ├── component.css
        │   │   └── main.css
        │   ├── img
        │   │   ├── 1.png
        │   │   ├── 1-thumb.png
        │   │   ├── 2.png
        │   │   ├── 2-thumb.png
        │   │   ├── 3.png
        │   │   ├── 3-thumb.png
        │   │   ├── 4.png
        │   │   ├── 4-thumb.png
        │   │   ├── 5.png
        │   │   ├── 5-thumb.png
        │   │   ├── 6.png
        │   │   └── 6-thumb.png
        │   └── js
        │       ├── debouncedresize.js
        │       ├── grid.js
        │       └── modernizr.custom.js
        └── theme.toml

I’m not sure how you got here, but I suggest you start over. A good place to start is with Mike Dane’s tutorials.