CMS Development

TSygut
Member | Partner
Member | Partner

Blog content

Hi 🙂

I have problem with disappearing content while I'm editing blog styles. When I change any style in page editor, blog content disappear and after page refresh it appear again.

{{content}} shows these values (Page 1 null after changing styles).

Do you know how to fix it ? 

Thank you in advance:)

 

image.png

image (1).png

  

  

0 Upvotes
10 Replies 10
Oezcan
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Blog content

Hey @TSygut ,

 

I find this: https://developers.hubspot.com/docs/cms/hubl/variables#blog-variables

Maybe it will work with page_meta.name:

Oezcan_0-1641823712925.png

 

Best regards,

Özcan

 

 


check
Did my post help answer your query? Help the Community by marking it as a solution

Oezcan
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Blog content

I would still have an idea that could work for your class t-blog-banner-image.

You could use, with the choice module display grid or flex to control the positioning with the class instead of having it fade in and out.

Best regards,

Özcan


check
Did my post help answer your query? Help the Community by marking it as a solution

0 Upvotes
Oezcan
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Blog content

Oh wow, I think I got it now!

 

You put all the tags between the if queries and maybe that's why your content needs reload.

 

I would recommend rewriting the code again and put the "module.banner_layout" in your classes!

(I use a choice module with values)


Example:

 

<div class = "{{ module.banner_layout }}">

 

 

And so that the code is less, you can build something like that.

This is just a short example:

 

<div class = "{{module.banner_layout}}">
  <img src="{{module.image.image.src}}" alt = "{{module.image.image.alt}}" {{loadingAttr}} {{sizeAttrs}}>
  <div>
    {% if module.banner_layout == "simple_banner" %}
    <p> {{module.text.above_header}} </p>
    <h1> {{module.text.h1_header}} </h1>
    {% elif module.banner_layout == "_banner" %}
    <h1> {{module.text.h1_header}} </h1>
    <p> {{module.text.subline}} </p>
    {% endif %}
  </div>
  <div>
    {{logo}}
  </div>
</div>

 

 

What you can do in your code is e.g. like this:

 

<div class="container">
  {% if module.banner_layout == "banner" %}
  <div class="t-blog-banner-image" style="background-image: url('{{ module.banner_image.src }}')">
    {% endif  %}
    <div class="t-blog-banner-wrapper">
      <h1 class="t-blog-banner-wrapper__header">{{ content.name }}</h1>
    </div>
    {% if module.banner_layout == "banner" %}
  </div>
  {% endif %}
  <div class="t-blog-simple-banner-wrapper">
    {% if module.banner_layout == "simple_banner" %}
    <div class="t-blog-simple-banner-wrapper__image" style="background-image: url('{{ module.banner_image.src }}')"></div> 
    {% endif %}     
    <div class="t-blog-{{module.banner_layout}}-wrapper__information">
      <div class="portfolio-description">
        <h5>{{ module.project.text_box_title }}</h5>
        <div>{{ module.project.text_box_description }}</div>
      </div>
      <div class="what-we-do-description">
        <h5>{{ module.text_box_2.text_box_title }}</h5>
        <div>{{ module.text_box_2.text_box_description }}</div>
      </div>
      <div class="client-description">
        <h5>{{ module.text_box_3.text_box_title }}</h5>
        <div>{{ module.text_box_3.text_box_description }}</div>
      </div>
      <div class="button-wrapper">
        {% cta guid="{{ module.cta.cta_field }}" %}
      </div>
    </div>
    <div class="portfolio-content-post-body">
      {{ content.post_body }}
    </div>
  </div>

 

 

I really hope that I could help

 

Best regards,

Özcan


check
Did my post help answer your query? Help the Community by marking it as a solution

TSygut
Member | Partner
Member | Partner

Blog content

Thank you very much for your answer (I tried put content.name albo body over if statement) - still dissapearing. When I use content.name in template ( not in module) everything works fine. I tried also add content.name to variable and send this variable to module ( still not working) I'm not sure that's possible to display correctly blog content in module. 

0 Upvotes
Oezcan
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Blog content

