(CLOSED) CMS Hub Free Tools Ask Me Anything (July 12th)

[Jaycee_Lewis]

Hey, HubSpot Community 🧡

It's been a big month for CMS Hub Free! We've added a ton of features to CMS Hub Free including—1 blog (up to 100 blog posts), 25 landing pages, and 1 subdomain and 1 CCTLD on 1 root domain.

To support you all, we’ve gathered product experts and HubSpot power users from across the world to help answer all your CMS Hub Free Tools questions!

We have members of the HubSpot product, developer, support, and success team here to answer any questions you might have.

AJ LaPorte:  Sr CMS Hub Developer Advocate

Jon McLaren:  Sr CMS Hub Developer Advocate

Katie Tade:  Senior Product Manager

Lukas Pleva: CMS Hub Product Lead

Luke Summerfield:  Product Go To Market Lead

William Spiro: Senior Product Manager

Please drop in your questions below. We’ll start answering questions on July 12th and until 3 PM EST on July 15th.

Looking forward to hearing from you all soon!

[Anton]

To make it easier - I'll seperate my question list. So here the other questions:

Something not just CMS Hub related: How does HubSpot handles Google Fonts and GDPR? Back in January there was an GDPR update and Google Fonts have to be hosted locally from that moment. How does HubSpot handles this when a user selects a Google Font? I'm thinking of something like "if a Google Font is selected in the theme - it will be uploaded to the filemanager, the path is a variable which can be used in the theme-overrides.css"

Last but not least: Is there Any update on drag&drop functionality for blog posts idea?

Thanks in advance

best, 

Anton

[yaisah]

Hi Anton, 

I will be replying to your question regarding drag&drop functionality for blog posts. This is actually high priority for us this quarter and working on getting this launched in September. If you would like to be part of our BETA testing for this feature, I can certainly add your portals. Send me a message and as soon as BETA testing begins, I'll send you an email with more info. Anyone else interested in testing this feature is also welcome to send me a message. Hope this helps! If you have any other Blog related feedback feel free to message me as well. 

Yaisah

[Anton]

Hi @yaisah, 

this is awesome! Thank you for this information!

Of course im interested in the BETA (as for every BETA).

best, 

Anton 

[katie]

Hi Anton,

Great question! I can talk a bit more about Google Fonts and GDPR. Our team is currently working on self-hosting Google Fonts so that we can comply with the new GDPR update. We are going to have a shared set of google fonts that are hosted by HubSpot under the customer's domain. We will not collect any user request information as part of self-hosting, so the requests will be GDPR-compliant.

I hope this helps! We will plan on making a wider announcement when the self hosting work is complete--hoping to have it ready around fall of this year, so keep an eye out!

Katie

[Anton]

Hi @katie, 

Hosting fonts on customers domains is great! Thank you!

best, 

Anton

[jorcrus]

Hello there!

Is there a way to create a filtered list of blog posts based on 2 or more tags/topics without breaking the pagination? Is this feature something you think could be added in the future?

[jmclaren]

Hey @jorcrus,

We're actively thinking of ways of improving the way you can query for and get structured data in HubSpot, including the blog. Today in HubSpot we don't support multi-tag listing pages by default. There are workarounds you can do. One potential solution is to use HubSpot's Serverless Functions in tandem with the HubSpot Blog APIs for when multiple tags are selected. You would then grab the list of posts that have the specified tags and display them using JavaScript. You would then need to implement JavaScript based pagination or use the page URL to update the offset for your queries.

Similarly you could use a serverless function to grab a large amount of blog posts. Then implement "infinite scrolling" so every time the user scrolled close to the bottom of the list you would grab more posts and render them. Eliminating the need for pagination. You would use JavaScript and CSS to hide posts that are not relevant to your selected tags.

I will relay your feedback to the teams internally about providing more ways to query for blog data server-side.

[ontarget]

Is ther ever going to be support for ids and classes on drag and drop sections, rows and columns? 

Thanks.

[katie]

Hi @ontarget ,

Thanks for posting! We do currently allow you to add classes to developer-built sections (more info on that here), so if you're building out sections in your theme, that option is available. 

So far, we've resisted introducing the option to add classes and IDs to containers from the page editor because of the volatility that it introduces in the context of drag and drop. Adding classes to containers that can be moved around on the page runs the risk of the styling on that container breaking without the content creator knowing the reason behind the breakage. 

It's definitely something we're still considering, but if we do introduce it in the future, we want to be cautious about how it's used to best help content creators achieve the look they want with minimal risk of breakage. 

I hope this helps! I would definitely recommend checking out the new developer-build sections feature if you haven't already!

Katie

[Anton]

Hey folks, 

