kc0bfv / autophugo Goto Github PK

BTW it seems that autophugo does not fit portrait photos in general for now.

Hi Karl,

Many thanks for this incredible theme. I have been building up my own photo gallery based on it recently and it turned out to be great.

While, I am just wondering is it possible to change the photo switching order to left-to-right with cross-flexcol fashion when clicking the next/previous arrow button? Right now, the order of the photo appears when clicking next button is going through the left flexcol from top to bottom then switching to the right flexcol and going through it next. Since photos are added from left to right crossing flexcol, so I believe it would be better if the next/previous order could also obey the same rule.

Thank you and take care,
J.

Perhaps I haved missed something ... but this works:

title: "Einrichtung"
date: 2021-02-19T13:18:45+01:00
albumthumb: "interiors/minh-pham-OtXADkUh3-I-unsplash.jpg"
resources:
- src: interiors/alex-quezada-i3EBALw_t9o-unsplash.jpg
- src: interiors/gaelle-marcel-DFt3T5r_4FE-unsplash.jpg
- src: interiors/kari-shea-tOVmshavtoo-unsplash.jpg
  phototitle: Grass cat
  description: This cat stalks through the grass
- src: interiors/minh-pham-OtXADkUh3-I-unsplash.jpg
- src: interiors/oriento-xXNcpfbHeKM-unsplash.jpg
- src: interiors/r-architecture-W6YhRmR8nuA-unsplash.jpg
  phototitle: Cool cat
  description: One of the coolest cats
---

... and this doesn't work (directory start with uppercase letter; phototitle and description not shown):

title: "Nature"
date: 2021-02-19T13:34:21+01:00
albumthumb: "Nature/frederik-lower-tatFzQW0a3s-unsplash.jpg"
resources:
- src: Nature/frederik-lower-tatFzQW0a3s-unsplash.jpg
  phototitle: Grass cat
  description: This cat stalks through the grass
- src: Nature/geran-de-klerk-wYy3rvvgjAU-unsplash.jpg
  phototitle: Grass cat
  description: This cat stalks through the grass
---

Any idea? Is this a feature, bug or a misusing?

Adding in taxonomy support - so you can tag subalbums and images, for instance, and all tags will show up together on a tags page. Surprisingly, I think this is going to work pretty well - the major problem here was that images are not present to Hugo and the taxonomy system like pages and frontmatter are... So - this is a hack - as is the rest of the theme.

I am getting used to using this theme with HUGO, and am more and more happy.

One issue mentioned in GitHub is how it is hard to identify albums and
sub-albums.

"On 23 Jan 2020 subalbum and noalbum support no longer requires specifying a type in the metadata. Furthermore, images and subalbums can be mixed within albums - including on the homepage (although mixing can be confusing for users)."

I have worked around it by creating images that are narratives and identifiers for
the sub-albums.

Please see:

http://swansongrp.com/P/food

I am continuing to update my website with autophugo work, rather than the many
other approaches taken over the years for photo display.

Keep up the good work!

Hi Karl,

great work - thank you. Is it possible to set more than two columns for the gallery?

I digged a little bit deeper into it and found a param called column_count. If I set it to any number it does not change the overall gallery experience. Could you give me a hint how I can change it?

Thanks,
Adrian

I’m using your beautiful theme but I don’t want my users to be able to download my pictures.
I disabled this feature using an ugly way by tweaking JS files.

May be adding a configuration toggle to disable it could be a good thing ?

Hello,

I'm in the process of migrating my WordPress photography site to Hugo using your beautiful theme. I would like to be able to add post types of blog (or posts, or whatever). I have created the existing blog posts in the root level content/posts directory. That directory also has its _index.md file. I have also added a posts.html file in the root layouts/posts directory, which is essentially a list.html file (but not the same as the theme list.html file).

As I understand Hugo's template lookup order, this should cause Hugo to use my posts.html file instead of the theme's list.html file. However, when I run hugo --verbose server I get an error:

INFO 2021/01/09 14:54:51 Using config file:
Start building sites …
INFO 2021/01/09 14:54:51 syncing static files to /
ERROR 2021/01/09 14:54:51 No thumbnail image found for: Blog
Built in 212 ms
Error: Error building site: logged 1 error(s)

"Blog" is the page title of the _index.md file in the content/posts directory. My posts.html template does not require any thumbnail image. That makes me think that it is using a template from the theme - even though the lookup order seems to indicate that it shouldn't be doing that.

Before I added the blog section, everything was working correctly.

