Solved

Please Help with text and image block

MikeBee
Tourist
7 1 2

How can I create a section just like this please that I can embed three times in my about page:

Thanks a million

img-txt.jpg

Accepted Solutions (2)

MyCodeMagic
Shopify Partner
19 4 2

This is an accepted solution.

Hii

this is a simple Block code you can add an extra field as your requirements

  

{%for block in section.blocks%}
<div>
    <div class="card">
        <div class="card-body text-center">
            <img src="{{ block.settings.testi-img | img_url: 'small' }}" />
            <h3 class="card-title py-2">{{block.settings.testi-title}}</h3>
            <p class="card-text">{{block.settings.testi-text}}</p>
        </div>
    </div>
</div>
{%endfor%}




{% schema %}
{
   "name":"Custom Testimonial",
   "settings":[
      {
         "type":"text",
         "id":"testi-title",
         "label":"Testimonial Title",
         "default":"Testimonial"
      }
   ],
   "blocks":[
      {
         "type":"quote",
         "name":"Testimonial",
         "settings":[
            {
               "type":"text",
               "id":"testi-title",
               "label":"Author",
               "default":"mycodemagic"
            },
            {
               "type":"richtext",
               "id":"testi-text",
               "label":"Text",
               "default":"<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"
            },
            {
               "type":"image_picker",
               "id":"testi-img",
               "label":"Logo image"
            }
         ]
      }
   ],
   "presets":[
      {
         "name":"New Testimonials",
         "category":"Text",
         "blocks":[
            {
               "type":"quote"
            },
            {
               "type":"quote"
            },
            {
               "type":"quote"
            }
         ]
      }
   ]
}

{% endschema %}

 

MyCodeMagic

View solution in original post

MikeBee
Tourist
7 1 2

This is an accepted solution.

{%for block in section.blocks%}

 

 

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 


<div id="inline">
<div class="one">
<h3 class="card-title py-2">{{block.settings.testi-title}}</h3>
<p>{{block.settings.testi-text}}</p>
</div>

<div class="two">
<img src="{{ block.settings.testi-img | img_url: 'small' }}" class="img"/>

</div>
</div>

 

 

{%endfor%}

 


{% schema %}
{
"name":"Custom Testimonial",
"settings":[
{
"type":"text",
"id":"testi-title",
"label":"Testimonial Title",
"default":"Testimonial"
}
],
"blocks":[
{
"type":"quote",
"name":"Testimonial",
"settings":[
{
"type":"text",
"id":"testi-title",
"label":"Author",
"default":"mycodemagic"
},
{
"type":"richtext",
"id":"testi-text",
"label":"Text",
"default":"<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"
},
{
"type":"image_picker",
"id":"testi-img",
"label":"Logo image"
}
]
}
],
"presets":[
{
"name":"New Testimonials",
"category":"Text",
"blocks":[
{
"type":"quote"
},
{
"type":"quote"
},
{
"type":"quote"
}
]
}
]
}

{% endschema %}

 

<style>
#inline{
width:100%;
height:auto;
padding: 0px 12% 0px 12%;
display:flex;

}

.one {
width:50%;
height:auto;
background-color:#eee;
padding:20px;

}

.two{
width:50%;
height:auto;
background-color:#eee;
padding:20px;

}

.img {
width:inherit;
height: auto;
}
</style>

View solution in original post

Replies 3 (3)

MyCodeMagic
Shopify Partner
19 4 2

This is an accepted solution.

Hii

this is a simple Block code you can add an extra field as your requirements

  

{%for block in section.blocks%}
<div>
    <div class="card">
        <div class="card-body text-center">
            <img src="{{ block.settings.testi-img | img_url: 'small' }}" />
            <h3 class="card-title py-2">{{block.settings.testi-title}}</h3>
            <p class="card-text">{{block.settings.testi-text}}</p>
        </div>
    </div>
</div>
{%endfor%}




{% schema %}
{
   "name":"Custom Testimonial",
   "settings":[
      {
         "type":"text",
         "id":"testi-title",
         "label":"Testimonial Title",
         "default":"Testimonial"
      }
   ],
   "blocks":[
      {
         "type":"quote",
         "name":"Testimonial",
         "settings":[
            {
               "type":"text",
               "id":"testi-title",
               "label":"Author",
               "default":"mycodemagic"
            },
            {
               "type":"richtext",
               "id":"testi-text",
               "label":"Text",
               "default":"<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"
            },
            {
               "type":"image_picker",
               "id":"testi-img",
               "label":"Logo image"
            }
         ]
      }
   ],
   "presets":[
      {
         "name":"New Testimonials",
         "category":"Text",
         "blocks":[
            {
               "type":"quote"
            },
            {
               "type":"quote"
            },
            {
               "type":"quote"
            }
         ]
      }
   ]
}

{% endschema %}

 

MyCodeMagic
MikeBee
Tourist
7 1 2

hi,

 

Many thanks for your answer but the outcome is completely different from what I wanted as you can see below from the screenshot:

block.jpg 

I need to divide a block in two where 50% is text and the other picture all responsive as shown by the 1st picture above.

Cheers

MikeBee
Tourist
7 1 2

This is an accepted solution.

{%for block in section.blocks%}

 

 

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 


<div id="inline">
<div class="one">
<h3 class="card-title py-2">{{block.settings.testi-title}}</h3>
<p>{{block.settings.testi-text}}</p>
</div>

<div class="two">
<img src="{{ block.settings.testi-img | img_url: 'small' }}" class="img"/>

</div>
</div>

 

 

{%endfor%}

 


{% schema %}
{
"name":"Custom Testimonial",
"settings":[
{
"type":"text",
"id":"testi-title",
"label":"Testimonial Title",
"default":"Testimonial"
}
],
"blocks":[
{
"type":"quote",
"name":"Testimonial",
"settings":[
{
"type":"text",
"id":"testi-title",
"label":"Author",
"default":"mycodemagic"
},
{
"type":"richtext",
"id":"testi-text",
"label":"Text",
"default":"<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"
},
{
"type":"image_picker",
"id":"testi-img",
"label":"Logo image"
}
]
}
],
"presets":[
{
"name":"New Testimonials",
"category":"Text",
"blocks":[
{
"type":"quote"
},
{
"type":"quote"
},
{
"type":"quote"
}
]
}
]
}

{% endschema %}

 

<style>
#inline{
width:100%;
height:auto;
padding: 0px 12% 0px 12%;
display:flex;

}

.one {
width:50%;
height:auto;
background-color:#eee;
padding:20px;

}

.two{
width:50%;
height:auto;
background-color:#eee;
padding:20px;

}

.img {
width:inherit;
height: auto;
}
</style>