Help with some template adjustments using Zotero Integrator

Help
1

Fix some issues with my template so as to effectively use the Zotero integrator plugin.

I am new to Obsidian and Bibtext, but I’m slowly teaching myself. However, I’m now finding I spend way more time setting up / adjusting Obsidian than actually using it. I would be grateful if the good folk in this forum could help me out… I need to get productive!

I have a Literature Note template with bibliographic data at the top and annotations underneath, grouped into headings based on the zotero highlighter color. I have used a range of online sources to develop my template, including Danny Hartcher’s guide for the annotations, which was very useful. However, I cannot resolve the following:

  1. List the collection names associated with the source (like tags, separated by a comma).
  2. Get the ‘journal article’ item type to display with a space between the two words.
  3. Make it so that headings in the template are collapsed by default.
  4. Format the callouts in the annotations so that they are coloured.

Screenshot 2024-03-10 at 14.10.23

Things I have tried

  1. I have tried a range of different functions, including: {{collections}}, {{itemcollections}}, {{item.collections}}, {{collections | name}}, {{item.collections | name}}, {{item.collectionsn}}, {{item.collections0name}}. When I used the data explorer, I can see that the collections section has additional fields (a number, full path, key, and name) but I can’t figure out how to use these terms to get it to work. Everything I’ve tried either results in a blank output for that function, or an export error.
    When I use {{collections}} it renders [object Object] that are formatted like hyperlinks, but don’t go anywhere.
  2. I am currently using {{itemType | lower}}, but I honestly have no idea how to enforce the space. Tried searching on google, reddit, here etc., but can’t figure it out.
  3. I tried ensuring the headings are collapsed in the template, but I don’t know of any code etc. to make this work. I think the code for the annotations is forcing the sections open on import.
  4. I found the below CSS snippet on here, but I can’t remember who posted it sorry. I went down a massive rabbit hole with all of this and just kept trying so many different things. I adjusted the hex codes to match the Zotero highlighter codes (and thus the base code from Danny Hartcher) but it didn’t do anything.
    I also have the admonitions plugin, and could create a custom callout for each highlighter colour, but I don’t know how to adjust the base code.

CSS Snippet

/* Yellow */
.literature-note .callout[data-callout-metadata="#ffd400"] {  --callout-color: 255, 204, 0;
}

/* Red */
.literature-note .callout[data-callout-metadata=""#ff6666"] {  --callout-color: 255, 59, 48;
}

/* Orange */
.literature-note .callout[data-callout-metadata="#f19837"] {  --callout-color: 255, 149, 0;
}

/* Green */
.literature-note .callout[data-callout-metadata="#5fb236"] {  --callout-color: 40, 205, 65;
}

/* Blue */
.literature-note .callout[data-callout-metadata="#2ea8e5"] {  --callout-color: 0, 122, 255;
}

/* Magenta */
.literature-note .callout[data-callout-metadata="#e56eee"] {  --callout-color: 255, 87, 255;
}

/* Purple */
.literature-note .callout[data-callout-metadata="#a28ae5"] {  --callout-color: 125, 84, 222;
}

Here is the base code I’m using in the template for the annotations, currently.

    set zoteroColors = {
        "#2ea8e5": "blue",
        "#5fb236": "green",
        "#a28ae5": "purple",
        "#ff6666": "red",
        "#ffd400": "yellow",
        "#f19837": "orange",
        "#aaaaaa": "grey",
        "#e56eee": "magenta"
    }
-%}

{%-
   set colorHeading = {
		"blue": "Central Points",
		"green": "Green",
		"purple": "Purple",
		"red": "Counter / Conflicts",
		"yellow": "General Annotations",
		"orange": "Direct Quotes",
		"grey": "Grey",
		"magenta": "Further Reading"
   }
-%}

{%- macro calloutHeader(type) -%}
    {%- switch type -%}
        {%- case "highlight" -%}
        Highlight
        {%- case "image" -%}
        Image
        {%- default -%}
        Note
    {%- endswitch -%}
{%- endmacro %}

{%- set newAnnot = [] -%}
{%- set newAnnotations = [] -%}
{%- set annotations = annotations | filterby("date", "dateafter", lastImportDate) %}

{%- for annot in annotations -%}
    {%- if annot.color in zoteroColors -%}
        {%- set customColor = zoteroColors[annot.color] -%}
    {%- elif annot.colorCategory|lower in colorHeading -%}
    	{%- set customColor = annot.colorCategory|lower -%}
    {%- else -%}
	    {%- set customColor = "other" -%}
    {%- endif -%}
    {%- set newAnnotations = (newAnnotations.push({"annotation": annot, "customColor": customColor}), newAnnotations) -%}
{%- endfor -%}

{%- for color, heading in colorHeading -%}
{%- for entry in newAnnotations | filterby ("customColor", "startswith", color) -%}
{%- set annot = entry.annotation -%}

{%- if entry and loop.first %}
###### {{colorHeading[color]}}
{%- endif %}

> [!quote]+ {{calloutHeader(annot.type)}} ([Page {{annot.page}}]({{annot.desktopURI}}))

