skip to Main Content

How to format .liquid (Shopify liquid) code in Visual Studio.
By settings language as HTML I can do it but at the same time, I can’t use Shopify autocomplete. When I switch to liquid.html then I can use the autocomplete but I can’t format code. Is there any way I can use another language and format code as another language in visual studio?

2

Answers


  1. The VSCode Liquid extension provides formatting and syntax highlighting. Also has intellisense and ton of other features.

    Login or Signup to reply.
  2. <div class="page-width">
      {% if section.settings.title != blank %}
        <header class="section-header">
          <h2 class="section-header__title">
            {{section.settings.title}}
          </h2>
        </header>
      {% endif %}
    
      <div class="popup-gallery">
        {%- for media in product.media -%}
        {%- liquid
          assign has_video = false
          assign video_type = ''
    
          case media.media_type
            when 'external_video'
              assign has_video = true
              assign video_type = media.host
    
              if media.host contains 'youtube'
                assign video_id = media.external_id
              endif
            when 'video'
              assign has_video = true
              assign video_type = 'mp4'
          endcase -%}
    
          <div
            href="{%- if has_video -%}
              {%- if media.media_type=='video' -%}
                {%- for source in media.sources -%}
                  {{- source.url -}}
                {%-endfor-%}
              {%- else -%}
                {%- assign video_url = media | external_video_url -%}                
                {%- if video_url contains "youtube" -%}
                  https://www.youtube.com/watch?v={{- media.external_id -}}              
                {%- else -%}
                  https://vimeo.com/{{- media.external_id -}}
                {%- endif -%}
              {%- endif -%}
            {%- else -%}
              {{- media | image_url -}}
            {%- endif -%}"
          class="
            {% if has_video %}
              video
            {% else %}
              image
            {% endif %}"
          title="
            {% if has_video %}
              This is a video
            {% else %}
              This is a image
            {% endif %}
          ">
            {%- assign img_url = media.preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <img
              class="lazyload"
              data-src="{{ img_url }}"
              data-widths="[120, 360, 540, 720]"
              data-aspectratio="{{ media.preview_image.aspect_ratio }}"
              data-sizes="auto"
              alt="GALLERY"
            >
              <noscript>
                <img
                  class="lazyloaded"
                  src="{{ media | img_url: '400x' }}"
                  alt="GALLERY"
                >
              </noscript>
            </div>
          {%- endfor -%}
        </div>
      </div>
        
      {{ 'magnific-popup.min.css' | asset_url | stylesheet_tag }}
        
      <script
        type="text/javascript"
        src="{{ 'jquery.min.js' | asset_url }}"
      ></script>
      <script
        type="text/javascript"
        src="{{ 'magnific-popup.min.js' | asset_url }}"
      ></script>
    
      <script type="text/javascript">
        $(".popup-gallery").magnificPopup({
          delegate: "div",
          type: "image",
          gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
          },
          callbacks: {
            elementParse: function (item) {
              console.log(item.el[0].className);
              if (item.el[0].className == "video") {
                (item.type = "iframe"),
                (item.iframe = {
                  patterns: {
                    youtube: {
                      index: "youtube.com/", // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
                      id: "v=", // String that splits URL in a two parts, second part should be %id%                 // Or null - full URL will be returned                 // Or a function that should return %id%, for example:
                      // id: function(url) { return 'parsed id'; }
                      src: "//www.youtube.com/embed/%id%?autoplay=1" // URL that will be set as a source for iframe.
                      },
                      vimeo: {
                        index: "vimeo.com/",
                        id: "/",
                        src: "//player.vimeo.com/video/%id%?autoplay=1"
                      },
                      gmaps: {
                        index: "//maps.google.",
                        src: "%id%&output=embed"
                      }
                    }
                  });
                } else {
                  (item.type = "image"),
                  (item.tLoading = "Loading image #%curr%..."),
                  (item.mainClass = "mfp-img-mobile"),
                  (item.image = {
                    tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
                  });
                }
              }
            }
          });
      </script>
      {% schema %}
        {
          "name": "Product gallery",
          "class": "product-gallery-section",
          "settings": [
            {
              "type": "text",
              "id": "title",
              "label": "Heading"
            }
          ]
        }
      {% endschema %}
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search