my-section.yml

---
# Name of the section displayed in the editor UI
# (only if keep_name is set to true)
name: "Texte + image"

# By default, the first text type setting will be used as
# the name of the section in the editor UI.
# To keep the name of the section instead, uncomment the following line.
# keep_name: true

# Icon of the section in the editor UI
# Values: header, default, slide, text, image_text, list, footer
icon: image_text

# By default, the first image_picker type setting will be used
# as the icon of the section in the editor UI.
# To keep the icon of the section instead, uncomment the following line.
# keep_icon: true

# Definition of the settings:
# A setting type can be one of the following values: text, image_picker, checkbox, radio, select, url, hint, content_type.
# Please visit: https://doc.locomotivecms.com/docs/json-definition for more explanation.
settings:
- label: "Titre"
  id: title
  type: text
  # html: true
  # line_break: true

- label: "Sous-Titre"
  id: sub_title
  type: text
  # html: true
  # line_break: true

- label: "Texte"
  id: body
  type: text
  html: true
  # line_break: true

- label: "Image"
  id: image
  type: image_picker

- label: "Image en plein largeur ?"
  id: full_width_image
  type: checkbox
  default: false

- label: "Légende Image"
  id: legend
  type: text
  # html: true
  # line_break: true

- label: "Disposition de l'image"
  id: layout
  type: select
  options:
  - label: Centre
    value: center
  - label: Gauche
    value: left
  - label: Droite
    value: right

- label: "Fond gris ?"
  id: has_dark_background
  type: checkbox
  default: false

- label: "Caché ?"
  id: is_hidden
  type: checkbox
  default: false

# Definition of the blocks.
# You can define as many types of blocks as you want.
blocks: []

# By default, in the editor UI, blocks will be listed below the "Content" title.
# The title can be changed with the following property:
# blocks_label: "My list of items"

# Presets can be seen as different versions of a same section.
# Useless if the section is not aimed to be used along with section_dropzone liquid tag
presets:
  - name: "Texte + image"
    category: "Contenu"
    settings:
      title: "Titre"
      image: "/samples/images/default.svg"
      legend: "Légende"
    blocks: []
---
<div id="{{ section.anchor_id }}" class="section image-text-section {% if section.settings.has_dark_background %}section--dark{% endif %}{% if section.settings.is_hidden %}is-hidden{% endif %}" {{ section.locomotive_attributes }}>
  <div class="container">

    {% capture 'text_html' %}
      <h2 class="section-title">{{ section.settings.title }}</h2>

      <span class="is-hidden">{{ section.settings.sub_title }}</span>
      <h3 class="section-sub-title mt-2">{{ section.settings.sub_title }}</h3>

      <div class="section-text-body mt-6">
        {{ section.settings.body }}
      </div>
    {% endcapture %}

    {% capture 'image_html' %}
      <div class="image-text-image mt-6">
        <figure class="image {% if section.settings.full_width_image %}image--full-width{% endif %}">
          <img src="{{ section.settings.image | resize: '1024x>' }}" />
        </figure>
      </div>
      <div class="image-text-legend">{{ section.settings.legend }}</div>
    {% endcapture %}

    {% assign layout = section.settings.layout | default: 'center' %}

    {% case layout %}
    {% when 'center' %}
      {{ text_html }}      
      {{ image_html }}   
    {% when 'left' %}   
      <div class="columns">
        <div class="column is-half">          
          {{ image_html }} 
        </div>
        <div class="column has-text-left">          
          {{ text_html }}
        </div>        
      </div>
    {% when 'right' %}   
      <div class="columns">
        <div class="column is-half has-text-left">          
          {{ text_html }}
        </div>
        <div class="column">          
          {{ image_html }} 
        </div>
      </div>
    {% endcase %}
  </div>
</div>