Optionally add post fields such as author, tags and categories to template

[jamestagal]

Hi @roobyz

How are you? I am trying to figure out a solution for this issue again and when looking at the template for these pages/sections I don't know how I can optionally include fields such as author, tags and categories?

For instance when I removed reference to the {catgPosts} in my featured.svelte file, the word 'Category' is still included on the page. But if I removed the word 'Category' from post_meta.svelte then it will effect all places where the word 'Category' is used globally.

Could you please help me work out a solution to this one?

Best regards, Ben

[roobyz]

Hi @jamestagal , I was thinking on a more flexible approach to this. Rather that having a boolean flag, I should have a use-case filag with multiple values. For example:

Type	Default Setup
post	title, author, date (update and create), catg, tag
cards_post	title, author, date (update and create), description, catg, tag
cards_proj	title, author, date (update and create), description, catg, tag
feature	title, author, date (update and create), catg, tag
search	title, author, date (update), catg, tag

This way, each component use-case can be configured by attribute. Thoughts?

[jamestagal]

Hi @roobyz

Yes that's a good ideas... For instance on the featured.svelte page I wanted to not show author, categories and tags here but show "citation" attribute for the image. And possibly include the "articleSnapshot" attribute I added recently.

Ben

[roobyz]

hi @jamestagal

I pushed a commit to address this. The key change is the replacement of a pair of booleans with the following:

  // Post Meta configuration values
  const pm = {
    author: true,
    date_modified: true,
    date_created: true,
    description: false,
    catg_tags: true,
    continue: false,
    feature: true,
  };

Anywhere we use import PostMeta from "../components/post_meta.svelte", we can adjust each of the default attributes by changing them to true or false as desired.

There were a few other tweaks mostly related to the css styles for the feature component.

Roberto

[jamestagal]

Hi @roobyz Thank you for these changes. This is awesome functionality. So potentially i could add attributes to this list if i needed to such as my custom attribute "articleSnapshot" ?

Also what are the continue and featureattributes here?

regards, Ben

[roobyz]

Hi @jamestagal

You're welcomed and thank you as well!

1. continue: enables or disables the "Continue Reading" button (posts on home page)
2. feature: indicates whether to apply the feature (home page) styles or not
3. description: snapshot of the first ~170 characters of the article body

Seems like your "articleSnapshot" is already covered by "description", but you might mean something else. If you want to add new custom variables, all you need to do is:

• add the new variable to the pm object in component you want to modify
• add an html bock to the post_meta.svelte component that is wrapped by an "if" statement like:

{#if pm.new_variable}
  add html here...
{/if}

Roberto

[jamestagal]

Hi @roobyz That's great! Thanks again. Yes I thought of having a short description of what the post was about on the 'Posts' page hence the "articleShapshot". But I think I might not need to make the globally available by adding it into post_meta.svelte because I only wanted it on this page... Nevertheless, your changes here have make the theme more flexible!

Cheers, Ben

[roobyz]

Hi @jamestagal

I added description for that purpose. All you need to do is set it to true on the cards_projs.svelte component, which controls your "posts" page. My version uses the get_description function, which takes a snapshot of the post body. You can adjust the length in the post_meta.svelte component (line 13).

You can also replace that function call with your key/value pair to redefine the "cardBody" variable:

\\ replace this
get_description(post.fields.articleBody, 170)

\\ with your value
post.fields.articleSnapshot

Cheers, Roberto

[jamestagal]

Hi @roobyz I was able to add the citation information on the featured section using your new configuration values. See site.

Thank you again.. It's working like a charm :)

Best regards, Ben

[roobyz]

hi @jamestagal

That sounds great. Some addition thoughts I had were:

Adjust the size of your "Post" images (cards_proj.svelte). See the code snippet below. You can adjust w-28 and h-28 to maybe size 32 or so.

            <!-- print the project card -->
            <div class="flex items-center mb-3">
              <img
                class="inline-block object-cover rounded-md w-28 h-28"
                src="assets/posts/{post.fields.image.src}"
                alt={post.fields.image.alt}
              />

Also, you have "undefined" showing up where the "description" should be, so it seems that your variable either doesn't contain data or the variable isn't set correctly. You could add an "or" value to always include an empty string if undefined.

Cheers, Roberto

[roobyz]

hi @jamestagal

That sounds great. Some additional thoughts:

You may want to adjust the size of your "Post" images (cards_proj.svelte). See the code snippet below. You can adjust w-28 and h-28 to maybe size 32 or so.

            <!-- print the project card -->
            <div class="flex items-center mb-3">
              <img
                class="inline-block object-cover rounded-md w-28 h-28"
                src="assets/posts/{post.fields.image.src}"
                alt={post.fields.image.alt}
              />

Also, you have "undefined" showing up where the "description" should be, so it seems that your variable either doesn't contain data or the variable isn't set correctly. You could add an "or" value to always include an empty string if undefined.

Cheers, Roberto

[jamestagal]

Hi @roobyz Thanks. yes I think the image could be a touch larger! Ok that is a good suggestion about adding an 'or' value. I just haven't added any text to the other posts yet! but this is a good reminder :)

Thanks again.