Any help you can provide would be greatly appreciated! Thanks so much for your work on this theme!

I love this theme! I want to use it to display my NFT art, ideally with a link for each image that goes to the corresponding page on OpenSea when the image is clicked. Is this possible with the current theme?

While I quite like this template, I did encounter a few bugs. Instead of creating a new issue for every single one, I will just list them here (some might also just be user error tbh). Feel free to create separate issues for them, if so desired.

• Hugo throws the warning Module "autophugo" is not compatible with this Hugo version every time I build the site. I am using the latest autophugo version and the newest hugo version (0.57.2) available for Ubuntu. However, the built site looks as expected, so I cannot tell if this affects anything.
• Resizing and hugo serve: After changing the thumb-width or full-width in the config.yaml already resized pictures are not discarded and resized again to the new values. Workaround: Delete the folder resources, then all pictures are resized again.
• Resizing and hugo: Didn't work for me at all. Both thumbnail and full picture are created in the correct folder, however both are of the original size. Workaround: I manually resized them by using mogrify -resize 480 *480*.jpg && mogrify -resize 960 *960*.jpg.
• Yet another resize issue: The resized pictures still got 480 or 960 in their names, even if the thumb-width/full-width has been changed in the config.toml.
• When downloading a picture, the filename is the name as stored in the public folder. Could this file rather have the original name as in the asset folder?
• When using the site, the arrow keys move vertically (e.g. 1->3->5->2->4) through the pictures.
• The Installation part is missing in the Readme.
• I found the default width values of 480 and 960 too low for a normal 1080p display, I instead used 960 and 1920 respectively. That might just be a preference, but 480 looks too pixelated for me.

Still, this is my favorite gallery template, thank you for your good work! I appreciate any reply and would be glad to help if needed.

I've started to notice that when I make some changes to my tree of files that the changes appear immediately (while running "hugo server" btw). Other changes, particularly adding metadata to images (title, etc) do not appear unless I perform a complete rebuild of the tree. In order for the rebuild to work properly, I have discovered that I have to completely erase "resources" and "public" before running "hugo".

With the processing time needed for image handling, this become quite a long wait for a few changes. And, if I discover that I made a typo in one of the image titles, the whole process has to be repeated.

Is there any reasonable way to deal with these types of changes without a cleanup and full rebuild?

The detail image doesn't load on my mobile device. (Pixel 2, Chrome) On the chrome device simulator it works well. Any idea what could be the problem?

Hi!

I really love using your theme! It's great on desktop and smartphones/tablets.

But it seems that at least Google is having big problems indexing the pictures and their description.

It's only catching the albumthumb and not the rest of the pictures at the moment.

What would be the easiest way to improve this?

Thank you!

Hi,
I am wondering if a logo in the navbar is in the roadmap of this theme.

I think it can complete the intention of identifying the author, placing it close to the name in the bar.

I tried to insert it to show you (see bottom bar logo+name):

Is there a way to sorting images in an album? Like 10.jpeg > 09.jpeg > 08.jpeg ... ?

Ask this because I wish put the newest images first and I can't find how to do it.

Hi,
Clearly doing something wrong, but I've made an 'assets' folder with folders inside it with jpgs.

So my project folder is travel
travel/location/.jpgs
travel/location2/.jpgs
...

From terminal I run hugo new location/_index.md, I get a new _index.md file in travel/content/location, but it's just the top bits and no content, depsite the assets folder having images.

title: "Location"
date: 2022-02-28T17:23:13Z
draft: true

Any help is appreciated, this looks like an amazing platform to do what I'm hoping to do.

Thank you so much!!

Received notification from Netlify of mixed http and https content with the following:

 Insecure mixed content detected

Although you have enabled HTTPS on your site, we’ve detected some content that’s still being served over an HTTP connection. [Learn more about mixed content](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content).

In blog/page/1/index.html:

    Insecure link urls:
        http://www.scottthomasimages.com/blog/

The base URL in config.toml is set to https. I can not find any other place in the files for the site or the theme that makes reference to either http or https.

I see from the hugo docs site that some themes have had issues with this. Is it possible that there is something in this theme that is causing it?

Thanks!

Any advice on how to resolve the following issue? Is it a failed SHA-256 mismatch? The following is pasted log from Chrome inspection.

index.html:22 Failed to find a valid digest in the 'integrity' attribute for resource 'https://[...]/moby/css/custom.min.0a714016e6cd2c76e9fb635896a34e8376e360f2cab147593f0486dc95cd9d37.css' with computed SHA-256 integrity '2/3hYasl9XNsi9knnAEy/+EIvNgbxen9tJzZDvrjeRE='. The resource has been blocked.
index.html:1 Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

