Image does not show up on product page

[TrendBlend]

Hello I made a custom section with custom blocks: Oct 23 5:37 PM - Codeshare
But it results in this and there is no image, does anyone know why the image does not appear.
I'm just trying to put an image under the title which covers about 1/5th of the screen but keeps its original format (200x200px) for example but also (300x200px) the full image needs to be visible. URL: Controllable LED Curtain – TrendBlend

[nardoayala]

Hello 🙂

The issue is with the syntax you're using on the "image_url" filter:

src="{{ section.settings.image | image_url: '240x240' }}" 

That syntax was for the deprecated "img_url", for "image_url" you need to use this syntax:

src="{{ section.settings.image | image_url: width: 240, height: 240 }}" 

 
Here you have the full docs on how to work with the "image_url" filter:
- https://shopify.dev/docs/api/liquid/filters/image_url

[TrendBlend]

Hello @nardoayala ,
The image finally shows up but is very small! I got this code now, but the image needs to be a lot bigger!

<!-- Start of custom section -->
<section class="custom-image-text-block">
  <div class="container">

    <!-- Section Title -->
    <h2 class="custom-section-title">{{ section.settings.title }}</h2>

    <!-- Image and Text Wrapper -->
    <div class="image-text-wrapper" style="display: flex; flex-direction: column; align-items: center;">

      <!-- Image Block -->
      <div class="image-block" style="flex: 0 0 20%; text-align: center; margin-bottom: 20px;">
        {% if section.settings.image != blank %}
          <img 
            src="{{ section.settings.image | image_url: width: 480, height: 480 }}" 
            alt="{{ section.settings.image.alt | escape }}" 
            class="custom-image" 
            width="480" 
            height="auto" 
            style="max-width: 100%; height: auto;"> <!-- Use max-width for responsiveness -->
        {% endif %}
      </div>

      <!-- Text Blocks Container -->
      <div class="text-blocks" style="display: flex; flex-wrap: wrap; justify-content: center;">

        <!-- Loop through text blocks -->
        {% for i in (1..8) %}
          {% assign text_title = 'text_title_' | append: i %}
          {% assign text_content = 'text_content_' | append: i %}
          {% if section.settings[text_title] != blank %}
            <div class="text-block" style="flex: 1 0 30%; margin: 10px; text-align: center;">
              <h3>{{ section.settings[text_title] }}</h3>
              <p>{{ section.settings[text_content] }}</p>
            </div>
          {% endif %}
        {% endfor %}
        
      </div>
    </div>
  </div>
</section>
<!-- End of custom section -->



<!-- Custom Styles -->
<style>
  .custom-image-text-block {
    padding: 20px;
    background-color: #f9f9f9; /* Light background for contrast */
  }

  .custom-section-title {
    text-align: center;
    margin-bottom: 20px;
  }

  .image-block img {
    max-width: 100%; /* Responsive */
    height: auto; /* Maintain aspect ratio */
  }

  .text-blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center align text blocks */
  }

  .text-block {
    flex: 0 0 45%; /* Adjust width as needed */
    margin: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white; /* White background for text blocks */
  }

  /* Add media query for responsiveness */
  @media (max-width: 600px) {
    .text-block {
      flex: 0 0 100%; /* Full width on smaller screens */
    }
  }
</style>

{% schema %}
{
  "name": "Product Information Block",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Product Information"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "text_title_1",
      "label": "Text Block 1 Title",
      "default": "Feature 1"
    },
    {
      "type": "textarea",
      "id": "text_explanation_1",
      "label": "Text Block 1 Explanation",
      "default": "Explanation for feature 1."
    },
    {
      "type": "text",
      "id": "text_title_2",
      "label": "Text Block 2 Title",
      "default": "Feature 2"
    },
    {
      "type": "textarea",
      "id": "text_explanation_2",
      "label": "Text Block 2 Explanation",
      "default": "Explanation for feature 2."
    },
    {
      "type": "text",
      "id": "text_title_3",
      "label": "Text Block 3 Title"
    },
    {
      "type": "textarea",
      "id": "text_explanation_3",
      "label": "Text Block 3 Explanation"
    },
    {
      "type": "text",
      "id": "text_title_4",
      "label": "Text Block 4 Title"
    },
    {
      "type": "textarea",
      "id": "text_explanation_4",
      "label": "Text Block 4 Explanation"
    },
    {
      "type": "text",
      "id": "text_title_5",
      "label": "Text Block 5 Title"
    },
    {
      "type": "textarea",
      "id": "text_explanation_5",
      "label": "Text Block 5 Explanation"
    },
    {
      "type": "text",
      "id": "text_title_6",
      "label": "Text Block 6 Title"
    },
    {
      "type": "textarea",
      "id": "text_explanation_6",
      "label": "Text Block 6 Explanation"
    },
    {
      "type": "text",
      "id": "text_title_7",
      "label": "Text Block 7 Title"
    },
    {
      "type": "textarea",
      "id": "text_explanation_7",
      "label": "Text Block 7 Explanation"
    },
    {
      "type": "text",
      "id": "text_title_8",
      "label": "Text Block 8 Title"
    },
    {
      "type": "textarea",
      "id": "text_explanation_8",
      "label": "Text Block 8 Explanation"
    }
  ]
}
{% endschema %}

