Pipeline Theme- Gallery design

Solved
Julia__
Tourist
5 0 3

Hello! 

I'm working with the Pipeline theme and was hoping to complete a little extra coding but need some help with it!

I would like to add text below my gallery images, I would also like to add one more gallery image to the limit. 

Can someone please point me in the right direction on where to start?

Thanks! 

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
25048 2508 9067

This is an accepted solution.

@Julia__ 

thanks for code yes try this 

{% assign wrapper_class = 'wrapper' %}
{%- if section.settings.full_width -%}
  {% assign wrapper_class = 'clearfix' %}
{%- endif -%}{% assign has_padding_class = '' %}
{%- if section.settings.padding -%}
  {% assign has_padding_class = 'has-padding' %}
{%- endif -%}<div class="frame frame-blocks-{{ section.blocks.size }} {{ section.settings.bg }}"
  data-section-id="{{ section.id }}"
  data-section-type="gallery">
  <div class="{{ has_padding_class }}">
    <div class="{{ wrapper_class }} slides-mobile-outer">
      <div class="gallery slides-mobile-inner">
        {% for block in section.blocks %}
          {% assign has_link = false %}
          {% if block.settings.link != blank %}
            {% assign has_link = true %}
          {% endif %}
          {% assign has_video = false %}          {% if block.settings.link contains 'youtu' or block.settings.link contains 'vimeo.com' %}
            {% assign has_video = true %}
          {% endif %}          <div class="gallery__item" {{ block.shopify_attributes }}>            {% if block.settings.image != blank %}
              <div class="lazy-image has-zoom-animation">
                {%- if section.settings.scale_image -%}
                  {%- render 'image-fill', img_object: block.settings.image, aspect_ratio: section.settings.aspect_ratio -%}
                {%- else -%}
                  {%- render 'image-fill', img_object: block.settings.image -%}
                {%- endif -%}                {% if has_video %}
                  {% if has_video %}<span class="gallery__icon">{% render 'icon-play-thumb' %}</span>{% endif %}
                  <div class="gallery__video">
                    {% render 'video-popup', video: block.settings.link, unique: block.id %}
                  </div>
                {% elsif has_link %}
                  <a class="link-over-image" href="{{ block.settings.link }}" aria-label="{{ block.settings.image.alt | strip_html | escape }}"></a>
                {% else %}
                  <div class="gallery__zoom">
                    {% render 'image-zoom', image: block.settings.image, unique: block.id %}
                  </div>
                {% endif %}
              </div>
              <noscript>
                <img src="{{ block.settings.image | img_url: '540x' }}"
                     alt="{{ block.settings.image.alt | strip_html | escape }}"/>
              </noscript>
            {% else %}
              {%- render 'image-fill', img_object: '', aspect_ratio: section.settings.aspect_ratio -%}
            {% endif %}
            {% if block.settings.text-title != blank %}
             <h3>{{ block.settings.text-title }}</h3>
             {% endif %}
          </div>
        {% endfor %}
      </div>      {% if section.blocks.size == 0 %}
        <div class="text-center">{{ 'home_page.onboarding.no_content' | t }}</div>
      {% endif %}
    </div>
  </div>