{%- if annot.annotatedText %}
> {{annot.annotatedText}} {% if annot.hashTags %}{{annot.hashTags}}{% endif -%}
{%- endif %}

{%- if annot.imageRelativePath %}
> ![[{{annot.imageRelativePath}}]]
{%- endif %}

{%- if annot.ocrText %}
> {{annot.ocrText}}
{%- endif %}

{%- if annot.comment %}
> - **{{annot.comment}}**
{%- endif -%}

{%- endfor -%}
{%- endfor -%}
2

The first three of the following solutions are from my template.

Problem #1

Solution:

Collections:: {% for collection in collections %}#{{collection.name | replace(r/\s+/g, "-") | lower }}{% if not loop.last %}, {% endif %}{% endfor -%}

Collections is an array of objects, so you can’t just put {{collections}} directly. You have to loop over the elements in the array and apply formatting there.

Note: Replaces whitespace with a dash to keep the collections as one tag, without spaces.

Problem #2

Solution: Use regex like so

{%- set camelRegex = r/([a-z])([A-Z])/g %}
item-type: {{itemType | replace(camelRegex, "$1 $2") | title | trim}}

Problem #3

Solution:

  1. Install the Creases plugin.
  2. Append %% fold %% after the headings to fold, like so:
## Heading to fold %% fold %%

Problem #4

Solution: Fix your CSS snippet to target callouts using the lowercase color names, as seen in zoteroColors, rather than their hex codes. That’s how your template is set up (the callouts contain the lowercase color name in the header), which is based off this one by @apfelstrudelig: Zotero Integration – Import Templates? - #96 by apfelstrudelig.

Or rather, just download the right CSS snippet from the template author: obsidian-templates/css/litnote-colors.css at main · lguenth/obsidian-templates · GitHub

3

Thank you so much for your help.

Solution 1: was a full solution for me, although I did have to put a “.” outside of the command, otherwise it would pull the next line up onto the same line as the collections. I tried different this, but this is all that worked for me.

Solution 2: was a full solution, thank you!

Solution 3: this folds the headings, but it also places a shirt icon next to all of those headings, which I have to say I really dislike. Others have posted about this on the Github page, but no solution has been posted that I could see.

Solution 4: the template author provided a snippet to go with the template, which didn’t work for me. I also tried this one of from the author linked in your post (attempting both option: as is, or removing the literature-note from the first line and placing cssclass: literature-note in the from YAML), nothing worked unfortunately.

I had a quick peek at your templates, and will familiarise myself with them, I like the idea of the Kanban Zotero workflow (but note that the link for the guide in your Obsidian page doesn’t work, but I’m guessing I’ll find it on your Github).

I have to say, there is a very steep learning curve for this. I still feel like I’m in the middle of a fog filled swamp, but I’m slowly getting there!

Thanks again :slight_smile:

4

You’re welcome!

Regarding the . you had to add, I’m not sure how that did the trick. The nunjucks way to do it would be to delete the last dash so that -%} becomes %}. The dash we removed means “strip all the whitespace after the tag”. This is called whitespace control, and you have to use it when setting up your template. See the nunjucks docs on whitespace control. Note: There could also be something in the part of your template below this that is deleting whitespace upwards.

Regarding the shirt icon, this CSS snippet should hide it:

.cm-creases-icon {
    display: none;
}

Regarding the CSS snippet for colored callouts, it appears that the issue is that Danny has provided a broken version of apfelstrudelig’s annotation formatting, because the color information needed for styling is simply not added to the calloutHeader as it should be.

This part of your current template:

> [!quote]+ {{calloutHeader(annot.type)}} ([Page {{annot.page}}]({{annot.desktopURI}}))

Should look like this (from apfelstrudelig’s template, with minor adjustments to the page):

> [!quote{{"|" + color if color != "other"}}]+ {{calloutHeader(annot.type)}} ([Page {{annot.pageLabel}}]({{annot.desktopURI}}))

With this change, apfelstrudelig’s CSS snippet should work as expected (the one I linked in my previous message). Unless something else is amiss in your template.

Note: By default, the CSS snippet doesn’t require a cssclass in your notes. You can uncomment the /* .literature-note */ to limit the snippet to notes with the cssclass: literature-note. In which case, you should add that cssclass to the properties of your literature note template, like so:

cssclasses:
- literature-note

:warning: Note the plural cssclasses :point_up:

I’m glad you find my templates interesting. Feel free to try them out! As for the broken link, sorry about that. Can you be more specific about where you found the link? I’m not sure what my “Obsidian page” refers to.

That’s key! Once you settle in, it will be mostly smooth, I reckon :wink:

5

Thanks again, I give those a try!

I also types ‘obsidian’ instead of GitHub before, this is the page I was referring. There’s a link using share note, and it’s changed domains :blush:

1 Like
6

Let me know how it goes :+1:

And thanks for letting me know about the broken link! I’ve fixed it now, so you should be able to access to Kanban reading list guide now!

7

It all worked! Thank you!

I couldn’t mark all of the solutions, so I marked the most recent :slight_smile:

1 Like
8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.