[nardoayala · Accepted solution]

You have this CSS rule in base.css that's reducing your image size:

.image-block {
  width: 20%; /* Adjust the width of the image block */
}

Do you need that for something? It seems problematic as a global style. You could overwrite it just for this specific section by adding this to your section's styles:

.custom-image-text-block .image-block {
  width: 100%;
}

[TrendBlend]

Hello @nardoayala , that was indeed the issue which I did not see. Thank you for your help! I have one other issue regarding the text placements. Again, the code is made so that I can fill in 8 titles with subtext (productinformation) around the productpicture (but not at the top since the title is there). Now I want to place each existing piece of productinformation (note that not all 8 pieces of text will be used but for the ones that are filled in) around the productpicture, with the same amount of space in between each. Kind regards,
Stef

[TrendBlend]

This is my current code:

<!-- Start of custom section -->
<section class="custom-image-text-block">
  <div class="container">

    <!-- Section Title -->
    <h2 class="custom-section-title">{{ section.settings.title }}</h2>

    <!-- Image and Text Wrapper -->
    <div class="image-text-wrapper" style="display: flex; flex-direction: column; align-items: center;">

      <!-- Image Block -->
      <div class="image-block" style="flex: 0 0 30%; text-align: center; margin-bottom: 20px;">
        {% if section.settings.image != blank %}
          <img 
            src="{{ section.settings.image | image_url: width: 360, height: 360 }}" 
            alt="{{ section.settings.image.alt | escape }}" 
            class="custom-image" 
            width="360" 
            height="auto" 
            style="max-width: 100%; height: auto;"> <!-- Use max-width for responsiveness -->
        {% endif %}
      </div>

      <!-- Text Blocks Container -->
      <div class="text-blocks" style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px;"> <!-- Flex container with gap for spacing -->

        <!-- Loop through text blocks -->
        {% for i in (1..8) %}
          {% assign text_title = 'text_title_' | append: i %}
          {% assign text_content = 'text_content_' | append: i %}
          {% if section.settings[text_title] != blank %}
            <div class="text-block" style="flex: 1 1 calc(33.333% - 20px); text-align: center;"> <!-- Responsive text block -->
              <h3>{{ section.settings[text_title] }}</h3>
              <p>{{ section.settings[text_content] }}</p>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
</section>




<!-- Custom Styles -->
<style>
  .custom-image-text-block {
    padding: 20px;
    background-color: #f9f9f9; /* Light background for contrast */
  }

  .custom-section-title {
    text-align: center;
    margin-bottom: 20px;
  }

  .image-block img {
    max-width: 100%; /* Responsive */
    height: auto; /* Maintain aspect ratio */
  }

  .text-blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center align text blocks */
  }

  .text-block {
    flex: 0 0 45%; /* Adjust width as needed */
    margin: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white; /* White background for text blocks */
  }

  /* Add media query for responsiveness */
  @media (max-width: 600px) {
    .text-block {
      flex: 0 0 100%; /* Full width on smaller screens */
    }
  }
</style>

{% schema %}
{
  "name": "Product Information Block",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Product Information"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "text_title_1",
      "label": "Text Block 1 Title",
      "default": "Feature 1"
    },
    {
      "type": "textarea",
      "id": "text_explanation_1",
      "label": "Text Block 1 Explanation",
      "default": "Explanation for feature 1."
    },
    {
      "type": "text",
      "id": "text_title_2",
      "label": "Text Block 2 Title",
      "default": "Feature 2"
    },
    {
      "type": "textarea",
      "id": "text_explanation_2",
      "label": "Text Block 2 Explanation",
      "default": "Explanation for feature 2."
    },
    {
      "type": "text",
      "id": "text_title_3",
      "label": "Text Block 3 Title"
    },
    {
      "type": "textarea",
      "id": "text_explanation_3",
      "label": "Text Block 3 Explanation"
    },
    {
      "type": "text",
      "id": "text_title_4",
      "label": "Text Block 4 Title"
    },
    {
      "type": "textarea",
      "id": "text_explanation_4",
      "label": "Text Block 4 Explanation"
    },
    {
      "type": "text",
      "id": "text_title_5",
      "label": "Text Block 5 Title"
    },
    {
      "type": "textarea",
      "id": "text_explanation_5",
      "label": "Text Block 5 Explanation"
    },
    {
      "type": "text",
      "id": "text_title_6",
      "label": "Text Block 6 Title"
    },
    {
      "type": "textarea",
      "id": "text_explanation_6",
      "label": "Text Block 6 Explanation"
    },
    {
      "type": "text",
      "id": "text_title_7",
      "label": "Text Block 7 Title"
    },
    {
      "type": "textarea",
      "id": "text_explanation_7",
      "label": "Text Block 7 Explanation"
    },
    {
      "type": "text",
      "id": "text_title_8",
      "label": "Text Block 8 Title"
    },
    {
      "type": "textarea",
      "id": "text_explanation_8",
      "label": "Text Block 8 Explanation"
    }
  ]
}
{% endschema %}