No images or video (as in demo site) - except avatar image and rollover image

[darrenaddy]

Firstly, thank you for this wonderful theme. I love all of the example content that comes with it. I'm relatively new to Hugo (couple of months) and have experimented with a number of different themes to see how different people do things. THIS is the one I plan to deploy as my actual blog.

EDIT: MOST OF MY ISSUES BELOW WERE DUE TO NOT READING THE INSTRUCTIONS. I did not first delete the default archetype and shortened the name of the theme folder (which is says breaks things). However, a weirdness or two still remain that I need to resolve posts below this one.

---

I realize that you JUST updated to v3.0.0 so perhaps this is a bug in the new version?

Now to the issue:
I downloaded the CODE from GitHub, unzipped it, and put it in the themes folder of my local machine.
Copied everything in the exampleSite folder to the project site root folder (overwriting everything).
Then I made a few edits to the config.toml in the site root folder and started the server with
hugo server -D --verbose

The site is being served, as expected, on the localhost port. But my home page (source) does not have <img src HTML tags, so no images are showing. Similarly, the images or video are not showing on the single post pages.

TL;DR: I think the .Type is not getting passed to the partials/article-wrapper.html and when I look in the front matter, it appears that the line that should have "type:" is missing.

For example the front matter on the "My Trip To Scotland" index.md looks like this:
`---
title: "My Trip to Scotland"
date: 2021-11-01T18:01:26+01:00

categories: ['Travelling', 'Holidays']
tags: ['Scotland', 'Glennfinnan Viaduct', 'Eilean Donan Castle']
author: "Lednerb"
---`

Your demo site source code (viewed from the browser) for the Trip to Scotland post, for example, looks like this:

`

        <a class="bubble" href="https://lednerb.github.io/bilberry-hugo-theme/gallery/my-trip-to-scotland/">	
<i class="fas fa-fw fa-camera"></i>	

    <div class="flexslider">	
        <ul class="slides">	
            	
                	
                    <li><img src="/bilberry-hugo-theme/gallery/my-trip-to-scotland/scotland1_hu92019f4794a0544a3ad4410e554ad3af_67831_700x350_fill_q95_box_smart1.jpg" /></li>	
                	
                    <li><img src="/bilberry-hugo-theme/gallery/my-trip-to-scotland/scotland2_hud2b2cd68da7f6388575395354a188425_35351_700x350_fill_q95_box_smart1.jpg" /></li>	
                	
                    <li><img src="/bilberry-hugo-theme/gallery/my-trip-to-scotland/scotland3_hu85c54f52b5fe4dbca0189cd47269771e_50040_700x350_fill_q95_box_smart1.jpg" /></li>	
                	
                    <li><img src="/bilberry-hugo-theme/gallery/my-trip-to-scotland/scotland4_hu1c4902c66176c948fd8516244d69cc1e_56034_700x350_fill_q95_box_smart1.jpg" /></li>	
                	
                    <li><img src="/bilberry-hugo-theme/gallery/my-trip-to-scotland/scotland5_hu5ddc646a14d071d83d62e36cc9a8eba6_46028_700x350_fill_q95_box_smart1.jpg" /></li>	
                	
            	
        </ul>	
    </div>

` Whereas mine looks like this:

`

        <a class="bubble" href="http://localhost:52079/gallery/my-trip-to-scotland/">
<i class="fas fa-fw fa-pencil-alt"></i>

`

Similarly, on the video post, your demo site code looks like this:
`

        <a class="bubble" href="https://lednerb.github.io/bilberry-hugo-theme/video/kilez-more-leben-und-tod-des-imperialismus/">	
<i class="fas fa-fw fa-video"></i>	

<div class="responsive-video youtube">	
    <iframe class="no-js-hidden" src="https://www.youtube-nocookie.com/embed/M7IjJiZUutk?rel=0" frameborder="0" allowfullscreen></iframe>	
    <div class="no-js-message">	
        The YouTube player can not be loaded with disabled JavaScript. <br>	
        The following video is embedded here: <br>	
        <a href="https://youtube.com/watch?v=M7IjJiZUutk" target="_blank">	
            https://youtube.com/watch?v=M7IjJiZUutk	
        </a>	
    </div>	
</div>	
	
	
	
	
	
	
<div class="content">`

Whereas mine looks like this:
`

<div class="content">`

Similarly, my music post is blank. Where yours begins with:
<article class="audio">

Mine begins with
<article class="default article">

In fact, all of my articles begin with class="default article" where yours are class=video or class=music or class=audio (for example).

Again, where your DuckDuckGo post is a class="link"
mine is a class="default article"
and
where your Snowden post is class="quote"
mine is again class="default article".

I'm going to try putting a type in the front matter to see if I'm right about the class part. But I'm not sure where you call the missing images or video from. Is that in the front matter of each post also?

Thanks for your help on this!

[igor-baiborodine]

@darrenaddy, Is it possible to publish your test website as a repository in your GitHub account? Then it will be easier for me to debug it in my local dev.

[darrenaddy]

Thank you for the prompt reply. I'm new to GitHub, but believe I've figured out how to publish my hugo-site/public contents to Github Pages. You may see the blog at: https://darrenaddy.github.io/darrenaddy/

