I am using mkdocs default bootstrap theme (Bootswatch v4.1.3) to create a website that supports markdown.
In the body I have created a large width table and due to that, navbar appears shorter than body, when we scroll to rightmost. Adding image snap.
I tried increasing the length of navbar using "width" attribute of class navbar. But that breaks the alignment of text "Test Site" with below box as shown in image.
.navbar {
background-image: -webkit-linear-gradient(#54b4eb,#2fa4e7 60%,#1d9ce5);
background-image: linear-gradient(#54b4eb,#2fa4e7 60%,#1d9ce5);
background-repeat: no-repeat;
border-bottom: 1px solid #178acc;
filter: `enter code here`progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff54b4eb',endColorstr='#ff1d9ce5',GradientType=0);
filter: none;
-webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.1);
box-shadow: 0 1px 10px rgba(0,0,0,0.1);
width: 100%;
}
Adding theme html base template of mkdocs:
<!DOCTYPE html>
<html lang="en">
<head>
{%- block site_meta %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% if page and page.is_homepage %}<meta name="description" content="{{ config['site_description'] }}">{% endif %}
{% if config.site_author %}<meta name="author" content="{{ config.site_author }}">{% endif %}
{% if page and page.canonical_url %}<link rel="canonical" href="{{ page.canonical_url }}">{% endif %}
{% if config.site_favicon %}<link rel="shortcut icon" href="{{ config.site_favicon|url }}">
{% else %}<link rel="shortcut icon" href="{{ 'img/favicon.ico'|url }}">{% endif %}
{%- endblock %}
{%- block htmltitle %}
<title>{% if page and page.title and not page.is_homepage %}{{ page.title }} - {% endif %}{{ config.site_name }}</title>
{%- endblock %}
{%- block styles %}
<link href="{{ 'css/bootstrap.min.css'|url }}" rel="stylesheet">
<link href="{{ 'css/font-awesome.min.css'|url }}" rel="stylesheet">
<link href="{{ 'css/base.css'|url }}" rel="stylesheet">
{%- if config.theme.highlightjs %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/{{ config.theme.hljs_style }}.min.css">
{%- endif %}
{%- for path in config['extra_css'] %}
<link href="{{ path|url }}" rel="stylesheet">
{%- endfor %}
{%- endblock %}
{%- block libs %}
<script src="{{ 'js/jquery-1.10.2.min.js'|url }}" defer></script>
<script src="{{ 'js/bootstrap.min.js'|url }}" defer></script>
{%- if config.theme.highlightjs %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
{%- for lang in config.theme.hljs_languages %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/{{lang}}.min.js"></script>
{%- endfor %}
<script>hljs.initHighlightingOnLoad();</script>
{%- endif %}
{%- endblock %}
{%- block analytics %}
{%- if config.google_analytics %}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', '{{ config.google_analytics[0] }}', '{{ config.google_analytics[1] }}');
ga('send', 'pageview');
</script>
{%- endif %}
{%- endblock %}
{%- block extrahead %} {% endblock %}
</head>
<body{% if page and page.is_homepage %} class="homepage"{% endif %}>
<div class="navbar fixed-top navbar-expand-lg navbar-{% if config.theme.nav_style == "light" %}light{% else %}dark{% endif %} bg-{{ config.theme.nav_style }}">
<div class="container">
{%- block site_name %}
<a class="navbar-brand" href="{{ nav.homepage.url|url }}">{{ config.site_name }}</a>
{%- endblock %}
{%- if nav|length>1 or (page and (page.next_page or page.previous_page)) or config.repo_url %}
<!-- Expander button -->
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
{%- endif %}
<!-- Expanded navigation -->
<div id="navbar-collapse" class="navbar-collapse collapse">
{%- block site_nav %}
{%- if nav|length>1 %}
<!-- Main navigation -->
<ul class="nav navbar-nav">
{%- for nav_item in nav %}
{%- if nav_item.children %}
<li class="dropdown{% if nav_item.active %} active{% endif %}">
{{ nav_item.title }} <b class="caret"></b>
<ul class="dropdown-menu">
{%- for nav_item in nav_item.children %}
{% include "nav-sub.html" %}
{%- endfor %}
</ul>
</li>
{%- else %}
<li class="navitem{% if nav_item.active %} active{% endif %}">
{{ nav_item.title }}
</li>
{%- endif %}
{%- endfor %}
</ul>
{%- endif %}
{%- endblock %}
<ul class="nav navbar-nav ml-auto">
{%- block search_button %}
{%- if 'search' in config['plugins'] %}
<li class="nav-item">
<a href="#" class="nav-link" data-toggle="modal" data-target="#mkdocs_search_modal">
<i class="fa fa-search"></i> Search
</a>
</li>
{%- endif %}
{%- endblock %}
{%- block next_prev %}
{%- if page and (page.next_page or page.previous_page) %}
<li class="nav-item">
<a rel="prev" {% if page.previous_page %}href="{{ page.previous_page.url|url }}" class="nav-link"{% else %}class="nav-link disabled"{% endif %}>
<i class="fa fa-arrow-left"></i> Previous
</a>
</li>
<li class="nav-item">
<a rel="next" {% if page.next_page %}href="{{ page.next_page.url|url }}" class="nav-link"{% else %}class="nav-link disabled"{% endif %}>
Next <i class="fa fa-arrow-right"></i>
</a>
</li>
{%- endif %}
{%- endblock %}
{%- block repo %}
{%- if page and page.edit_url %}
<li class="nav-item">
<a href="{{ page.edit_url }}" class="nav-link">
{%- if config.repo_name == 'GitHub' -%}
<i class="fa fa-github"></i> Edit on {{ config.repo_name }}
{%- elif config.repo_name == 'Bitbucket' -%}
<i class="fa fa-bitbucket"></i> Edit on {{ config.repo_name }}
{%- elif config.repo_name == 'GitLab' -%}
<i class="fa fa-gitlab"></i> Edit on {{ config.repo_name }}
{%- else -%}
Edit on {{ config.repo_name }}
{%- endif -%}
</a>
</li>
{%- elif config.repo_url %}
<li class="nav-item">
<a href="{{ config.repo_url }}" class="nav-link">
{%- if config.repo_name == 'GitHub' -%}
<i class="fa fa-github"></i> {{ config.repo_name }}
{%- elif config.repo_name == 'Bitbucket' -%}
<i class="fa fa-bitbucket"></i> {{ config.repo_name }}
{%- elif config.repo_name == 'GitLab' -%}
<i class="fa fa-gitlab"></i> {{ config.repo_name }}
{%- else -%}
{{ config.repo_name }}
{%- endif -%}
</a>
</li>
{%- endif %}
{%- endblock %}
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
{%- block content %}
<div class="col-md-3">{% include "toc.html" %}</div>
<div class="col-md-9" role="main">{% include "content.html" %}</div>
{%- endblock %}
</div>
</div>
<footer class="col-md-12">
{%- block footer %}
<hr>
{%- if config.copyright %}
<p>{{ config.copyright }}</p>
{%- endif %}
{%- endblock %}
</footer>
{%- block scripts %}
<script>
var base_url = {{ base_url | tojson }},
shortcuts = {{ config.theme.shortcuts | tojson }};
</script>
<script src="{{ 'js/base.js'|url }}" defer></script>
{%- for path in config['extra_javascript'] %}
<script src="{{ path|url }}" defer></script>
{%- endfor %}
{%- endblock %}
{% if 'search' in config['plugins'] %}{%- include "search-modal.html" %}{% endif %}
{%- include "keyboard-modal.html" %}
</body>
</html>
{% if page and page.is_homepage %}
<!--
MkDocs version : {{ mkdocs_version }}
Build Date UTC : {{ build_date_utc }}
-->
{% endif %}
Related
I am currently looking to change the layout of the images on my product page. Here is the current layout:
current layout
Below is the product image layout that I need to change my product page to:
new layout
How would I do this in debut theme? I have tried several things, but couldn't get it to work. What code should I use and where should I insert it? Thank you in advance.
sections/product-template.liquid
look for this code;
<ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}">
{% for media in product.media %}
<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js">
<a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ section.id }}-{{ media.id }}"
{% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
{%- capture thumbnailAlt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}
<img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-video-badge-full-color' %}
</div>
{%- endif -%}
{%- if media.media_type == 'model' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-3d-badge-full-color' %}
</div>
{%- endif -%}
</a>
</li>
{% endfor %}
</ul>
move it to the top, under
<div class="grid__item product-single__media-group {{ product_media_width }}{% if section.settings.media_size == 'full' %} product-single__media-group--full{% endif %}" data-product-single-media-group>
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
add some extra css to get what you want;
<div class="grid__item product-single__media-group {{ product_media_width }}{% if section.settings.media_size == 'full' %} product-single__media-group--full{% endif %}" data-product-single-media-group style="position: relative">
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
<ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}" data-slider-container style="flex-flow:column; position: absolute; max-width: 15%; top: 0; left: -15%">
{% if enable_thumbnail_slides == true %}
<div class="product-single__thumbnails-slider-track" data-slider-track>
{% endif %}
{% for media in product.media %}
<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} {% if enable_thumbnail_slides == true %} product-single__thumbnails-item-slide{% endif %} js"{% if enable_thumbnail_slides == true %} data-slider-slide-index="{{ forloop.index0 }}" data-slider-item{% endif %}>
<a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ section.id }}-{{ media.id }}"
{% if enable_thumbnail_slides == true %} data-slider-item-link{% endif %}
{% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
{%- capture thumbnailAlt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}
<img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-video-badge-full-color' %}
</div>
{%- endif -%}
{%- if media.media_type == 'model' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-3d-badge-full-color' %}
</div>
{%- endif -%}
</a>
</li>
{% endfor %}
{% if enable_thumbnail_slides == true %}
</div>
{% endif %}
</ul>
{%- for media in product.media -%}
{% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
{%- endfor -%}
<noscript>
{% capture product_image_size %}{{ height }}x{% endcapture %}
<img src="{{ featured_media | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;">
</noscript>
{% assign first_3d_model = product.media | where: "media_type", "model" | first %}
{%- if first_3d_model -%}
<button
aria-label="{{ 'products.product.view_in_space_label' | t }}"
class="product-single__view-in-space"
data-shopify-xr
data-shopify-model3d-id="{{ first_3d_model.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden
>
{% include 'icon-3d-badge-full-color' %}<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
</button>
{%- endif -%}
{% if product.media.size > 1 %}
{% if product.media.size > 4 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}
<div data-thumbnail-slider>
<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} slider-active{% endif %}" data-slider>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}" data-slider-button>
{% include 'icon-chevron-left' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
</button>
{% endif %}
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}" data-slider-button data-slider-button-next>
{% include 'icon-chevron-right' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
</button>
{% endif %}
</div>
</div>
{% endif %}
</div>
Any idea how to fix product thumbnail that is overlapping on my product image? i want to put it below product image and not inside the product image.
that is how the product page look like
this the product template liquid. i have edit a little as the original product page, the product is arranged vertically in very large image
<!-- /templates/product.liquid -->
<div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-image-zoom-type="{{ section.settings.zoom_enable }}" data-enable-history-state="true">
<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
{% assign current_variant = product.selected_or_first_available_variant %}
<div class="grid product-single">
<div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
<div class="product-single__photos small--hide">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% comment %}
Get all images for gallery, but only show one at a time
{% endcomment %}
<div class="product-single__photo-wrapper">
<img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
{% for image in product.images %}
{% unless image contains featured_image %}
<img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}" style="display: none;" />
{% endunless %}
{% endfor %}
</div>
{% comment %}
Display thumbnails
{% endcomment %}
<ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">
{% for image in product.images %}
<li class="grid__item medium--one-quarter large--one-fifth product-single__photo-wrapper">
<a data-image-id="{{ image.id }}" {% if section.settings.zoom_enable %}data-mfp-src="{{ image | img_url: '1024x1024' }}"{% endif %}
href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail">
<img class="product-single__thumb" src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="mobile product-single__photos medium--hide large--hide">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% comment %}
Display current variant image, or default first
{% endcomment %}
<div class="product-single__photo-wrapper">
<img class="mobile product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
</div>
{% comment %}
Display rest of product images, not repeating the featured one
{% endcomment %}
{% for image in product.images %}
{% unless image contains featured_image %}
<div class="product-single__photo-wrapper">
<img class="mobile product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
</div>
{% endunless %}
{% endfor %}
</div>
</div>
<div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
<div class="product-single__meta">
{% if section.settings.product_vendor_enable %}
<h2 class="product-single__vendor" itemprop="brand">{{ product.vendor }}</h2>
{% endif %}
<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% comment %}
Optionally show the 'compare at' or original price of the product.
{% endcomment %}
{% if product.compare_at_price_max > product.price %}
<span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper">
<span id="ComparePrice" class="product-single__price--compare-at">
{% if current_variant.compare_at_price > current_variant.price %}
{{ current_variant.compare_at_price | money }}
{% endif %}
</span>
</span>
<span id="ComparePriceA11y" class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}
<span id="ProductPrice"
class="product-single__price{% if product.compare_at_price > product.price %} on-sale{% endif %}"
itemprop="price"
content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
{% if product.compare_at_price_max > product.price %}You saved
{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%{% endif %}
<hr class="hr--small">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-single__form" id="AddToCartForm">
{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
{% for option in product.options_with_values %}
<div class="radio-wrapper js product-form__item">
<label class="single-option-radio__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}"
for="ProductSelect-option-{{ forloop.index0 }}">
{{ option.name }}
</label>
<fieldset class="single-option-radio"
name="{{ option.name }}"
id="ProductSelect-option-{{ forloop.index0 }}">
{% assign option_index = forloop.index %}
{% for value in option.values %}
{% assign variant_label_state = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_label_state = false %}
{% endunless %}
{% endif %}
<input type="radio"
{% if option.selected_value == value %} checked="checked"{% endif %}
{% unless variant_label_state %} disabled="disabled"{% endunless %}
value="{{ value | escape }}"
data-index="option{{ option_index }}"
name="{{ option.name }}"
class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
id="ProductSelect-option-{{ option.name }}-{{ value | escape }}">
<label for="ProductSelect-option-{{ option.name }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>
{% endfor %}
</fieldset>
</div>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect" class="product-single__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %}
selected="selected" {% endif %}
data-sku="{{ variant.sku }}"
value="{{ variant.id }}">
{{ variant.title }} - {{ variant.price | money_with_currency }}
</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
<div class="product-single__quantity">
<label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
<input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
</div>
<div class="product-single__add-to-cart">
<button type="submit" name="add" id="AddToCart" class="btn"{% unless product.available %} disabled="disabled"{% endunless %}>
<span id="AddToCartText">
{% if product.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
</span>
</button>
</div>
</form>
</div>
<div class="product-single__description rte" itemprop="description">
{{ product.description }}
</div>
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>
{% if collection %}
<hr class="hr--clear">
<div class="text-center">
← {{ 'products.general.collection_return' | t: collection: collection.title }}
</div>
{% endif %}
</div>
</div>
{% unless product.empty == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}
Here, I have attached my code
<div{{ attributes }}>
{% if not label_hidden %}
<div{{ title_attributes.addClass('field-label') }}>{{ label }}</div>
{% endif %}
<div{{ content_attributes.addClass('gall-wrp') }}>
{% for item in items %}
<a class="gall-img" href="{{ file_url(element['#object'].field_multiple_image.0.entity.uri.value) }}">
<img src="{{ file_url(element['#object'].field_multiple_image.0.entity.uri.value) }}"></a>
{% endfor %}
</div>
</div>
How to change {{ file_url(element['#object'].field_multiple_image.0.entity.uri.value) }} dynamically change value of 0.
.0 is the same than [0]. You can use:
{{ file_url(element['#object'].field_multiple_image.[yourVar].entity.uri.value) }}
Here, I have fixed this,
<div{{ attributes }}>
{% if not label_hidden %}
<div{{ title_attributes.addClass('field-label') }}>{{ label }}</div>
{% endif %}
<div{{ content_attributes.addClass('gall-wrp') }}>
{% for item in element['#object'].field_multiple_image %}
<a class="gall-img" href="{{ file_url(item.entity.uri.value) }}">
<img src="{{ file_url(item.entity.uri.value) }}"></a>
{% endfor %}
</div>
</div>
I have a liquid dropdown menu with a list of products that only expand when you click. I figured out how to open it by default when loading the site.
I simply found the <ul> tag for my dropdown list and changed it from this:
<ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expanded" aria-hidden="false">
to this:
<ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expand" aria-hidden="false">
However, I would also like it to be closed by default on small screens.
So far I haven't been able to find a solution that allows me to do that. I'm open to both liquid and CSS solutions. Anyone got any ideas?
Here is my code as it looks now with the default expand:
<div class="grid">
<nav class="grid__item small--text-center medium-up--one-fifth" id="makeShort" role="navigation">
<hr class="hr--small medium-up--hide">
<button data-target="site-nav" id="ToggleMobileMenu" class="mobile-menu-icon medium-up--hide" aria-haspopup="true" aria-owns="SiteNav">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="icon__fallback-text">{{ 'layout.navigation.menu' | t }}</span>
</button>
<div id="SiteNav" class="site-nav" role="menu">
<ul class="list--nav">
{% for link in menus.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if menus[child_list_handle].links != blank %}
<li class="site-nav--has-submenu site-nav__element">
{% if link.title == 'Shop' %}
<button class="site-nav__link btn--link site-nav__expand hidden" aria-expanded="false" aria-controls="Collapsible{{ forloop.index }}">
{{ link.title }}
<span>+</span>
</button>
<button class="site-nav__link btn--link site-nav__collapse" aria-expanded="true" aria-controls="Collapsible{{ forloop.index }}">
{{ link.title }}
<span>-</span>
</button>
<ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expand" aria-hidden="false">
{% for childlink in menus[child_list_handle].links %}
<li class="{% if childlink.active or collection.current_type == childlink.title or collection.current_vendor == childlink.title %}{% unless forloop.first and childlink.title contains 'All' and current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}">
{{ childlink.title | escape }}
</li>
{% endfor %}
</ul>
</li>
{% else %}
<button class="site-nav__link btn--link site-nav__expand hidden" id="hideOnLargeScreen" aria-expanded="false" aria-controls="Collapsible{{ forloop.index }}">
{{ link.title }}
<span>+</span>
</button>
<button class="site-nav__link btn--link site-nav__collapse" id="hideOnLargeScreen" aria-expanded="true" aria-controls="Collapsible{{ forloop.index }}">
{{ link.title }}
<span>-</span>
</button>
<ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expanded" id="hideOnLargeScreen" aria-hidden="false">
{% for childlink in menus[child_list_handle].links %}
<li class="{% if childlink.active or collection.current_type == childlink.title or collection.current_vendor == childlink.title %}{% unless forloop.first and childlink.title contains 'All' and current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}">
{{ childlink.title | escape }}
</li>
{% endfor %}
</ul>
{% endif %}
{% else %}
<li class="site-nav__element {% if link.active %}site-nav--active{% endif %}">
{% if link.title == 'Shop' %}
{{ link.title }}
{% else %}
{{ link.title }}
{% endif %}
</li>
{% endif %}
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li>
{{ 'layout.customer.account' | t }}
</li>
<li>
{{ 'layout.customer.log_out' | t }}
</li>
{% else %}
<li>
{{ 'layout.customer.log_in' | t }}
</li>
<li>
{{ 'layout.customer.create_account' | t }}
</li>
{% endif %}
{% endif %}
</ul>
{% include 'custom.social-bar' %}
</div>
<hr class="medium-up--hide hr--small {% if template == 'index' %}{% if settings.home_section_1 == 'banner-image' or settings.home_section_1 == 'featured-products' %}hr--border-bottom{% endif %}{% endif %}">
</nav>
It's nothing that belongs to liquid or Shopify. You easily can do this with common solutions. For example you could use jQuery by putting something like this into your theme js file:
$( window ).resize(function() {
if ($(window).width() < 700 ) { // Size of "small"
$('.list--nav ul').addClass('site-nav__submenu--expanded').removeClass('site-nav__submenu--expand');
} else {
$('.list--nav ul').addClass('site-nav__submenu--expand').removeClass('site-nav__submenu--expanded');
}
});
But you also could put the css code of .site-nav__submenu--expand into a condition for large devices like:
#media (min-width:960px) {
.site-nav__submenu--expand {...}
}
I'm doing my best to learn Hubspot's HubL language and CSS but am stuck on creating a 2 column format for my blog (they only provide a 1 column format). I inserted their Blog Content module, then edited the "Listing Template" code to be more to my liking, as follows. In the blog settings page I set the number of posts per "listing page" to 10 but would like to make it wrap at 5.
I also applied this inline styling so that the first column takes up half the space, which is good, but can't figure out how to tell it to wrap posts 6-10 to another column. I am reading everything I can about how I can get this to work but nothing applies directly to my problem.
max-width: 50%; height: auto;
Caveat - I can edit the below and I can apply CSS styling but that's the extent of my knowledge. If I have to do something in Javascript, I can copy-paste into a file that applies to the site but that's about it.
<div class="blog-section">
<div class="blog-listing-wrapper cell-wrapper">
<div class="blog-section">
<div class="blog-listing-wrapper cell-wrapper">
{# simple_list_page indicates the "blog/all" page, which is a list of links to every blog post #}
<div class="post-listing{% if simple_list_page %}-simple{% endif %}">
{% if blog_author %}
<div class="hs-author-profile">
<h2 class="hs-author-name">{{ blog_author.display_name }}</h2>
{% if blog_author.avatar %} <div class="hs-author-avatar"> <img src="{{ blog_author.avatar }}" alt="{{ blog_author.display_name }}"> </div> {% endif %}
<div class="hs-author-bio">{{ blog_author.bio }}</div>
{% if blog_author.has_social_profiles %}
<div class="hs-author-social-section">
<span class="hs-author-social-label">Find me on:</span>
<div class="hs-author-social-links">
{% if blog_author.facebook %}
{% endif %}
{% if blog_author.linkedin %}
{% endif %}
{% if blog_author.twitter %}
{% endif %}
{% if blog_author.google_plus %}
{% endif %}
</div>
</div>
{% endif %}
</div>
<h3 class="hs-author-listing-header">Recent Posts</h3>
{% endif %}
{% for content in contents %}
<div class="post-item">
{% if not simple_list_page %}
{% if topic %}<h3>Posts about {{ page_meta.html_title|replace(' | ', '') }}</h3>{% endif %}
{% if content.topic_list %}
<p id="hubspot-topic_data"> >
{% for topic in content.topic_list %}
<a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</p>
{% endif %}
{{ content.publish_date_localized }}
<div class="post-header">
<h2>{{ content.name }}</h2>
</div>
<div class="post-body clearfix">
<!--post summary-->
{% if content.post_list_summary_featured_image %}
<div class="hs-featured-image-wrapper">
<a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
<img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image">
</a>
</div>
{% endif %}
{{ content.post_list_content|safe }}
{% if content_group.show_summary_in_listing %}
<a class="more-link" href="{{ content.absolute_url }}">Read More</a>
{% endif %}
</div>
{% else %}
<h2 class="post-listing-simple">{{ content.name }}</h2>
{% endif %}
</div>
{% endfor %}
</div>
{% if not simple_list_page %}
<div class="blog-pagination">
{% if last_page_num %}
<a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Previous</a>
{% endif %}
<a class="all-posts-link" href="{{ group.absolute_url }}/all">All posts</a>
{% if next_page_num %}
<a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Next</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
You could reverse the loop and use modulus to split the posts into 2 columns
change your opening loop to:
<div class="span5">{% for content in contents|reverse %}
and then change the closing of the loop to:
{% if loop.index % 5 == 0 %}
</div><div class="span5">
{% endif %}
{% endfor %}
</div> <!-- close the span5 we opened -->
</div> <!-- close the parent loop container -->