CMS Development

dbarbara
投稿者

Display a featured image as a background image

解決

Am trying to get a featured image to show as a background image, and need to figure out the HubL to call a featured image from inside some HTML.

 

Thanks to @Jsum for part of the answer here

 

This is what I have so far, but not sure how to write  'background: url '  so it calls the image. 

 

 

{% for feature_item in featured_topic %}

{% image_src "image_src" %}

<div class="featured-post">
<div class="span6"> 

{% if feature_item.post_list_summary_featured_image %}

<span style='background: url ( {% image_src "{{ feature_item.post_list_summary_featured_image }}" %} ) center center no-repeat; background-size: cover;' class="hs-featured-image featured-post-image-1">

</span>
{% endif %}
</div>

 

0 いいね!
1件の承認済みベストアンサー
Jsum
解決策
キーアドバイザー

Display a featured image as a background image

解決

You are using a span tag which is an inline element (like text). It can't be styled like block elements. Do you have "display: block;" assigned to the span tag in your css? if not you can try that or use a div element instead of a span tag which is probably better syntax.

 

Also, regardless of element used, a height and a width need to be set other wise nothing is keeping it from being 0x0.

 

hopefully ones of these helps. Also quotations within the url value of the background attribute are not required. Using them shouldn't have anything to do with your issue, and your code doesn't appear to have any errors. The below just has the quotation marks adjusted. 

{% if feature_item.post_list_summary_featured_image %}				
<span style="background: url({{ feature_item.post_list_summary_featured_image }}) center center no-repeat; background-size: cover;"class="hs-featured-image featured-post-image-1">					
</span>
{% endif %}

元の投稿で解決策を見る

0 いいね!
9件の返信
martin3walker
参加者

Display a featured image as a background image

解決

I want to use the featured image of my latest posts for as the background for a hero banner for my blog. I put a hubl module over the listing template.

 

HubL ModuleHubL Module

 

And, I'm trying to use the following code within that module to display the featured image from the lastest post.

{% for post in posts %}
    {% if loop.index = 1 %}
    
        <div class=blog-hero style="background:url('{{ content.featured_image }}') top center no-repeat; background-size: cover;"></div>
        
    {% endif %}
{% endfor %}

Any idea where I'm going wrong?

 

0 いいね!
Jsum
キーアドバイザー

Display a featured image as a background image

解決

Your looping for post in posts but your targeting content.featured_image. It shouldbe post.featured_image

Anonymous
適用対象外

Display a featured image as a background image

解決

Can someone post an update on how to do this under the new CMS theme structure?  Set feature Image as Blog Post header/banner background image.

0 いいね!
JessicaH
元HubSpot社員
元HubSpot社員

Display a featured image as a background image

解決

Hi @Anonymous,

 

Thanks for reaching out.

@Jsum would you be able to assist with this?

 

Thanks!

Jess 


Wusstest du, dass es auch eine DACH-Community gibt?
Nimm an regionalen Unterhaltungen teil, in dem du deine Spracheinstellungen änderst !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 いいね!
martin3walker
参加者

Display a featured image as a background image

解決

Thanks!

0 いいね!
dbarbara
投稿者

Display a featured image as a background image

解決

Some progress! Have gotten the image URL to show up when looking at the source in dev tools, but it's not displaying.

 

{% if feature_item.post_list_summary_featured_image %}				
<span style='background: url("{{ feature_item.post_list_summary_featured_image }}") center center no-repeat; background-size: cover;' class="hs-featured-image featured-post-image-1">					
</span>
{% endif %}

 

 

0 いいね!
Jsum
解決策
キーアドバイザー

Display a featured image as a background image

解決

You are using a span tag which is an inline element (like text). It can't be styled like block elements. Do you have "display: block;" assigned to the span tag in your css? if not you can try that or use a div element instead of a span tag which is probably better syntax.

 

Also, regardless of element used, a height and a width need to be set other wise nothing is keeping it from being 0x0.

 

hopefully ones of these helps. Also quotations within the url value of the background attribute are not required. Using them shouldn't have anything to do with your issue, and your code doesn't appear to have any errors. The below just has the quotation marks adjusted. 

{% if feature_item.post_list_summary_featured_image %}				
<span style="background: url({{ feature_item.post_list_summary_featured_image }}) center center no-repeat; background-size: cover;"class="hs-featured-image featured-post-image-1">					
</span>
{% endif %}
0 いいね!
dbarbara
投稿者

Display a featured image as a background image

解決

Thanks for the input on the code.

 

I did realize that the image wasn't displaying because there was no content inside <span></span>  When I added "display: block" as well as a min-height and "width: 100%" everything worked fine. 

 

What's built now is a nice card layout with an image on the left that adjusts based on the viewport width (vs. just reducing both width and height). It can be seen here: http://cloudburst.astadia.com/blog

 

 

 

Jsum
キーアドバイザー

Display a featured image as a background image

解決

@dbarbara that looks great!

0 いいね!