The ability to navigate by keyboard is poor, here. There needs to be some kind of indicator as the focus changes, "click"ing something should actually open the image, and more buttons need to have tabindex set. Additionally - the selection order is currently top-to-bottom first row, top-to-bottom second row.

I'm not sure all these problems will be solvable in an acceptable, standards-compliant, good looking way.

Based on this article they changed how the things works.

Workaround:

1. Register a formspree account and create a simple form
2. On the Integration form you'll find an endpoint (eg: https://formspree.io/f/myuniqueid)
3. Open the Hugo site config.toml file
4. Under the [params.footer.contact] section change the realEmail to formspreeID (just for clarify the purpose of the field...)
5. Set the formspreeID value to your Formspree endpoint id (eg.: myuniqueid)
6. Save config.toml
7. Open Hugo footer file under themes\autophugo\layouts\partials\footer.html
8. Change the line
   <form method="post" action="//formspree.io/{{ with .Site.Params.footer.contact.realEmail }}{{.}}{{ end }}" novalidate>
   to
   <form method="post" action="//formspree.io/f/{{ with .Site.Params.footer.contact.formspreeID }}{{.}}{{ end }}" novalidate>

How to NOT use "full_width"? I want to share the original picture with my friends when I show the big picture.

🥲Even if you click the download button, it is the resized picture.

So - the columns get built as flexbox columns right now. The layout gets decided in advance - with images placed in a left-to-right top-to-bottom order. That means - whatever order your images fall in they'll get placed left-to-right, top-to-bottom in the output. More or less what people expect chronological-order-wise.

The problem with this layout scheme is that the columns are all decided in advance. If you have a wider screen there's not a great way to reflow to more columns. Or if you have a shorter screen there's not a good way to reflow to fewer columns.

The solution to that variable-column size is maybe the CSS multi-column layout format. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns It's even well-supported. The biggest problem I see with that is that there won't be a good way to preserve that left-to-right top-to-bottom chronological ordering. It'll be top-bottom first then left-right... Tab order will not be easily decidable (maybe JS could fix this but that seems silly given the non-chronological ordering anyway). Gallery order will be top-bottom then left-right...

Does that ordering matter to YOU? Or does having a variable number of columns based on screen width seem more important to YOU? I don't think it makes sense to support both in the theme.

CHOICE:

1. Current left->right then top->bottom photo ordering. Constant number of columns.
2. Variable number of columns based on screen width, but top->bottom photo ordering then left->right.

This CSS (gradient) puts gray fog on each thumb picture:

#main .thumb:after {
    background-image: -moz-linear-gradient(to top, rgba(10, 17, 25, 0.35) 5%, rgba(10, 17, 25, 0) 35%);
    background-image: -webkit-linear-gradient(to top, rgba(10, 17, 25, 0.35) 5%, rgba(10, 17, 25, 0) 35%);
    background-image: -ms-linear-gradient(to top, rgba(10, 17, 25, 0.35) 5%, rgba(10, 17, 25, 0) 35%);
    background-image: linear-gradient(to top, rgba(10, 17, 25, 0.35) 5%, rgba(10, 17, 25, 0) 35%);
    -moz-pointer-events: none;
    -webkit-pointer-events: none;
    ...

Maybe a feature for a very special purpose but for general usage it decreases the image quality significant. I recommend to remove it.

#main .thumb:after {
/*
    background-image: -moz-linear-gradient(to top, rgba(10, 17, 25, 0.35) 5%, rgba(10, 17, 25, 0) 35%);
    background-image: -webkit-linear-gradient(to top, rgba(10, 17, 25, 0.35) 5%, rgba(10, 17, 25, 0) 35%);
    background-image: -ms-linear-gradient(to top, rgba(10, 17, 25, 0.35) 5%, rgba(10, 17, 25, 0) 35%);
    background-image: linear-gradient(to top, rgba(10, 17, 25, 0.35) 5%, rgba(10, 17, 25, 0) 35%);
*/
    -moz-pointer-events: none;
    -webkit-pointer-events: none;
    ...

It could be nice to update the URL when displaying images in the popup. This can be a great way to share direct link to an image in an album :-)

Hello and thank you for your work on this project. I am an amateur photographer looking to use Autophugo & Hugo to set up a small gallery page. While the automatic resizing for thumbnails is a huge help, I already export my full sized images from Lightroom in the dimensions and resolution I want, so no further processing is necessary. I'd rather just show them exactly as I exported them.

