Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added ability to reference global resources #84

Merged
merged 8 commits into from
Aug 14, 2024
Merged

Conversation

rpapallas
Copy link
Contributor

When a user needs to embed images across different pages, having duplicate images locally in each page's images directory is redundant. I wanted to add a gallery of the same images across different pages/sections of the website. I couldn't find a neat way to do this currently. It appears that the shortcode would only look locally in each page's resources.

I added an extra option, globalMatch, that will look for images under the /assets directory instead, leveraging the global resources utility from Hugo. This to work, a user will need to place those “repeating” images under /assets (images could exist under a subdirectory under assets).

Example

.
├── archetypes
├── assets
│   ├── css
│   └── images
│       └── something
│           ├── test1.png
│           ├── test1.png.meta
├── config.toml
├── content
│   ├── gallery
│   │   └── index.md
│   ├── news
│   │   ├── something
│   │   │   └── index.md
├── static
└── themes

content/gallery/index.md:

{{<gallery
        globalMatch="images/something/*"
        sortOrder="asec"
        rowHeight="150"
        margins="5"
        thumbnailResizeOptions="600x600 q90 Lanczos"
        showExif=true
        previewType="blur"
        embedPreview=true
        loadJQuery=true
>}}

content/news/something/index.md:

{{<gallery
        globalMatch="images/something/*"
        sortOrder="asec"
        rowHeight="150"
        margins="5"
        thumbnailResizeOptions="600x600 q90 Lanczos"
        showExif=true
        previewType="blur"
        embedPreview=true
        loadJQuery=true
>}}

Both pages would now embed the same images, yet those images exist only once on the server.

I hope this is useful to others.

Rafael

@mfg92 mfg92 self-assigned this Aug 6, 2024
@mfg92 mfg92 added the enhancement New feature or request label Aug 6, 2024
@mfg92
Copy link
Owner

mfg92 commented Aug 6, 2024

This looks like a promising feature to me. I will have a closer look at it and test it in the next few days.

In the meantime, it seems to me that the indentation here is a bit broken:
grafik

@rpapallas
Copy link
Contributor Author

That's possibly because the file uses tabs for indentation and my editor uses spaces. Would you like to keep the tabs? If you don't mind using spaces, I can convert the entire file to spaces (usually more robust and avoids such issues).

@mfg92
Copy link
Owner

mfg92 commented Aug 11, 2024

Thanks for the offer, but I prefer to stay with tabs. Not that I care that much, but changing every line would disrupt the git history/blame feature.

@mfg92
Copy link
Owner

mfg92 commented Aug 11, 2024

I have now tested it and it works fine. But there is one problem: If both parameters, match and globalMatch, are present, the images that belong to the match parameter are displayed, hover, the metadata is missing because of line 106-108.

Could you rebase your commit, use tabs as intention and fix this? Then I would be happy to merge this PR.

@rpapallas
Copy link
Contributor Author

@mfg92 I think I have fixed the bug. I think I have also fixed the indentation issue. Finally, I added some details about this new option in the README.

Copy link
Owner

@mfg92 mfg92 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the fix and the README update. I do have some feedback for you though.

README.md Show resolved Hide resolved

{{/* Get metadata from sidecar file, if present. Else an empty dictionary is used. */}}

{{/* Get metadata from sidecar file, if present. Else an empty dictionary is used. */}}
{{ $metaFileName := print $original.Name ".meta"}}
{{ $metadata := $currentPage.Page.Resources.GetMatch ($metaFileName) }}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If $globalMatch is present, this line does unnecessary work. I think the solution is an if ... else ...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for raising this. I used to have it with if and else, but for some reason I couldn't get it to work. Let me have another look.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mfg92 This is now fixed.

@mfg92 mfg92 merged commit 70a0ac5 into mfg92:master Aug 14, 2024
mfg92 added a commit that referenced this pull request Aug 14, 2024
* Added ability to reference "global" resources
* Updated README to include info about the globalMatch.

---------

Co-authored-by: mfg92 <[email protected]>
@mfg92
Copy link
Owner

mfg92 commented Aug 14, 2024

This is now part of of v1.3.0. Thanks a lot for your contribution.

@rpapallas
Copy link
Contributor Author

No problem; thank you very much for maintaining a useful shortcode.

alexvanderberkel pushed a commit to alexvanderberkel/hugo-shortcode-gallery that referenced this pull request Aug 22, 2024
* Added ability to reference "global" resources
* Updated README to include info about the globalMatch.

---------

Co-authored-by: mfg92 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants