Side-by-Side Image and Text Column in Blog

[CCioc]

Hey,

I am trying to write an article for my blog, and I wanted to add some images in to space things out a bit. I cannot, for the life of me, figure out how to add an image, but leave room to the side of it for text.

The default way is I can add an image, adjust the size to fit in the text, but I cannot get the text to sit to the right of the image, only below or above it. 
Ideally, the text would be to the right of the image for PC and larger browsers, and above the text on mobile.

If anyone knows how to add in the columns (like you would on the website when adding sections) with an image+text that would be great!

[CCioc]

Hey, 

So I was able to figure out how to wrap text around an image. When you select the image there's a toolbar that appears above it with some alignment options for the image around the nearest text. I was able to make a much better looking article because I found that. 

I do actually have another question though. My website works fine on a computer, but for some reason on mobile the header is all jumped together. I've tried resizing my logo but it didn't help.

I'm using the Trainer theme, which is geared towards Independent Personal Trainers like myself. In the themes header layout there are 3 static modules, the logo, navigation, and search features. I have added a social link module as well, though I would rather avoid removing it, I don't think that would solve the problem.

Here is an image of the website on mobile. You can see it's impossible to use. Is there any way to go into the design manager for the theme and take away the search feature? I have get little experience with technical coding in HTML especially... Is there any other way to adjust how the layout is on mobile? 

 

Thank you in advance! 

- Chris

[Anton · Accepted solution]

Hey @CCioc, 

while you can add an image via rich-text, I don't recommend it. 

Du to how the blog drag&drop works, I'd recommend to create a simple custom module and use it for such "two column" layouts. 

Here's a basic code you can use for this:

module.html:

<div class="twoColWrapper">
  {# image #}
  {% if module.image.src %}
  <div class="imageWrapper">
	{% set sizeAttrs = 'width="{{ module.image.width|escape_attr }}" height="{{ module.image.height|escape_attr }}"' %}
	{% if module.image.size_type == 'auto' %}
		{% set sizeAttrs = 'width="{{ module.image.width|escape_attr }}" height="{{ module.image.height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
	{% elif module.image.size_type == 'auto_custom_max' %}
		{% set sizeAttrs = 'width="{{ module.image.max_width|escape_attr }}" height="{{ module.image.max_height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
	{% endif %}
	 {% set loadingAttr = module.image.loading != 'disabled' ? 'loading="{{ module.image.loading|escape_attr }}"' : '' %}
	<img src="{{ module.image.src|escape_url }}" alt="{{ module.image.alt|escape_attr }}" {{ loadingAttr }} {{ sizeAttrs }}>
  </div>
  {% endif %}
  {# content #}
  {% unless module.content == "" %}
    <div class="contentWrapper">
	  {% inline_rich_text field="content" value="{{ module.content }}" %}
  </div>
  {% endunless %}
</div>

module.css:

.twoColWrapper{
  display:flex;
  flex-direction: column;
  gap: 32px;
}
.twoColWrapper .imageWrapper, .twoColWrapper .contentWrapper{
  max-width:100%;
  height:auto;
}

@media screen and (min-width:1024px){
  .twoColWrapper{
	flex-direction:row;
  }
}

the fields:

You can add quite a lot more options to this if you need

best, 

Anton

[CCioc]

Awesome dude thank you! Appreciate you including the code, I really don't know how to code well enough for simple things like this. 

[kennedyp]

Hi @CCioc! Welcome to the Community-- happy to have you here 😊

Can you give some more detail about what blog article template you are using? Any screenshots of the editor would be helpful! Often the formatting of text and images is limited by the template and they are all different! 

Best,

Kennedy