while playing with a free CMS Hub account I've discovered the branding wizard and "page wizard" while going through the CMS Hub checklist. This feature blew my mind. This feature eliminates the creation time for a basic setup almost completly.

But this got me thinking

1. Is there a way to show custom theme configuration settings in the wizard? I mean sure, there are the theme settings(Settings/Website/Theme...) where the client/user can modify every bit of a bought/custom theme at any time but I'm thinking more from the theme provider/partner side. So that somebody who creates a custom/marketplace theme can select options - maybe through the fields.json of the theme - which options should/could be set with the branding wizard.

2. The "select your category and you'll see different pictures" and the "select from one of those layout for this particular page" feature ->🤯. Is there a way that a developer can predefine those settings? I mean this is basically a choice-field - if a developer could write something like 

{% if branding_wizard.category == "x"%}
   {% set header = "../globals/header_a.html" %}
   {% set about = "../sections/about_a.html" %}
   {% set footer = "../globals/footer_a.html" %}
{% if branding_wizard.category == "y"%}
   {% set header = "../globals/header_b.html" %}
   {% set about = "../sections/about_b.html" %}
   {% set footer = "../globals/footer_b.html" %}
{% endif %}​

it would be huge.

3. Is there a way to predefine those styling categories (clear, bold, classic...) in the wizard directly in the theme? This would give developers so much options and - wouldn't overcomplicate things for the client/user. Maybe through providing a specific file/json(or even though the theme-override.css) for this where the options will be defined like

{% if branding_wizard.styling_categories == "bold" %}
   {% set first_color = "#ccc" %}
   {% set font_family = "'Lato', Arial, sans-serif" %}
{% if branding_wizard.styling_categories == "classic" %}
   {% set first_color = "#020" %}
   {% set font_family = "'Futura', Arial, sans-serif" %}
{% endif %}​

Thank you!

best, 

Anton

[lpleva]

Hi @Anton! So great to hear you're a fan of the setup wizard. We created it for the exact reason you mentioned - to enable marketers new to CMS Hub (especially the free tier and CMS Hub Starter) to create a new website as quickly as possible. 

Right now, the simplified wizard flows are only available if the user selects the Growth theme. But we're actively working on supporting custom and Marketplace themes as well! For example, up until a few weeks ago, if the user selected a theme other than the Growth theme, the "Customize your theme's settings" step wouldn't be available. With recent changes, the step is available regardless of what theme you select, but it works differently depending on if the user selected the Growth theme or another theme. For Growth, we send you into the simplified wizard you mentioned. For other themes, we send the user into the Theme Settings app and give a short tour of the different parts of the app.

Long-term, though, we definitely want the experience to be consistent. We're only at the beginning of exploring what that might look like, but many of the things you've suggested have been put on the table as options to explore further. Will definitely keep you posted on how this progresses! 

[Anton]

Hi @lpleva, 

this is huge! Thank you for this! Looking forward for the customizable wizard!

best, 

Anton

[Balthatek]

Hello, thank you for the oppurtintym I would like to know how could I set up a simple and easy Panel with only few items as inventory a calendar schedule and clients archive; 

[dennisedson]

@Balthatek ,

Could you go into more detail about what you are trying to accomplish?  Is this something that you want to use the HubSpot CMS to accomplish?  As many details as you can provide will help us deliver a more valuable answer 😀

[ontarget]

Sure. So right now if I drag a module into the page it drops it inside of a section, row or column (depending on other elements)... I'm asking if there can be an ID and or a class field that would place a class or an ID on the element in the options area of the section editable sidebar same place that we have visibility and alignment options.

[dennisedson]

@Anton , I know you have started building a site with the CMS Free Tools.  Any thoughts or questions you have about using it so far?

[robertkreisler]

Hello!

We have a couple issues that I need help with.

The first is how to send follow-up emails at time-based increments based on their last known login, but not send them the same email twice.  For example, if a customer has not logged in for 30 days, they get email V1, if they go another 30 days but have received email V1 we then send them email V2, and so on.  I started a workflow of if/then, but having a little uncertainty if that's the best route to go.  Your assistance would be appreciated.

The second need is how to mark certain customers as 'non-marketing' and get them to NOT be included in our newsletter list, per this post here.  We had an awkward situation recently and I'm still trying to figure out how it happened, and how to fix it, per my reply post linked below.

Mark Contacts as Non-Marketing

Thanks in advance!

[54Brands]

Hi, I am trying to get our listing page to filter properly. I am currently using isotope.js, which is functioning properly, however the loop seems to be applying the same item slug on every post item. So when applying a filter, it shows the same results as "all." Is there a way to apply the correct slug to each post? Here is my loop code: 

