{% macro product_image_square(website_image, css_class="") %} <div class="product-image product-image-square {% if not website_image -%} missing-image {%- endif %} {{ css_class }}" {% if website_image -%} style="background-image: url('{{ frappe.utils.quoted(website_image) | abs_url }}');" {%- endif %}> </div> {% endmacro %} {% macro product_image(website_image, css_class="product-image", alt="") %} <div class="border text-center rounded {{ css_class }}" style="overflow: hidden;"> <img itemprop="image" class="website-image h-100 w-100" alt="{{ alt }}" src="{{ frappe.utils.quoted(website_image or 'no-image.jpg') | abs_url }}"> </div> {% endmacro %} {% macro media_image(website_image, name, css_class="") %} <div class="product-image sidebar-image-wrapper {{ css_class }}"> {% if not website_image -%} <div class="sidebar-standard-image"> <div class="standard-image" style="background-color: rgb(250, 251, 252);">{{name}}</div> </div> {%- endif %} {% if website_image -%} <a href="{{ frappe.utils.quoted(website_image) }}"> <img itemprop="image" src="{{ frappe.utils.quoted(website_image) | abs_url }}" class="img-responsive img-thumbnail sidebar-image" style="min-height:100%; min-width:100%;"> </a> {%- endif %} </div> {% endmacro %} {% macro render_homepage_section(section) %} {% if section.section_based_on == 'Custom HTML' and section.section_html %} {{ section.section_html }} {% elif section.section_based_on == 'Cards' %} <section class="container my-5"> <h3>{{ section.name }}</h3> <div class="row"> {% for card in section.section_cards %} <div class="col-md-{{ section.column_value }} mb-4"> <div class="card h-100 justify-content-between"> {% if card.image %} <div class="website-image-lazy" data-class="card-img-top h-75" data-src="{{ card.image }}" data-alt="{{ card.title }}"></div> {% endif %} <div class="card-body"> <h5 class="card-title">{{ card.title }}</h5> <p class="card-subtitle mb-2 text-muted">{{ card.subtitle or '' }}</p> <p class="card-text">{{ card.content or '' | truncate(140, True) }}</p> </div> <div class="card-body flex-grow-0"> <a href="{{ card.route }}" class="card-link">{{ _('More details') }}</a> </div> </div> </div> {% endfor %} </div> </section> {% endif %} {% endmacro %} {%- macro item_card(title, image, url, description, rate, category, is_featured=False, is_full_width=False, align="Left") -%} {%- set align_items_class = resolve_class({ 'align-items-end': align == 'Right', 'align-items-center': align == 'Center', 'align-items-start': align == 'Left', }) -%} {%- set col_size = 3 if is_full_width else 4 -%} {% if is_featured %} <div class="col-sm-{{ col_size*2 }} item-card"> <div class="card featured-item {{ align_items_class }}"> {% if image %} <div class="row no-gutters"> <div class="col-md-6"> <img class="card-img" src="{{ image }}" alt="{{ title }}"> </div> <div class="col-md-6"> {{ item_card_body(title, description, url, rate, category, is_featured, align) }} </div> </div> {% else %} <div class="col-md-12"> {{ item_card_body(title, description, url, rate, category, is_featured, align) }} </div> {% endif %} </div> </div> {% else %} <div class="col-sm-{{ col_size }} item-card"> <div class="card {{ align_items_class }}"> {% if image %} <div class="card-img-container"> <img class="card-img" src="{{ image }}" alt="{{ title }}"> </div> {% else %} <div class="card-img-top no-image"> {{ frappe.utils.get_abbr(title) }} </div> {% endif %} {{ item_card_body(title, description, url, rate, category, is_featured, align) }} </div> </div> {% endif %} {%- endmacro -%} {%- macro item_card_body(title, description, url, rate, category, is_featured, align) -%} {%- set align_class = resolve_class({ 'text-right': align == 'Right', 'text-center': align == 'Center' and not is_featured, 'text-left': align == 'Left' or is_featured, }) -%} <div class="card-body {{ align_class }}"> <div class="product-title">{{ title or '' }}</div> {% if is_featured %} <div class="product-price">{{ rate or '' }}</div> <div class="product-description ellipsis">{{ description or '' }}</div> {% else %} <div class="product-category">{{ category or '' }}</div> <div class="product-price">{{ rate or '' }}</div> {% endif %} </div> <a href="/{{ url or '#' }}" class="stretched-link"></a> {%- endmacro -%}