Yesterday, I saw references to using a partial to process content to edit the <img> to add a srcset version using Hugo’s regex engine - replaceRE.
Quite a cool idea, and I want to implement it - set and forget, and just use markdown normally.
However, after spending hours today trying to find those references again, I can’t!
I am using an image section folder, not page resources - if that matters.
Can anyone help me out or point me in the right direction?
Thank you.
What have you tried so far?
Hi @zwbetz.
Sorry for the delay, and I am out walking my dog.
Basically, not much - I am no coder.
I’ve used a partial to output content.
I am using a replace to manipulate the img element.
I am selecting originals from my images folder.
But I suck at regex and go, and these parts aren’t working together yet - plus more parts are needed.
I play at it when I have time.
I am sure some of the efforts here could do it in like 5 minutes - but that’s not me!
Back to beat my head against a wall with this - would love any assistance from any of the big guns here.
The idea is that we use values in the [alt string] and/or [page params] and/or [site/tehme params] to determine responsive output - so people can control output at the individual image level, the page level and/or site level.
For the [alt string] values, we can use a # (or something) to slice(?) to get values with the first item being the actual alt text - subject to other thoughts.
I’ve created a test repo here for anyone to play with - although I am not good with git thingys so please tell me if you can’t access this.
The business end is layouts/partials/html/imageProcessing.html - it’s messy with comments.
Site params are in the test-theme’s config.yaml.
A test.html layout calls the image partal because I thought we could also come up with a system to conditionally chain different .content manipulations (e.g. image processing, removal of X, addition of Y etc).
As I am not a coder, I’m stuck on first step which is to perform logic on individual img references so that they are replaced by different things according to their values - in this case testing with a the alt string.
The following replaces both test images in content with the same value:
{{ $replacement := "" }}
{{ range $index, $value := findRE $imgMatch .Content }}
{{ $src := findRE $imgSrcMatch $value }}
{{ $alt := findRE $imgAltMatch $value }}
{{ if in $src "#leave"}}
{{ $replacement = (print "Replacement Two" ) }}
{{else}}
{{ $replacement = (print "Replacement One" ) }}
{{end}}
{{ end }}
{{ .Content | replaceRE $imgMatch $replacement }}
Where as what we want to go through content and for each image determine its replacement.
Can anyone help with this issue or the project generally?
NOTE: I think my image match will need updating to catch the situation where a title might be added.
I don’t have time to fully troubleshoot this, as I don’t quite understand what you’re trying to do.
One thing I did notice is that your page bundle at content\images\index.md is headless, so you won’t be able to do this in your content\_index.md (which is how the code is currently)
Instead, refer to the headless bundle docs and use their example to get the page/images you want.
Thanks @zwbets - I understand the confusion, as I am not very clear.
Some more explanation for people.
OBJECTIVE
I am trying to make a partial that will let people easily have their markdown images converted to responsive/srcset type images without shortcodes.
This way people can ‘set and forget’ their image processing, or have more granular control at the page level or even specific image level - including adding classes - and all with natural markdown.
OPERATION
I intend the partial to to work at:
# symbol (“for an image”) (eg ,Currently, the sort of commands/values intended to be included:
This process really involves two steps:
PROGRESS
I am very much at the beginning of this.
What I am trying to do now relates to the first step - replacing the image references in the html.
At the moment, I am finding the references and replacing them with some test text.
However, the replacement value is not changing between the two test images as expected.
(Side note: The two image references are actually the same one, but it doesn’t matter for this part as it is the references I’m working on for now).
Instead, both images are replaced with the same test text when I expecting (hoping) it would differ.
I think the replaceRE replacement value ($replacement) gets set the first img it comes across, and doesn’t update with each new img replacement in the page. However, as I said, I am a fish out of water and so do not know.
Once we can conditionally determine each image’s output, we can set the per image level command/values and start kicking this into action.
Hope that makes more sense.
I am fully aware this is probably being done awfully, and that an adept coder would probably have this done in like 20-30 minutes. But until someone pitches in, I’ll just keep chipping away at this as I get time.
IGNORE THIS THREAD FOR NOW.
From now on, I will refine my questions to specific issues to prevent confusion.
If I don’t get distracted (likely) and finish this I will share here and/or as a tip and trick, and so others can use.