</div>{% schema %}
  {
    "name": "Gallery",
    "max_blocks": 6,
    "settings": [
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Full width",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "padding",
        "label": "Has padding",
        "default": true
      },
      {
        "type": "header",
        "content": "Images"
      },
      {
        "type": "checkbox",
        "id": "scale_image",
        "label": "Scale images",
        "default": true
      },
      {
        "type": "range",
        "id": "aspect_ratio",
        "min": 0.5,
        "max": 1.5,
        "step": 0.1,
        "unit": ":1",
        "label": "Image scaling ratio",
        "info": "Wide to tall",
        "default": 1
      },
      {
        "type": "select",
        "id": "bg",
        "label": "Background color",
        "default": "palette--light bg--neutral",
        "options": [
          { "value": "palette--light bg--neutral", "label": "Default"},
          { "value": "palette--light bg--accent", "label": "Light"},
          { "value": "palette--dark bg--invert", "label": "Dark"},
          { "value": "palette--dark bg--invert--accent", "label": "Dark accent"}
        ]
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
           {
            "type": "text",
            "id": "text-title",
            "label": "Title"
          },
          {
            "type": "text",
            "id": "link",
            "label": "Link",
            "info": "YouTube and Vimeo links will use a popup.  Blank links will zoom image."
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Gallery",
        "category": "Image",
        "blocks": [
          {
            "type": "image"
          },
          {
            "type": "image"
          },
          {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 8 (8)
KetanKumar
Shopify Partner
25048 2508 9067

@Julia__ 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Julia__
Tourist
5 0 3

Hi!

 

Unfortunately I do already have a live store that is not the one I'm working on. This is a preview of the one I'm having issues with: https://t0qquo189c0ddi4g-2483393.shopifypreview.com 

KetanKumar
Shopify Partner
25048 2508 9067

@Julia__ 

can you please show me issue image please 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Julia__
Tourist
5 0 3

satyaorganicskincare.myshopify.com 

Julia__
Tourist
5 0 3

I need text below each of these yellow images that form the gallery section Screenshot (33).png

KetanKumar
Shopify Partner
25048 2508 9067

@Julia__ 

yes please sent Gallery section code so i will check and update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Julia__
Tourist
5 0 3

{% assign wrapper_class = 'wrapper' %}
{%- if section.settings.full_width -%}
  {% assign wrapper_class = 'clearfix' %}
{%- endif -%}{% assign has_padding_class = '' %}
{%- if section.settings.padding -%}
  {% assign has_padding_class = 'has-padding' %}
{%- endif -%}<div class="frame frame-blocks-{{ section.blocks.size }} {{ section.settings.bg }}"
  data-section-id="{{ section.id }}"
  data-section-type="gallery">
  <div class="{{ has_padding_class }}">
    <div class="{{ wrapper_class }} slides-mobile-outer">
      <div class="gallery slides-mobile-inner">
        {% for block in section.blocks %}
          {% assign has_link = false %}
          {% if block.settings.link != blank %}
            {% assign has_link = true %}
          {% endif %}
          {% assign has_video = false %}          {% if block.settings.link contains 'youtu' or block.settings.link contains 'vimeo.com' %}
            {% assign has_video = true %}
          {% endif %}          <div class="gallery__item" {{ block.shopify_attributes }}>            {% if block.settings.image != blank %}
              <div class="lazy-image has-zoom-animation">
                {%- if section.settings.scale_image -%}
                  {%- render 'image-fill', img_object: block.settings.image, aspect_ratio: section.settings.aspect_ratio -%}
                {%- else -%}
                  {%- render 'image-fill', img_object: block.settings.image -%}
                {%- endif -%}                {% if has_video %}
                  {% if has_video %}<span class="gallery__icon">{% render 'icon-play-thumb' %}</span>{% endif %}
                  <div class="gallery__video">
                    {% render 'video-popup', video: block.settings.link, unique: block.id %}
                  </div>
                {% elsif has_link %}
                  <a class="link-over-image" href="{{ block.settings.link }}" aria-label="{{ block.settings.image.alt | strip_html | escape }}"></a>
                {% else %}
                  <div class="gallery__zoom">
                    {% render 'image-zoom', image: block.settings.image, unique: block.id %}
                  </div>
                {% endif %}
              </div>
              <noscript>
                <img src="{{ block.settings.image | img_url: '540x' }}"
                     alt="{{ block.settings.image.alt | strip_html | escape }}"/>
              </noscript>
            {% else %}
              {%- render 'image-fill', img_object: '', aspect_ratio: section.settings.aspect_ratio -%}
            {% endif %}
          </div>
        {% endfor %}
      </div>      {% if section.blocks.size == 0 %}
        <div class="text-center">{{ 'home_page.onboarding.no_content' | t }}</div>
      {% endif %}
    </div>
  </div>
</div>{% schema %}
  {
    "name": "Gallery",
    "max_blocks": 6,
    "settings": [
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Full width",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "padding",
        "label": "Has padding",
        "default": true
      },
      {
        "type": "header",
        "content": "Images"
      },
      {
        "type": "checkbox",
        "id": "scale_image",
        "label": "Scale images",
        "default": true
      },
      {
        "type": "range",
        "id": "aspect_ratio",
        "min": 0.5,
        "max": 1.5,
        "step": 0.1,
        "unit": ":1",
        "label": "Image scaling ratio",
        "info": "Wide to tall",
        "default": 1
      },
      {
        "type": "select",
        "id": "bg",
        "label": "Background color",
        "default": "palette--light bg--neutral",
        "options": [
          { "value": "palette--light bg--neutral", "label": "Default"},
          { "value": "palette--light bg--accent", "label": "Light"},
          { "value": "palette--dark bg--invert", "label": "Dark"},
          { "value": "palette--dark bg--invert--accent", "label": "Dark accent"}
        ]
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "text",
            "id": "link",
            "label": "Link",
            "info": "YouTube and Vimeo links will use a popup.  Blank links will zoom image."
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Gallery",
        "category": "Image",
        "blocks": [
          {
            "type": "image"
          },
          {
            "type": "image"
          },
          {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}

KetanKumar
Shopify Partner
25048 2508 9067

This is an accepted solution.

@Julia__ 

thanks for code yes try this 

{% assign wrapper_class = 'wrapper' %}
{%- if section.settings.full_width -%}
  {% assign wrapper_class = 'clearfix' %}
{%- endif -%}{% assign has_padding_class = '' %}
{%- if section.settings.padding -%}
  {% assign has_padding_class = 'has-padding' %}
{%- endif -%}<div class="frame frame-blocks-{{ section.blocks.size }} {{ section.settings.bg }}"
  data-section-id="{{ section.id }}"
  data-section-type="gallery">
  <div class="{{ has_padding_class }}">
    <div class="{{ wrapper_class }} slides-mobile-outer">
      <div class="gallery slides-mobile-inner">
        {% for block in section.blocks %}
          {% assign has_link = false %}
          {% if block.settings.link != blank %}
            {% assign has_link = true %}
          {% endif %}
          {% assign has_video = false %}          {% if block.settings.link contains 'youtu' or block.settings.link contains 'vimeo.com' %}
            {% assign has_video = true %}
          {% endif %}          <div class="gallery__item" {{ block.shopify_attributes }}>            {% if block.settings.image != blank %}
              <div class="lazy-image has-zoom-animation">
                {%- if section.settings.scale_image -%}
                  {%- render 'image-fill', img_object: block.settings.image, aspect_ratio: section.settings.aspect_ratio -%}
                {%- else -%}
                  {%- render 'image-fill', img_object: block.settings.image -%}
                {%- endif -%}                {% if has_video %}
                  {% if has_video %}<span class="gallery__icon">{% render 'icon-play-thumb' %}</span>{% endif %}
                  <div class="gallery__video">
                    {% render 'video-popup', video: block.settings.link, unique: block.id %}
                  </div>
                {% elsif has_link %}
                  <a class="link-over-image" href="{{ block.settings.link }}" aria-label="{{ block.settings.image.alt | strip_html | escape }}"></a>
                {% else %}
                  <div class="gallery__zoom">
                    {% render 'image-zoom', image: block.settings.image, unique: block.id %}
                  </div>
                {% endif %}
              </div>
              <noscript>
                <img src="{{ block.settings.image | img_url: '540x' }}"
                     alt="{{ block.settings.image.alt | strip_html | escape }}"/>
              </noscript>
            {% else %}
              {%- render 'image-fill', img_object: '', aspect_ratio: section.settings.aspect_ratio -%}
            {% endif %}
            {% if block.settings.text-title != blank %}
             <h3>{{ block.settings.text-title }}</h3>
             {% endif %}
          </div>
        {% endfor %}
      </div>      {% if section.blocks.size == 0 %}
        <div class="text-center">{{ 'home_page.onboarding.no_content' | t }}</div>
      {% endif %}
    </div>
  </div>
</div>{% schema %}
  {
    "name": "Gallery",
    "max_blocks": 6,
    "settings": [
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Full width",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "padding",
        "label": "Has padding",
        "default": true
      },
      {
        "type": "header",
        "content": "Images"
      },
      {
        "type": "checkbox",
        "id": "scale_image",
        "label": "Scale images",
        "default": true
      },
      {
        "type": "range",
        "id": "aspect_ratio",
        "min": 0.5,
        "max": 1.5,
        "step": 0.1,
        "unit": ":1",
        "label": "Image scaling ratio",
        "info": "Wide to tall",
        "default": 1
      },
      {
        "type": "select",
        "id": "bg",
        "label": "Background color",
        "default": "palette--light bg--neutral",
        "options": [
          { "value": "palette--light bg--neutral", "label": "Default"},
          { "value": "palette--light bg--accent", "label": "Light"},
          { "value": "palette--dark bg--invert", "label": "Dark"},
          { "value": "palette--dark bg--invert--accent", "label": "Dark accent"}
        ]
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
           {
            "type": "text",
            "id": "text-title",
            "label": "Title"
          },
          {
            "type": "text",
            "id": "link",
            "label": "Link",
            "info": "YouTube and Vimeo links will use a popup.  Blank links will zoom image."
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Gallery",
        "category": "Image",
        "blocks": [
          {
            "type": "image"
          },
          {
            "type": "image"
          },
          {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post