CMS Development

bstock98
Participante

Author no longer appears on blog post; coding issue

resolver

I am having an issue with my blog post template, more specifically a custom module for the blog banner. The banner was a color background before, but after changing the background to an image the blog author no longer appeared in the banner.

 

5387542770483200.jpeg

 

 

Below is the code (HUBL/HTML)  for the custom module:

 

{% if is_listing_view %}
<div class="banner-area" style="background-image:url();">
<div class="banner-image content-fill">
<img src="//cdn2.hubspot.net/hubfs/4515283/SignumBiosciences_July2018%20Theme/Images/SITE-EXPORTS_0012_FULLBLEED-02.jpg" alt="Banner Image">
</div>
<div class="page-center">
<h1>{{ group.public_title }}</h1>
</div>
</div>

{% else %}
<div class="banner-area" style="background-image:url();">
<div class="banner-image content-fill">
<img src="https://cdn2.hubspot.net/hubfs/4515283/COVER%20IMAGES/SITE-EXPORTS_0009_ELEMENTS%20Glass.jpg" alt="Banner Image">
</div>
<div class="page-center">
<h1>{{ content.name }}</h1>
<p class="date-sec">{{ content.publish_date_local_time.strftime('%b') }} {{ content.publish_date_local_time.strftime('%d') }}, {{ content.publish_date_local_time.strftime('%Y') }}</p>
<div class="banner-author">
<span class="hs-author-label">by</span>
{% if content.blog_post_author %}
<a class="author-link" href="{{ blog_author_url(group.id, content.blog_post_author.slug) }}">{{ content.blog_post_author.display_name }}</a>
{% endif %}
</div>
</div>
</div>
{% endif %}

 

 

The section in orange is the new piece of code I inserted, which seems to be causing the problem.

 

Please let me know if there is anything else that I need to include about the issue to help. Any helpful tips would be greatly appreciated.

 

Thank you!

1 Solução aceita
tjoyce
Solução
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

Author no longer appears on blog post; coding issue

resolver

@bstock98 - As suspected, the HUBL is fine and the author code is actually there, it's just being rendered behind the background image. I added the following css to the author's <a> tag and it appeared:

position:absolute;
z-index:99999;

posa.png


If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

Exibir solução no post original

0 Avaliação positiva
5 Respostas 5
tjoyce
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

Author no longer appears on blog post; coding issue

resolver

can you post a link to the preview URL so we may look at the frontend code. It might not be a HUBL issue.

0 Avaliação positiva
bstock98
Participante

Author no longer appears on blog post; coding issue

resolver
0 Avaliação positiva
tjoyce
Solução
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

Author no longer appears on blog post; coding issue

resolver

@bstock98 - As suspected, the HUBL is fine and the author code is actually there, it's just being rendered behind the background image. I added the following css to the author's <a> tag and it appeared:

position:absolute;
z-index:99999;

posa.png


If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

0 Avaliação positiva
bstock98
Participante

Author no longer appears on blog post; coding issue

resolver

Thank you so much! That made the text appear again, but now I have one final issue. 

 

The author and date now scroll over the nav bar rather than going under like the post title. I couldn't see anything obvious in the css for the post title that makes it scroll underneath. 

 

Any Ideas?

 

I really appreciate the help!

0 Avaliação positiva
bstock98
Participante

Author no longer appears on blog post; coding issue

resolver

Nevermind I figured it out. The z-index was too high, which placed it above the navbar.