Adding an image to my blog post

[yjadlaoui]

Hey there, I want to add an image to my blog page and since the blog has no modules to add, only existed modules to edit, i really need a developper's help to personnalize my blog page by adding an image to it 

thank you. 

[Oezcan · Accepted solution]

With pleasure.

Sure, you can do it like this:

<div class="yourClass">
<img src="yourImg.jpg" alt="yourImg" width="500" height="600">
<p>Your text</p>
</div>

and then give your Class a Display flex like this:

.yourClass {
 display: flex;
}

or you can do it like this.

<div style="display:flex;">
<img src="yourImg.jpg" alt="yourImg" width="500" height="600">
<p>Your text</p>
</div>

I hope, that will help!

Best regards,

Özcan

[yjadlaoui]

Thank you @Oezcan @Anton for your help 🙂 

Do you know how to put the image in a way that makes it surrounded by the blog text ? 

I would like to have the image in the left for example and my blog text is on the right of it 

best, 

Yjadlaoui

[Anton]

Hi @yjadlaoui, 

creating a text surrounding an image is online not as easy as in an text-editor(word,pages...). 

If you want something like this:

this can be done with the default blog post module. simply write your text, set it to justified(last option here)

next step: click in the place you'd like to insert your image(you can move it afterwards), select and place your image. As the last step: set the image alignment as you'd like here:

BUT: this can look very clumsy/unclean on mobile so keep this in mind. 

If you want something better/mobile friendly you will need to develop a custom blog post module which can be done but requires a lot of development compared to the default functionality. This can be a nice "futureproof" and "corporate look" feature since you can create layouts/functions exactly to your needs and make it very "marketer-friendly" but - as mentioned - is a huge thing for the developer(s) to set up. 

hope this helps.

best,

Anton

[Anton]

Hi @yjadlaoui, 

do you use a default HubSpot theme for your blog listing template, one from the marketplace or a custom coded one?

By default the only way to add an image to your listing template is via code. But there are mutliple ways how to achieve this. Also HubSpot  added the drag&drop function for blog listing templates recently - this will work only if your listing template has drag&drop options enabled).

1. directly adding the img-tag to the template

2. creating a custom module with desired functionality and inserting it in the template

3. drag&drop a img-module to the template(only possible if enabled)

All three options have their benefits and downsides.

So if you want a quick and easy solution you could go with something like 

<img src="LINK-TO-IMAGE" class="blogListingImg">

If you want something that doesn't require knowledge of code and has more options, you can create a custom module like this (there are almost no restictions)

<div class="imgWrapper" style="background-image:url('{{ module.background_img.src }}');background-size:cover;width:100vw;min-height:200px;padding:3rem auto;overflow:hidden;">
<h1>{{ module.headline }}</h1>
</div>

activating the drag&drop functionality for an exsiting listing template isn't that hard, but will most likely require further adjustments in the CSS.

If you'd like to have a more specific solution - please post the whole listing template here.

best, 

Anton

[Oezcan]

Hey @yjadlaoui ,

I have some Ideas for you:
You can use a simple img Tag like this:

<img src="yourImg.jpg" alt="yourImg" width="500" height="600">

also this:

{% image "image" %}
{% image "executive_image" label='Executive photo', alt='Photo of Brian Halligan', src='//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg', width='300' %}

or like this:

{% module "linked_image" path="@hubspot/linked_image" %}

I would recomend to use the first one, if you don´t like to use custom or default modules.

I hope i can help.
Best regards,

Özcan