<div class="post-listing isotope">
      {% set my_tags = blog_tags('default', 20) %}
      {% set posts = blog_recent_posts('default', 100 ) %}
        {% for item in my_tags %}

          {% for post in posts %}
             {% if loop.index > 1 %}
                  <div class="post-item {{ item.slug }}">

                    <article class="blog-index__post-wrapper">
                      <div class="blog-index__post">
                        {% if post.post_list_summary_featured_image %}
                        <a class="blog-index__post-image" href="{{ post.absolute_url }}">
                          <img src="{{ post.post_list_summary_featured_image }}" class="" alt="{{ post.featured_image_alt_text | escape }}">
                        </a>
                        {% endif %}
                        <div class="blog-index__post-content">
                          <div>
                            {% set featured_tag = post.topic_list | first %}
                            {% if featured_tag %}
                              <span class="blog-index__post-preheader">{{ featured_tag }}</span>
                            {% endif %}
                            <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
                            {% if content_group.show_summary_in_listing %}
                              <p>{{ post.meta_description | default(post.post_summary, true) | truncatehtml(150, '...', false) }}</p>
                            {% endif %}
                          </div>
                          <a class="more-link" href="{{ post.absolute_url }}">Read More</a>
                        </div>
                      </div>
                    </article>
                    
                  </div>
               {% endif %}
           {% endfor %}
        {% endfor %}
    </div>

[jmclaren]

Hey @54Brands the problem stems from looping through each tag, then looping through every post, and adding the current tag you're looping through to every post's item. This means you'll only add one tag's slug to that div element, and you will also render the same post's html to the page 20 times.

If you had 100 blog posts, you would be rendering 2,000 post-item divs to the page, just to make it so you can filter 100 posts. I would propose instead just rendering 100 post-item divs for the posts and filtering those.

This is where the code needs some updates:

...
{% set my_tags = blog_tags('default', 20) %} {# grab 20 tags from the default blog #}
{% set posts = blog_recent_posts('default', 100 ) %} {# grab 100 of the most recent posts from default blog regardless of their topic #}
{% for item in my_tags %} {# for each tag in the list of 20 tags #}

    {% for post in posts %} {# for each post in the list of 100 posts regardless of their tag #}
        {% if loop.index > 1 %} {# skip the first post out of 100 #}

            <div class="post-item {{ item.slug }}"> {# add the current tag's slug to the div. It will be the same for every post in this loop because we're looping through every tag and then re-looping through every post for each tag. #}
...            

Haven't used isotopejs but there's definitely an easier and more efficient way to get accurate tags on every post's div so you can hide/show them. 

Based on isotope's documentation here: https://isotope.metafizzy.co/filtering.html

You should be able to do this just by adding all of the topic slugs to each of the 100 posts. 
So your code would look more like this:

 <div class="post-listing isotope">
     
      {% set posts = blog_recent_posts('default', 100 ) %} {# grab 100 of the most recent posts from default blog regardless of their topic #}

          {% for post in posts %} {# for each post in the list of 100 posts regardless of their tag #}

             {% if loop.index > 1 %} {# skip the first post out of 100 #}
                {% set post_tag_slugs = [] %}
                {% for tag in post.topic_list %}
                  {% do post_tag_slugs.append(tag.slug) %}
                {% endfor %}

                  <div class="post-item {% for tag_slug in post_tag_slugs %}{{ tag_slug }} {% endfor %}"> {# add all of the topic slugs for all of the topics this post is in #}

                    <article class="blog-index__post-wrapper">
                      <div class="blog-index__post">
                        {% if post.post_list_summary_featured_image %}
                        <a class="blog-index__post-image" href="{{ post.absolute_url }}">
                          <img src="{{ post.post_list_summary_featured_image }}" class="" alt="{{ post.featured_image_alt_text | escape }}">
                        </a>
                        {% endif %}
                        <div class="blog-index__post-content">
                          <div>
                            {% set featured_tag = post.topic_list | first %}
                            {% if featured_tag %}
                              <span class="blog-index__post-preheader">{{ featured_tag }}</span>
                            {% endif %}
                            <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
                            {% if content_group.show_summary_in_listing %}
                              <p>{{ post.meta_description | default(post.post_summary, true) | truncatehtml(150, '...', false) }}</p>
                            {% endif %}
                          </div>
                          <a class="more-link" href="{{ post.absolute_url }}">Read More</a>
                        </div>
                      </div>
                    </article>
                    
                  </div>
               {% endif %}
           {% endfor %}
    
    </div>

Then all of your topics are in the post-item element's class list and you can hide/show items based on that.

Positive side effect aside from performance - if  you plan to do any sorting with isotope it will visually look better/make more sense this way to the user.

Happy Coding!

[ESobey]

 I was if there is a feature in hubspot  in which you can add to the landing page, like a menu bar which you click and goes between different sections.