Choice Field / Featured Posts

Developer Support CMS Development
1

I’m relatively new to HUBL, but learning lots. I’m stuck on this problem… but, I feel like I’m close (maybe?).

The goal is to have a CHOICE field in my blog post. This is working correctly with this line of code in the “Additional <head> markup” box:

{% choice "blogType" label='Choose the blog type', value='Featured', choices='Featured, Latest, New', export_to_template_context=True %}

The problem is retrieving that choice and showing the result. The code I’ve currently got in the Custom HTML box is:

{% set tag_posts = blog_recent_tag_posts('default', 'Apparel', 2) %}
<div class="featured-posts">
{% for tag_post in tag_posts %}
<div class="item">
<div class="post-image" style="background:#333333 url('{{ tag_post.featured_image }}')no-repeat;">
<div class="item-wrapper"><button class="featured-pillbox">

{% if widget_data.blogType.value %} 
{{ widget_data.blogType.value }}
{% endif %}

</button>
<div class="title-wrap">
<div class="post-title"><h2><a href="{{ tag_post.absolute_url }}">{{ tag_post.name|truncate(100,true,'...') }}</a></h2></div>
<div class="author-data">
{%if tag_post.blog_post_author %}
<a class="author-link" href="{{ group.absolute_url }}/author/{{ tag_post.blog_post_author.slug }}"><span style="font-weight:400!important;">By</span> {{ tag_post.blog_post_author.display_name }}</a>
{% endif %}
</div>
</div> 
</div>
<div class="read-more-link">
<a href="{{ tag_post.absolute_url }}"></a>
</div>
</div>
</div>
{% endfor %}
</div>

The issue, I’m sure, is in the following lines. It’s calling the choice field in the head, but only outputting the default value.

{% if widget_data.blogType.value %} 
{{ widget_data.blogType.value }}
{% endif %}

So, the question is… what do I wrap this in (or do differently) so that it recognizes which post it’s pulling from, and then pull the value set in the blog post?

Any help is sincerely appreciated. Much thanks, in advance, for your assistance.

Jeff T.

2

@jtEnvoy

Congrats on tackling the hubl journey :high_voltage:

From what I can see, what you wrote should work. I tested in my portal and it worked there :thinking:

Beyond that, curious why you are putting that tag in the head of the page. Seems like it should be in a module…

@piersg , @jonchim what do you all think?

3

Thanks, Dennis!

My understanding on the tag in the head was so that the results could be used across modules. If I put it in my blog content (blog post template) module, I couldn’t get anything to show outside of that module (it would only show in the listing template).

The overall goal is this: A latest stories area at the top of the blog is picking the latest two blog posts from a specific blog tag. On those two blog posts, I want to be able to put a ‘flag’ on the post. Something like… New or Latest or Check This Out, etc. So, those choices could be made while editing the blog post, and would then show up in the stylized doohickey I have setup on the featured image in that latest stories area.

But, maybe there’s a better way?

Thank you,

Jeff T.

4

Yeah! Ok, this makes sense.

Let’s make sure I have my head wrapped around this

1. You have a choice on a blog post

2. You have an area on your blog listing page that you want to display the value of that choice (or an icon or something flashy)

So here is where I questioned adding to the head. I assume you are talking about in the blog post editor settings section here:

38275iE1A646ECB2208D36.png
38275iE1A646ECB2208D36.png400×263 16.4 KB

The problem with that is that you have to guarantee that a person would be cloning a post with that already in the head. That leaves the potential for human error. And, speaking for humans, we mess up a lot.

What you can do is add that choice field exactly as you have it in the post template and then, in the listing template, you will call it slightly differently.

try adding this in your listing view:

{% if content.widgets.blogType.body.value %} 
 {{ content.widgets.blogType.body.value }}
{% endif %}

Hopefully, I am going in the correct direction here :grinning_face:

If you would like to see a demo, check out this very ugly playground where I mess around. Look for New in green

5

Yes, and no. :grinning_face:

1. Yes. Choice on the blog post. But, the code is not in the additional head markup of each post, but in the global additional head markup for the whole template (right side column). Totally agree… we humans mess up a lot, so this took that out of the equation.