I believe I RESOLVED the ORIGINALLY reported problems by reading the documentation on the theme page. I had neglected to delete the archetypes/default.md and I had shortened the theme name to hugo-bilberry. Once I corrected those things, republished and recommitted/pushed - things look as they should on the original theme pages (I believe).

One remaining issue (probably something that I am doing wrong?) I thought that I did my video post exactly the same way that the sample was done, but on mine the video space is a square and there is a bunch of extra space under the video.

Also, I added an avatar image for the header & it is in the correct folder https://darren addy.github.io/darrenaddy/img/darrenaddy.png but it does not seem to load.

[igor-baiborodine]

I'm converting this issue into a discussion.

[darrenaddy]

It occurs to me that, rather than requiring the end user to delete the default.md from HugoProject/archetypes (which is sort of non-standard behavior, when copying over the contents of the ExampleSite to HugoProject root) perhaps it would be better to have an "archetypes" folder in the Bilberry ExampleSite that contains YOUR default.md archetype?
Then you could eliminate that part of the installation instructions (for those of us too lazy or stupid to read them carefully first). LOL.

Getting back to looking at the code differences between my video post and the one that comes in the ExampleSite to see if I can figure out what i'm doing wrong. I also plan to make a post of all of the other types to see see if I have the correct understanding of making those posts. Reading the docs, it seems like there are at least two ways to do a lot of things ( Internal Hugo YouTube shortcode vs YouTube in the front matter for instance). So perhaps I should also try both methods to see if one works better than the other (though I'm sure they SHOULD be equivalent).

[darrenaddy]

So my "avatar not loading from local /img/filename.png" issue was solved by using a Gravatar URL instead. Still not sure why a local image did not work there, however - as it WAS in the build and I COULD call it directly in the published site from it's /img location in the browser.

[darrenaddy]

Any idea why this would be showing up in my video post (html source)?
Using diffnow.com (feeding it URLs) I compared the theme's video post: https://lednerb.github.io/bilberry-hugo-theme/video/kilez-more-leben-und-tod-des-imperialismus/ with MY video post: https://darrenaddy.github.io/darrenaddy/video/the-low-darts/ and there was add'l code under the video (in mine).
In between line 183 and 184 of the source code of the kilez post, I had the following code inserted:
<div class="responsive-video local"> <video width="100%" controls poster=""> <source src="" type="video/mp4"> Your browser does not support the video tag. </video> </div>

Anyone have any idea why that was inserted? It is NOT a local video and the video tag is almost universally supported (according to caniuse.com). Same result running diffnow in Opera and Chrome. Same extra space (looks like another player interface) below the video in my post. Thanks for any thoughts you may have.

[darrenaddy]

OK. So I tracked down the inserted code to the end of the partial video-embed.html
So somehow it is answering "true" to TWO if statements and Hugo is thinking that the .type is mp4 IN ADDITION to .type YouTube.
Somehow pasted CODE is not all being shown between the markdown code ticks, below.

{{ if eq .type "mp4" }} <div class="responsive-video local"> <video width="100%" controls poster="{{ .imageUrl }}"> <source src="{{ .url }}" type="video/mp4"> Your browser does not support the video tag. </video> </div> {{ end }}

[darrenaddy]

OK. I get it. Comparing the front matter of the two video posts makes it obvious to this Hugo newbie. If you are embedding a YouTube video then you DELETE the other (unneeded) video types' front matter. Going to try that and recommit/push now.

How long does it typically take for GitHub's cache to clear? After I push a new commit, doing a Force Reload of the page in the browser doesn't work for SOME amount of time.

EDIT: That did fix the problem of the extra "your browser does not support video tag" code. Still not sure why it answered "true" to that .mp4 {{ if }} statement (in the partial/embed-video.html), however.

[igor-baiborodine]

I checked the repository's content for this website, and to me, it looks like all your problems stem from the fact that you commit the content of the public folder produced when the hugo command is executed. It is unsuitable for Hugo-based websites since you should commit your only source code. I forked your repository, and soon I will submit a pull request to the main branch, which you should use to publish to GitHub Pages. Also, I will add a GitHub Actions workflow that allows automatic publishing on any commit to the main branch.

[darrenaddy]

Thank you, so much for the assistance.
a) I will have to Google what all of that stuff means, as I'm new to using Git and repositories. Or I may have thought that GitHub Pages was the same as Github?

In any event, I was following the instructions for publishing Hugo pages to Github and that is what they told me to do - 3 git commands executed from the /public/ directory:
git add --all
git commit -m "Xth commit."
git push origin master

If I were going to FTP my Hugo-generated static site to a traditional web host, I would upload all of the files in the /public/ folder, correct? That is working fine: http://antiqueauto.org/blog/

[igor-baiborodine]

Or I may have thought that GitHub Pages was the same as Github?

No, there are not the same. GitHub is to store your source code in Git repositories, and GitHub Pages is to host your website directly from a GitHub repository.

Back then, I wrote tutorials on how to start blogging with Hugo, GitHub, and Netlify:
https://www.kiroule.com/article/start-blogging-with-github-hugo-and-netlify/
https://www.kiroule.com/article/configure-custom-domain-and-https-in-netlify/

I understand that you are new to Git, GitHub, and all that stuff, but if you follow these tutorials to the letter, you will be able to create and publish your website on Netlify for free, including SSL certificates.