CMS Development

ElineTribes
Miembro

Text over image

resolver

Hi Guys, 

 

I've puzzled and read so much about Hubspot and now I just really don't understand anything anymore. I've created a landingpage, just with a simple 'image' module on top (below image & rich text and CTA), but now I want to have text on the image, just a title of the page. no idea how i can make this happen and i've tried everything that's there to find on this community and internet but every HTML and CSS class nothing works.. so i must be doing something wrong 🙂 

 

Is there a simple solution for this in hubspot for dummies' language? 🙂 

0 Me gusta
1 Soluciones aceptada
AntonB
Solución
Participante

Text over image

resolver

Hi @ElineTribes,

there are some different ways that will get this to work.

In my opinion the easiest(and cleanest) one would be to "write" a custom module. It's easier than it sounds 😉

 

 

Simply create a new module and give it to widgets/modules

- an image one

and

- a (rich)text one

 

the image snippet looks something like this:

 

{% if module.image_field.src %}
	<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" width="{{ module.image_field.width }}" height="{{ module.image_field.height }}">
{% endif %}

 

 

and the text one something like this:

 

{% inline_text field="text_field" value="{{ module.text_field }}" %}

 

to get the image "behind" the text you should add the image snippet to an inline background-image style. Since a background-image doesn't need an alt-tag or sizes your code should look like this:

<div class="row" id="my-pretty-background-image-wrapper" style="{% if module.image_field.src %}background-image:url({ module.image_field.src }});{% endif %}">
<div class="container"> 
<div class="span12">
<div class="my-pretty-headline">
<p>{{ module.text_field }}</p>
</div>
</div>
</div> 
</div>

 

also should consider to style the image via CSS and give it a cover-size

#my-pretty-background-image-wrapper{
background-size:cover;
background-position:center center;
}

regards

Anton

 

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

 

Ver la solución en mensaje original publicado

0 Me gusta
3 Respuestas 3
AntonB
Solución
Participante

Text over image

resolver

Hi @ElineTribes,

there are some different ways that will get this to work.

In my opinion the easiest(and cleanest) one would be to "write" a custom module. It's easier than it sounds 😉

 

 

Simply create a new module and give it to widgets/modules

- an image one

and

- a (rich)text one

 

the image snippet looks something like this:

 

{% if module.image_field.src %}
	<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" width="{{ module.image_field.width }}" height="{{ module.image_field.height }}">
{% endif %}

 

 

and the text one something like this:

 

{% inline_text field="text_field" value="{{ module.text_field }}" %}

 

to get the image "behind" the text you should add the image snippet to an inline background-image style. Since a background-image doesn't need an alt-tag or sizes your code should look like this:

<div class="row" id="my-pretty-background-image-wrapper" style="{% if module.image_field.src %}background-image:url({ module.image_field.src }});{% endif %}">
<div class="container"> 
<div class="span12">
<div class="my-pretty-headline">
<p>{{ module.text_field }}</p>
</div>
</div>
</div> 
</div>

 

also should consider to style the image via CSS and give it a cover-size

#my-pretty-background-image-wrapper{
background-size:cover;
background-position:center center;
}

regards

Anton

 

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

 

0 Me gusta
Kew99
Participante

Text over image

resolver

I know it's a long shot because it's been a couple years but I'm having the same problem; I don't understand this part: 

  • "to get the image "behind" the text you should add the image snippet to an inline background-image style. Since a background-image doesn't need an alt-tag or sizes your code should look like this:"

Where do you put that code? I think I've made the module with text and image snippets but I don't understand what to do next. Do I make another background image module and add the code snippet for the module to the sytle field in the module editor?

0 Me gusta
ElineTribes
Miembro

Text over image

resolver

Thanks AntonB! 

 

That's a great help!! 

0 Me gusta