Eleventy: Access `page` data in shortcodes without arguments
I was thinking of turning all of my meta tags into a Meta shortcode.
Currently my template looks like this:
<!DOCTYPE html>
<title>{{title}}</title>
<meta name="description" content="{{description}}" />
etc...
Is there a way for me to pass a single data object to my shortcode which would contain title and description, similar to how you can do with context on a macro? Or do I have to pass these values individually. Because each child page might set a lot of values in their YAML, it feels like a lot to pass each property to the shortcode.
robdodson
All 14 comments
Personally, I go with a partial + global _data object …
Ryuno-Ki
on 24 Oct 2019
yeah in this case I have YAML from my pages that I want to use as well. For example, I may give each page a social YAML object where they can specify their facebook and twitter cards.
But maybe doing an include or macro is a better option because it will have access to all of the current page data. I prefer writing in JavaScript as opposed to Nunjucks for anything requiring logic so that's why I was leaning toward a Shortcode.
robdodson
on 24 Oct 2019
Fair enough.
Just want to highlight, that there is more than one way to achieve this.
Perhaps you could go the partial-way until your request was addressed :-)
Ryuno-Ki
on 24 Oct 2019
I have also a use case in a plugin where I would like Eleventy to pass the page data to a shortcode, without requiring the user to put page in the shortcode parameters.
More precisely, I'm working on improvements for @eeeps 's respimg plugin for responsive images. I like to store images alongside the Markdown file they're used in, and make the build copy them alongside the generated HTML (like I explained in my jekyll-postfiles plugin), so I need the page's URL to compute the image's URL. If I could get it (the page URL) automatically in the shortcode code, it would allow moving the content around in the site without editing the shortcode values.
Other page data could be useful too, so having it all would be great.
I'm using Nunjucks, I hope it one of the languages for which it is possible: https://twitter.com/eleven_ty/status/1196112060809195524
nhoizey
on 17 Nov 2019
I also have the same use case as @nhoizey and created custom tags to help with this:
https://github.com/GoogleChrome/web.dev/blob/master/src/site/_includes/components/tags/Image.js
robdodson
on 18 Nov 2019
@robdodson great, I'll look at your code, thanks for sharing!
nhoizey
on 20 Nov 2019
I found a better solution with transforms for my use case, but they don't have any context either… 😅
See #789
nhoizey
on 25 Nov 2019
This will ship with 0.11.0. Docs issued at #1044
zachleat
on 26 Mar 2020
If you saw this last night, I modified the behavior to only expose this.page for now (rather than the entire data cascade 😅) for a few reasons now listed at #1044.
zachleat
on 26 Mar 2020
Follow along with work to analyze and normalize this in filters here: https://github.com/11ty/eleventy/issues/1047
zachleat
on 26 Mar 2020
@zachleat do you have an example of how this would work? I tried the following with 0.11 beta-2:
module.exports = (content) => {
console.log(this.page); // undefined
};
Ah sorry @robdodson it’ll be in beta 3. Just coded it yesterday
zachleat
on 27 Mar 2020
@zachleat Question, I'm using Handlebars. I have a shortcode that takes a set of parameters to build a url. I use rest parameter in my function there function(...urlParts) and I noticed that the last item in this array is an object that contains all the data available (urlParts.pop().data.root). Useful but not sure this is documented? Is this deliberate? It has confused me a lot.
BregtDeLange
on 23 May 2020
If you saw this last night, I modified the behavior to only expose
this.pagefor now (rather than the entire data cascade 😅) for a few reasons now listed at #1044.
Here you mention why we don't include the data cascade, but I couldn't track down the thinking there. Are there plans on the horizon to explore getting a page's frontmatter data via this (from within a shortcode)? Cheers
adamduncan
on 8 Jun 2020
Related issues
zachleat
·
3Comments
sonniesedge
·
3Comments
DirtyF
·
3Comments
kaloja
·
3Comments
aaronstezycki
·
3Comments
Most helpful comment
I have also a use case in a plugin where I would like Eleventy to pass the page data to a shortcode, without requiring the user to put
pagein the shortcode parameters.More precisely, I'm working on improvements for @eeeps 's respimg plugin for responsive images. I like to store images alongside the Markdown file they're used in, and make the build copy them alongside the generated HTML (like I explained in my
jekyll-postfilesplugin), so I need the page's URL to compute the image's URL. If I could get it (the page URL) automatically in the shortcode code, it would allow moving the content around in the site without editing the shortcode values.Other page data could be useful too, so having it all would be great.
I'm using Nunjucks, I hope it one of the languages for which it is possible: https://twitter.com/eleven_ty/status/1196112060809195524