I'm working around this now by setting the resize method to "Fit" and setting a very large size, but it would be easier for me to just skip the resize step entirely for my final images.

Thank you!

Only being able to specify a fixed width means vertical images end up disproportionately tall compared to their horizontal counterparts in albums mixing both. AutoPhugo should instead use maximum resolution parameters to ensure coherence.

I've tried putting an MP4 and GIF into the assets directory. MP4 was ignored. Gif was rendered as a still frame.

Optimally, I'd love to have a solution where it can render a still frame or image in the gallery and then once opened, would embed an mp4 video in the box.

Where does this fall on the scale from should already work to completely impossible?

Also, if the popup contains a description it will be placed below the page threshold where it is hard to discover.

Just wanted to say that the IPA in the Readme is so cool

I have something like this ('content/nature/_index.md'):

---
title: "Natur"
date: 2021-02-19T13:34:21+01:00
albumthumb: "Nature/frederik-lower-tatFzQW0a3s-unsplash.jpg"
resources:
- src: Nature/frederik-lower-tatFzQW0a3s-unsplash.jpg
  phototitle: Grass cat
  description: This cat stalks through the grass
- src: Nature/geran-de-klerk-wYy3rvvgjAU-unsplash.jpg
  phototitle: Grass cat
  description: This cat stalks through the grass
---

If I add further pictures to 'assets/nature/' ... how to refresh _index.md (without loosing the manually added phototitles and descriptions)?

Hi

Sorry I have another question, I was wondering is it possible to create an additional page as you have "About" but without contact form, etc just a page that you could add some text such as Camera equipment I use etc, and either to open as halfway as about section or to open in a new page.

I dunno if you think it's a good idea.

Thanks

lp

Hi,

Thanks for the theme it's great, I was wondering if it's possible to have one level albums support?

basically, I would like to have an image showing on the main page and when you click on it will zoom in?

Thanks

I love the way the thumbnails appear on my computer screen. When I view a single image, I can click to the left or right and get the next or previous in the series. They appear nicely on the browser screen. I have not had any navigation or appearance problems with my Autophugo website on the computer monitor.

However, when I view the thumbs and images on my phone screen (several models tried), there are some nagging issues. (One of the reasons I picked Autophugo was that the code appears to be adaptive to various devices, something Google Search likes very much.)

1. When there are multiple rows of images, and I'm viewing a single image, there is a problem when I press the image to see the "next" image. The screen scrolls so that the new image in the series is off-screen. I have to manually scroll to find the image, and often the screen is just black (not helpful). [Just a note that there does not appear to be a "previous" choice on the phone.]

2. When I rotate the phone to horizontal (landscape) the full picture images actually shrink and are smaller (!) than when viewing them in vertical (portrait).

If you want, I can provide some "screenshots" of these behaviors.

I left a comment on commit 9de0a45 but now I'm not sure if you get notified on this...

I think you introduced a small bug when you added the image_number back. You are using .index, which is set by the caller list.html. However, in that file index is set while resources are still in alphanumerical order, BEFORE they are resorted by weight.

As a result the overview shows images correctly sorted by weight, but the full view uses a different order.

Now, I'm not going to ask you to plumb the depths of the deep, dark, Google search system. However, I try to nudge it to process my web pages, in hopes of getting search engine action.

Recently, I received warnings from Google Search Console, indicating that my new autophugo main pages (index.html) could not be indexed by the search engine, claiming that there is a redirect error (loop? bad redirect?) in them.

Checking the generated "index.html", I cannot find any redirect code in the file. Does Autophugo create built-in redirect (meta) tags, or any other explicit redirects in its generated HTML?

Is it possible to add a parameter to set column_count by device (ie mobile) or screen size to have the site be more responsive?

When sending a link via social media the preview contains the album title but not the thumb.

I believe, this is because you are using two internal templates which seem to look for a front matter variable called images (takes a list.) However, you have named the variable albumthumb, taking a single value, so the og and twitter templates don't find the info.

# from layouts/partials/head.html:
{{- template "_internal/opengraph.html" . }}
{{- template "_internal/twitter_cards.html" . }}

I see two possible solutions:

1. Add an images field to the front matter. It will dublicate the information already specified in albumthumb.
2. Let the internal templates do what they can and manually add additional fields for og:image and twitter:image to the head section based on the value of albumthumb.

Personally, I am leaning towards the second option but the outcome would be the same.