Image not appearing in Text columns w/ images section

Store Design
1

I’ve imported all css that is necessary for this section but the image refuses to display!

Any help is much appreciated :slightly_smiling_face:

gthegreat_0-1662242558121.png
gthegreat_0-1662242558121.png1617×861 121 KB

https://3glwfz9nemjg7zze-58572865730.shopifypreview.com

password: plswork

@LitCommerce

1 Like
2

@gthegreat

can you please send image with text section code so i will check and update

3

Hi @gthegreat ,

Please send me the code of the section, I will help you check it

4

{{ ‘theme.css’ | asset_url | stylesheet_tag }}

#TextColumnImage-feature-columns-1 { max-width: 613.3333333333333px; max-height: 345px; } #TextColumnImageWrapper-feature-columns-1 { max-width: 613.3333333333333px; }
{% if section.settings.title != blank %}

{{ section.settings.title | escape }}

{% endif %}
{%- assign grid_item_width = 'medium-up--one-third' -%} {%- assign max_height = 345 -%} {% case section.blocks.size %} {% when 1 %} {%- assign grid_item_width = 'medium-up--one-half' -%} {%- assign max_height = 530 -%} {% when 2 %} {%- assign grid_item_width = 'medium-up--one-half' -%} {%- assign max_height = 530 -%} {% when 4 %} {%- assign grid_item_width = 'medium-up--one-half' -%} {%- assign max_height = 530 -%} {% endcase %} {% for block in section.blocks %} {% if section.blocks.size == 5 and forloop.index < 3 %} {%- assign column_width = 'medium-up--one-half' -%} {%- assign max_height = 530 -%} {% else %} {%- assign column_width = grid_item_width -%} {% endif %}
{% if block.settings.enable_image %} {% if block.settings.image != blank %} {% capture img_id %}TextColumnImage-{{ block.id }}{% endcapture %} {% capture wrapper_id %}TextColumnImageWrapper-{{ block.id }}{% endcapture %} {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {% include 'image-style', image: block.settings.image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
{{ block.settings.image.alt | escape }}

{{ block.settings.image | img_url: '480x480', scale: 2 | img_tag: block.settings.image.alt, 'feature-row__image' }}

{% else %}

{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}

{% endif %} {% endif %} {% if block.settings.title != blank %}

{{ block.settings.title | escape }}

{% endif %} {% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}

{% if block.settings.button_label != blank and block.settings.button_link != blank %}
{%- capture ariaLabel -%}
{{- block.settings.button_label -}}
{%- if block.settings.button_link.type == ‘frontpage_link’ -%}
: {{ ‘homepage.general.title’ | t -}}
{%- elsif block.settings.button_link.type == ‘catalog_link’ -%}
: {{ ‘collections.catalog.title’ | t -}}
{%- elsif block.settings.button_link.object.title -%}
: {{ block.settings.button_link.object.title -}}
{%- endif -%}
{%- endcapture -%}


{{- block.settings.button_label | escape -}}

{% endif %}

{% endfor %}

{% if section.blocks.size == 0 %}
{% include ‘no-blocks’ %}
{% endif %}

[email removed] [email removed]

5

@gthegreat

yes, please add this code

{{ 'theme.css' | asset_url | stylesheet_tag }}

    {% if section.settings.title != blank %}
      

        ## {{ section.settings.title | escape }}
      

    {% endif %}
 
    
      {%- assign grid_item_width = 'medium-up--one-third' -%}
      {%- assign max_height = 345 -%}
      {% case section.blocks.size %}
        {% when 1 %}
          {%- assign grid_item_width = 'medium-up--one-half' -%}
          {%- assign max_height = 530 -%}
        {% when 2 %}
          {%- assign grid_item_width = 'medium-up--one-half' -%}
          {%- assign max_height = 530 -%}
        {% when 4 %}
          {%- assign grid_item_width = 'medium-up--one-half' -%}
          {%- assign max_height = 530 -%}
      {% endcase %}
      {% for block in section.blocks %}
        {% if section.blocks.size == 5 and forloop.index < 3 %}
          {%- assign column_width = 'medium-up--one-half' -%}
          {%- assign max_height = 530 -%}
        {% else %}
          {%- assign column_width = grid_item_width -%}
        {% endif %}
        

          {% if block.settings.enable_image %}
            {% if block.settings.image != blank %}
              {% capture img_id %}TextColumnImage-{{ block.id }}{% endcapture %}
              {% capture wrapper_id %}TextColumnImageWrapper-{{ block.id }}{% endcapture %}
              {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              {% include 'image-style', image: block.settings.image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
              

                

                  
                

              

              
            {% else %}
              

                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
              

            {% endif %}
          {% endif %}
          {% if block.settings.title != blank %}
            ### {{ block.settings.title | escape }}
          {% endif %}
          {% if block.settings.text != blank %}
            {{ block.settings.text }}

          {% endif %}
 
          {% if block.settings.button_label != blank and block.settings.button_link != blank %}
            {%- capture ariaLabel -%}
              {{- block.settings.button_label -}}
              {%- if block.settings.button_link.type == 'frontpage_link' -%}
                : {{ 'homepage.general.title' | t -}}
              {%- elsif block.settings.button_link.type == 'catalog_link' -%}
                : {{ 'collections.catalog.title' | t -}}
              {%- elsif block.settings.button_link.object.title -%}
                : {{ block.settings.button_link.object.title -}}
              {%- endif -%}
            {%- endcapture -%}
 
            
              {{- block.settings.button_label | escape -}}
            
          {% endif %}
        

      {% endfor %}
    

 
    {% if section.blocks.size == 0 %}
      {% include 'no-blocks' %}
    {% endif %}
6

Hi @gthegreat ,

Please change all code:

{{ 'theme.css' | asset_url | stylesheet_tag }}

    {% if section.settings.title != blank %}
      

        ## {{ section.settings.title | escape }}
      

    {% endif %}
 
    
      {%- assign grid_item_width = 'medium-up--one-third' -%}
      {%- assign max_height = 345 -%}
      {% case section.blocks.size %}
        {% when 1 %}
          {%- assign grid_item_width = 'medium-up--one-half' -%}
          {%- assign max_height = 530 -%}
        {% when 2 %}
          {%- assign grid_item_width = 'medium-up--one-half' -%}
          {%- assign max_height = 530 -%}
        {% when 4 %}
          {%- assign grid_item_width = 'medium-up--one-half' -%}
          {%- assign max_height = 530 -%}
      {% endcase %}
      {% for block in section.blocks %}
        {% if section.blocks.size == 5 and forloop.index < 3 %}
          {%- assign column_width = 'medium-up--one-half' -%}
          {%- assign max_height = 530 -%}
        {% else %}
          {%- assign column_width = grid_item_width -%}
        {% endif %}
        

          {% if block.settings.enable_image %}
            {% if block.settings.image != blank %}
              {% capture img_id %}TextColumnImage-{{ block.id }}{% endcapture %}
              {% capture wrapper_id %}TextColumnImageWrapper-{{ block.id }}{% endcapture %}
              {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              {% include 'image-style', image: block.settings.image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
              

                

                  
                

              

              
            {% else %}
              

                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
              

            {% endif %}
          {% endif %}
          {% if block.settings.title != blank %}
            ### {{ block.settings.title | escape }}
          {% endif %}
          {% if block.settings.text != blank %}
            {{ block.settings.text }}

          {% endif %}
 
          {% if block.settings.button_label != blank and block.settings.button_link != blank %}
            {%- capture ariaLabel -%}
              {{- block.settings.button_label -}}
              {%- if block.settings.button_link.type == 'frontpage_link' -%}
                : {{ 'homepage.general.title' | t -}}
              {%- elsif block.settings.button_link.type == 'catalog_link' -%}
                : {{ 'collections.catalog.title' | t -}}
              {%- elsif block.settings.button_link.object.title -%}
                : {{ block.settings.button_link.object.title -}}
              {%- endif -%}
            {%- endcapture -%}
 
            
              {{- block.settings.button_label | escape -}}
            
          {% endif %}
        

      {% endfor %}
    

 
    {% if section.blocks.size == 0 %}
      {% include 'no-blocks' %}
    {% endif %}
7

@KetanKumar @LitCommerce @AvadaCommerce

It did not work:/

Do you all need the section schema aswell maybe ?

gthegreat_0-1662311677427.png
gthegreat_0-1662311677427.png1880×827 73.9 KB

Thank you for helping

1 Like
8

Hi @gthegreat ,

Please change all code:

{{ 'theme.css' | asset_url | stylesheet_tag }}

    {% if section.settings.title != blank %}
      

        ## {{ section.settings.title | escape }}
      

    {% endif %}
 
    
      {%- assign grid_item_width = 'medium-up--one-third' -%}
      {%- assign max_height = 345 -%}
      {% case section.blocks.size %}
        {% when 1 %}
          {%- assign grid_item_width = 'medium-up--one-half' -%}
          {%- assign max_height = 530 -%}
        {% when 2 %}
          {%- assign grid_item_width = 'medium-up--one-half' -%}
          {%- assign max_height = 530 -%}
        {% when 4 %}
          {%- assign grid_item_width = 'medium-up--one-half' -%}
          {%- assign max_height = 530 -%}
      {% endcase %}
      {% for block in section.blocks %}
        {% if section.blocks.size == 5 and forloop.index < 3 %}
          {%- assign column_width = 'medium-up--one-half' -%}
          {%- assign max_height = 530 -%}
        {% else %}
          {%- assign column_width = grid_item_width -%}
        {% endif %}
        

          {% if block.settings.enable_image %}
            {% if block.settings.image != blank %}
              {% capture img_id %}TextColumnImage-{{ block.id }}{% endcapture %}
              {% capture wrapper_id %}TextColumnImageWrapper-{{ block.id }}{% endcapture %}
              {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              {% include 'image-style', image: block.settings.image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
              

                

                  
                

              

              
            {% else %}
              

                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
              

            {% endif %}
          {% endif %}
          {% if block.settings.title != blank %}
            ### {{ block.settings.title | escape }}
          {% endif %}
          {% if block.settings.text != blank %}
            {{ block.settings.text }}

          {% endif %}
 
          {% if block.settings.button_label != blank and block.settings.button_link != blank %}
            {%- capture ariaLabel -%}
              {{- block.settings.button_label -}}
              {%- if block.settings.button_link.type == 'frontpage_link' -%}
                : {{ 'homepage.general.title' | t -}}
              {%- elsif block.settings.button_link.type == 'catalog_link' -%}
                : {{ 'collections.catalog.title' | t -}}
              {%- elsif block.settings.button_link.object.title -%}
                : {{ block.settings.button_link.object.title -}}
              {%- endif -%}
            {%- endcapture -%}
 
            
              {{- block.settings.button_label | escape -}}
            
          {% endif %}
        

      {% endfor %}
    

 
    {% if section.blocks.size == 0 %}
      {% include 'no-blocks' %}
    {% endif %}
1 Like
9

@gthegreat

yes, please share it

1 Like
10

@LitCommerce Hey the image appears now :slightly_smiling_face: !! But do you know how to make it look like this on mobile?

gthegreat_0-1662397538717.png
gthegreat_0-1662397538717.png1033×973 140 KB

Right now it looks like this on mobile

gthegreat_1-1662397607576.png
gthegreat_1-1662397607576.png1477×877 57.1 KB

@KetanKumar

https://enp8jzsz10sea89j-58572865730.shopifypreview.com

password : plswork

11

@LitCommerce

Hey, I got it to look good on mobile now !! However, it stacks uncontrollably on the desktop like this :

gthegreat_0-1662425604114.png
gthegreat_0-1662425604114.png1593×1220 315 KB

Any tips on how to make it look good on desktop and mobile ? Thanks you for helping me !

12

Hi @gthegreat ,

I have checked and the code you added for theme.css file is causing this error:

Screenshot_13.png
Screenshot_13.png499×927 15 KB

You just need to remove it, everything will work fine.

1 Like