2. Sorta. It’s on the blog homepage, but not in the same module group. This seems to be the kicker. When dropping that code in the listing template, it works great. Post template and listing tempate communicate nicely with each other. But! I need it to end up in this other module group inside a custom html group. Here’s a down and dirty diagram:

38325iE789B8A114EB83E4.png
38325iE789B8A114EB83E4.png999×994 114 KB

I really appreciate you taking the time to dig in to this. Hope you’re staying warm wherever you are.

Thanks again,
Jeff T.

6

Hey @jtEnvoy !

Cool. The last piece of this puzzle is how are you getting those posts into the module. I am assuming using a for loop and maybe the blog_recent_tag_posts function.

Getting a little into the weeds here, but if you go to your blog homepage (We typically reference this as the blog listing page), click on the sprocket on the top right and select “developer info”.

When selected, you will get a new window spitting out a giant block of json. If you were to search in there, you would find your blogType object in there and with that object, you would find the value that has been selected. This is basically what we are pulling from. So normally in the blog listing, you could access it with

{{ content.widgets.blogType.body.value }}

If you were follow down the json, you would start at the content object, move to the widgets object and then into your blogType object.

In your module, we are going to do basically the same thing with a small twist. When you do your for loop, you set something like this

{% for rec_post in rec_posts %}
posts are spit out here
{% endfor %}

So now, instead of looking at content, we need to look at rec_posts

LONG STORY SHORT…

In my demo page, this is the code that I used in my module. You would change blog_recent_posts to blog_recent_tag_posts.

{% set rec_posts = blog_recent_posts('32302773078', 5) %} 
<div class="cards">
{% for rec_post in rec_posts %}
 <div class="card">
 <div class="post-title">{{ rec_post.name }}</div>
 {% if rec_post.widgets.blogType.body.value %} 
 <h4>{{ rec_post.widgets.blogType.body.value }}</h4> 
 {% endif %}
 </div>
{% endfor %}
</div>

btw, Your down and dirty mock makes my demo page look sad. Enjoy comic-sans and a splash purple :grinning_face:

7

Yes! It is working. Your code solved it. Here’s the overview:

I’m using tag_post(s) in my code, but same structure overall. The issue was how I had the call written. Originally, I had this:

{% if widget_data.blogType.value %} 
{{ widget_data.blogType.value }}
{% endif %}

But, with some tweaks to match what you sent, I know have this:

{% if tag_post.widgets.blogType.body.value %} 
{{ tag_post.widgets.blogType.body.value }}
{% endif %}

And it works!

Also, I was curious… so, I pulled the choice bit out of the additional <head> markup area and put it back into the blog content post template… and that worked too!

I did a little happy dance in my chair. I sincerely appreciate your help.

And, as a designer, I’m only mildly offended by the purple and comic sans. lol.

Hope your day is great. Thanks again, @dennisedson.

Jeff T.

8

@jtEnvoy

Great, I forgot to add that all of my code was not in the head :roll_eyes:

Happy it worked out. Now we expect great things from you :upside_down_face:

9

Hey @jtEnvoy,

Will these custom tags be different than the tags you can define within the individual blog post settings?
I would think a custom module on the blog post template would work. You should be able to seprate out the featured image as a separate module and then have your custom module and featured in the same group so that you can position a stylized tag on top of the image?
Also, are you using the same template for both the blog listing and single post?

10

Hey @jonchim,

Yes, these are different than normal tags. So, it might be tagged Apparel, but I’ll choose New or Latest or Greatest from the drop down list to use on the image as a separate word/flag.

For the blog listing and single post… they are using the same template. But, this one lives in a different module group (see image below). I’m trying to collect the info from the blog post, and then show it in the Custom HTML section (code I originally shared).

38266i2613EEEB1EFBF884.png
38266i2613EEEB1EFBF884.png453×318 15.7 KB

That’s why the code for the choice was added to the header… as I understood that would make it globally available across the whole template.

I’m not 100% following what you’re saying about the custom module and featured in the same group. I’m sure there’s a better way to do this.

What is working: You see the choice option in the blog post. It’s remembering it. What’s not working: Getting it to show in the Custom HTML area in a different module group.

Many thanks,

Jeff T.