Hey,
Wondering if anyone can help? I am looking to use focal point in a new section i am building and just cant seem to get it to center to the focal point.
I have checked the image and there is a focal_point, and it is passing the following as a inline style. Theme is Dawn
object-position:41.8602% 50.1944%;
Section looks like this:
{% if section.settings.title != blank %}
## {{ section.settings.title }}
{% endif %}
{%- style -%}
.custom-grid {
display: grid;
grid-gap: 20px;
grid-auto-rows: var(--card-height-mobile);
grid-template-columns: repeat({{ section.settings.columns_mobile }}, 1fr);
}
@media screen and (min-width: 750px) {
.custom-grid {
grid-auto-rows: var(--card-height-desktop);
grid-template-columns: repeat({{ section.settings.columns_desktop }}, 1fr);
}
}
.custom-grid__item {
position: relative;
overflow: hidden;
}
/* Forces the image to fill its container entirely */
.custom-grid__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.custom-grid__overlay {
position: absolute;
padding: 0.5rem;
color: #fff;
font-size: 1.2em;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
pointer-events: none;
}
.custom-grid__overlay--bottom_left {
bottom: 10px;
left: 10px;
}
.custom-grid__overlay--bottom_center {
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.custom-grid__overlay--bottom_right {
bottom: 10px;
right: 10px;
}
.custom-grid__link {
display: block;
text-decoration: none;
color: inherit;
}
.section-custom-grid__title {
text-align: center;
margin-bottom: 20px;
font-size: 2em;
}
.section-custom-grid {
padding: 20px;
}
{%- endstyle -%}
{% for block in section.blocks %}
{% if block.settings.link != blank %}
{% endif %}
{% if block.settings.image != blank %}
{{ block.settings.image
| image_url: width: 1500
| image_tag:
alt: block.settings.alt_text,
class: 'custom-grid__image',
width: nil,
height: nil,
sizes: '(min-width:750px) 100vw, 100vw',
object-fit: cover
}}
{% else %}
{{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if block.settings.link != blank %}
{% endif %}
{{ block.settings.heading }}
{% endfor %}
{% schema %}
{
"name": "Custom Grid Section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Section Title",
"default": "Custom Grid Section"
},
{
"type": "range",
"id": "columns_desktop",
"label": "Columns on Desktop",
"min": 1,
"max": 6,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "columns_mobile",
"label": "Columns on Mobile",
"min": 1,
"max": 4,
"step": 1,
"default": 1
},
{
"type": "range",
"id": "card_height_mobile",
"label": "Card Height (Mobile) (px)",
"min": 50,
"max": 600,
"step": 10,
"default": 200
},
{
"type": "range",
"id": "card_height_desktop",
"label": "Card Height (Desktop) (px)",
"min": 50,
"max": 600,
"step": 10,
"default": 200
}
],
"blocks": [
{
"type": "grid_item",
"name": "Grid Item",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "alt_text",
"label": "Alt Text",
"default": "Image description"
},
{
"type": "url",
"id": "link",
"label": "Link URL (page, collection, etc.)"
},
{
"type": "text",
"id": "heading",
"label": "Overlay Heading",
"default": "Overlay Heading"
},
{
"type": "select",
"id": "overlay_position",
"label": "Overlay Position",
"default": "bottom_left",
"options": [
{
"value": "bottom_left",
"label": "Bottom Left"
},
{
"value": "bottom_center",
"label": "Bottom Center"
},
{
"value": "bottom_right",
"label": "Bottom Right"
}
]
},
{
"type": "color",
"id": "overlay_background_color",
"label": "Overlay Background Color",
"default": "#000000"
}
]
}
],
"presets": [
{
"name": "Custom Grid Section",
"category": "Custom",
"blocks": [
{
"type": "grid_item"
},
{
"type": "grid_item"
},
{
"type": "grid_item"
}
]
}
]
}
{% endschema %}