Hey @TSygut , hey @dennisedson ,

luckily it has never happened to me.
@TSygut have you maybe tried to place a p tag between the div tag and then style it? In this case you don't have to use a z-index.

Oezcan_0-1641396825533.png


The module is missing in your {{content}} before that maybe that's the problem
Should look like this:
<p>{{ module.content }}</p> 

Another thought of mine would be that multiple developers accidentally overwrite the code.

The code looks okay at the moment.

Best regards

Özcan




check
Did my post help answer your query? Help the Community by marking it as a solution

TSygut
Member | Partner
Member | Partner

Blog content

Someone have any idea? Theme challange will finish soon and we can't fix it. We have team with big experience in HubSpot and no one knows what's the problem ... 

0 Upvotes
dennisedson
Community Manager
Community Manager

Blog content

@TSygut ,

Can you post some code? 

It is just in the edit view?

@Oezcan 👋

Ever experience this?

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
0 Upvotes
TSygut
Member | Partner
Member | Partner

Blog content

Yes it is just in edit view ... After refresh it works correctly.

{% if module.banner_layout == "simple_banner" %}
  <div class="container">

    <div class="t-blog-banner-wrapper">
      <h1 class="t-blog-banner-wrapper__header">{{ content.name }}</h1>
    </div>
    <div class="t-blog-simple-banner-wrapper">
      <div class="t-blog-simple-banner-wrapper__image" style="background-image: url('{{ module.banner_image.src }}')"></div>
      <div class="t-blog-simple-banner-wrapper__information">
        <div class="portfolio-description">
          <h5>{{ module.project.text_box_title }}</h5>
          <div>{{ module.project.text_box_description }}</div>
        </div>
        <div class="what-we-do-description">
          <h5>{{ module.text_box_2.text_box_title }}</h5>
          <div>{{ module.text_box_2.text_box_description }}</div>
        </div>
        <div class="client-description">
          <h5>{{ module.text_box_3.text_box_title }}</h5>
          <div>{{ module.text_box_3.text_box_description }}</div>
        </div>
        <div class="button-wrapper">
          {% cta guid="{{ module.cta.cta_field }}" %}
        </div>
      </div>
      <div class="portfolio-content-post-body">
        {{ content.post_body }}
      </div>
    </div>
  </div>
{% endif %}
{% if module.banner_layout == "banner" %}
  <div class="t-blog-banner-image" style="background-image: url('{{ module.banner_image.src }}')">
   <div class="container">
    <div class="t-banner-normal-wrapper">
      <div class="t-banner-normal-wrapper__header">
        <h1 class="t-banner-header">{{ content.name }}</h1>
      </div>
      <div class="t-banner-normal-wrapper__information">
        <div class="portfolio-description">
          <h5>{{ module.project.text_box_title }}</h5>
          <div>{{ module.project.text_box_description }}</div>
        </div>
        <div class="what-we-do-description">
          <h5>{{ module.text_box_2.text_box_title }}</h5>
          <div>{{ module.text_box_2.text_box_description }}</div>
        </div>
        <div class="client-description">
          <h5>{{ module.text_box_3.text_box_title }}</h5>
          <div>{{ module.text_box_3.text_box_description }}</div>
        </div>
        <div class="button-wrapper">
          {% cta guid="{{ module.cta.cta_field }}" %}
        </div>
      </div>
    </div>
  </div>
</div>
  <div class="container">
    <div class="portfolio-content-post-body">
      {{ content.post_body }}
    </div>
  </div>
{% endif %}

 

 

0 Upvotes
webdew
Guide | Diamond Partner
Guide | Diamond Partner

Blog content

Hi @TSygut ,

 As I can see you are using content over the image and maybe when you add the content,it hides behind the image. If this would be the case then you can use z-index:1; 

If still the issue persists please share the link of your page, we will check and could give the proper solution accordingly.

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

0 Upvotes
TSygut
Member | Partner
Member | Partner

Blog content

Hi, 

Everything dissapear (blog author name, blog content name ... etc) - expect my own code. 

https://turbo.clickray.eu/blog/turbo-theme-demo-blog-single-1

0 Upvotes