Hi there!
Any tips on adding Image Overlay Opacity To multirow in Sense theme, please?
In the Theme Editor, I only see it in the image banner or slideshow.
Thanks in advance!
You can add this CSS code to Custom CSS of your section to add overlay opacity for your images in multirow section
.multirow__inner media>img { opacity:0.6; }
Hi @poma
This is David at SalesHunterThemes.
You can try to replace the code section file multirow.liquid
Then section will support for the function as you want.
{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
.multirow{
--overlay-opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }}
}
.image-with-text__media{
position: relative;
}
.image-with-text__media:before{
content: '';
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
opacity: var(--overlay-opacity);
}
{%- endstyle -%}
{%- liquid
if section.settings.image_layout contains 'right'
assign odd_class = ' image-with-text__grid--reverse'
else
assign even_class = ' image-with-text__grid--reverse'
endif
if section.settings.row_color_scheme == section.settings.section_color_scheme
assign no_content_background = true
endif
if settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0
assign no_content_styles = true
endif
if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0
assign borders_class = ' collapse-borders'
endif
if no_content_background and no_content_styles
assign padding_class = ' collapse-padding'
endif
unless no_content_background and no_content_styles
assign corners_class = ' collapse-corners'
endunless
-%}
{%- for block in section.blocks -%}
{%- if block.settings.image != blank -%}
{%- capture sizes -%}
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px,
(min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)
{%- endcapture -%}
{{
block.settings.image
| image_url: width: 1500
| image_tag: loading: 'lazy', sizes: sizes, widths: '165, 360, 535, 750, 1070, 1500'
}}
{%- else -%}
{{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if block.settings.caption -%}
{{ block.settings.caption | escape }}
{%- endif -%}
{%- if block.settings.heading -%}
##
{{ block.settings.heading }}
{%- endif -%}
{%- if block.settings.text -%}
{{ block.settings.text }}
{%- endif -%}
{%- if block.settings.button_label != blank -%}
{{ block.settings.button_label | escape }}
{%- endif -%}
{%- endfor -%}
{% schema %}
{
"name": "t:sections.multirow.name",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.image-banner.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "adapt",
"label": "t:sections.multirow.settings.image_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.multirow.settings.image_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.multirow.settings.image_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.multirow.settings.image_height.options__4.label"
}
],
"default": "medium",
"label": "t:sections.multirow.settings.image_height.label"
},
{
"type": "select",
"id": "desktop_image_width",
"options": [
{
"value": "small",
"label": "t:sections.multirow.settings.desktop_image_width.options__1.label"
},
{
"value": "medium",
"label": "t:sections.multirow.settings.desktop_image_width.options__2.label"
},
{
"value": "large",
"label": "t:sections.multirow.settings.desktop_image_width.options__3.label"
}
],
"default": "medium",
"label": "t:sections.multirow.settings.desktop_image_width.label",
"info": "t:sections.multirow.settings.desktop_image_width.info"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.multirow.settings.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.multirow.settings.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.multirow.settings.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.multirow.settings.heading_size.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.multirow.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.multirow.settings.text_style.options__2.label"
}
],
"default": "body",
"label": "t:sections.multirow.settings.text_style.label"
},
{
"type": "select",
"id": "button_style",
"options": [
{
"value": "primary",
"label": "t:sections.multirow.settings.button_style.options__1.label"
},
{
"value": "secondary",
"label": "t:sections.multirow.settings.button_style.options__2.label"
}
],
"default": "secondary",
"label": "t:sections.multirow.settings.button_style.label"
},
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "top",
"label": "t:sections.multirow.settings.desktop_content_position.options__1.label"
},
{
"value": "middle",
"label": "t:sections.multirow.settings.desktop_content_position.options__2.label"
},
{
"value": "bottom",
"label": "t:sections.multirow.settings.desktop_content_position.options__3.label"
}
],
"default": "middle",
"label": "t:sections.multirow.settings.desktop_content_position.label",
"info": "t:sections.multirow.settings.desktop_content_position.info"
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.multirow.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.multirow.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.multirow.settings.desktop_content_alignment.options__3.label"
}
],
"default": "left",
"label": "t:sections.multirow.settings.desktop_content_alignment.label"
},
{
"type": "select",
"id": "image_layout",
"options": [
{
"value": "alternate-left",
"label": "t:sections.multirow.settings.image_layout.options__1.label"
},
{
"value": "alternate-right",
"label": "t:sections.multirow.settings.image_layout.options__2.label"
},
{
"value": "align-left",
"label": "t:sections.multirow.settings.image_layout.options__3.label"
},
{
"value": "align-right",
"label": "t:sections.multirow.settings.image_layout.options__4.label"
}
],
"default": "alternate-left",
"label": "t:sections.multirow.settings.image_layout.label",
"info": "t:sections.multirow.settings.image_layout.info"
},
{
"type": "color_scheme",
"id": "section_color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
},
{
"type": "color_scheme",
"id": "row_color_scheme",
"label": "t:sections.multirow.settings.container_color_scheme.label",
"default": "background-1"
},
{
"type": "header",
"content": "t:sections.multirow.settings.header_mobile.content"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.multirow.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.multirow.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.multirow.settings.mobile_content_alignment.options__3.label"
}
],
"default": "left",
"label": "t:sections.multirow.settings.mobile_content_alignment.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "row",
"name": "t:sections.multirow.blocks.row.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.multirow.blocks.row.settings.image.label"
},
{
"type": "text",
"id": "caption",
"default": "Caption",
"label": "t:sections.multirow.blocks.row.settings.caption.label"
},
{
"type": "inline_richtext",
"id": "heading",
"default": "Row",
"label": "t:sections.multirow.blocks.row.settings.heading.label"
},
{
"type": "richtext",
"id": "text",
"default": "
Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
",
"label": "t:sections.multirow.blocks.row.settings.text.label"
},
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.multirow.blocks.row.settings.button_label.label"
},
{
"type": "url",
"id": "button_link",
"label": "t:sections.multirow.blocks.row.settings.button_link.label"
}
]
}
],
"presets": [
{
"name": "t:sections.multirow.presets.name",
"blocks": [
{
"type": "row"
},
{
"type": "row"
},
{
"type": "row"
}
]
}
]
}
{% endschema %}