@total_onion/onion-library 3.2.0 → 3.2.2

package/components/component-content-image-v3/content-image-v3.twig

@@ -0,0 +1,77 @@
+{% set enableContentImage = fields.enable_content_image %}
+{% set enablePostImage = fields.enable_post_image %}
+{% set contentImage = get_image(fields.ci_image) %}
+{% set isSVG = contentImage.post_mime_type == 'image/svg+xml' %}
+{% set inlineRawSVG = fields.inline_raw_svg %}
+{% set productImageSelect = fields.product_image_select|ru %}
+{% set post = get_post(fields.product) %}
+{% set renderDynamic = fields.render_dynamic|default(0) %}
+{% set suffix = fields.suffix %}
+{% set sizes = contentImageSizes|default('auto,(min-width: 1440px) 50vw, (min-width: 1024px) 50vw, (min-width: 768px) 50vw, 100vw') %}
+{% set contentImagePosHoriz = '--image-position-horizontal: ' ~ fields.image_position_horizontal|ru ~ ';' %}
+{% set contentImagePosOffsetHoriz = '--image-position-offset-horizontal: ' ~ fields.image_position_offset_horizontal ~ '%;' %}
+{% set contentImagePosVert = '--image-position-vertical: ' ~ fields.image_position_vertical|ru ~ ';' %}
+{% set contentImagePosOffsetVert = '--image-position-offset-vertical: ' ~ fields.image_position_offset_vertical ~ '%;' %}
+{% set contentImageRotation = '--image-rotation: ' ~ fields.image_rotation ~ 'deg;'  %}
+{% set contentImageBorderRadius = '--content-image-border-radius: ' ~ fields.content_image_border_radius ~ ';' %}
+{% set widthVars = '--image-max-width-desktop: 100%;  --image-max-width-landscape: 100%;--image-max-width-portrait: 100%; --image-max-width-mobile: 100%;' %}
+{% if fields.enable_image_max_width %}
+	{% set imageMaxWidthDesktop = '--image-max-width-desktop: ' ~ fields.image_max_width_desktop ~ ';' %}
+	{% set imageMaxWidthLandscape = '--image-max-width-landscape: ' ~ fields.image_max_width_desktop ~ ';' %}
+	{% set imageMaxWidthPortrait = '--image-max-width-portrait: ' ~ fields.image_max_width_portrait ~ ';' %}
+	{% set imageMaxWidthMobile = '--image-max-width-mobile: ' ~ fields.image_max_width_mobile ~ ';' %}
+	{% set widthVars = imageMaxWidthDesktop ~ imageMaxWidthLandscape ~ imageMaxWidthPortrait ~ imageMaxWidthMobile %}
+{% endif %}
+{% set imageStyles = contentImagePosHoriz ~ contentImagePosOffsetHoriz ~ contentImagePosVert ~ contentImagePosOffsetVert ~ contentImageRotation ~ contentImageBorderRadius ~ widthVars %}
+{% set imageFields = [] %}
+{% set imageFields = imageFields|merge({'enable_image' : true}) %}
+{% set imageClassname = 'post-info__post' %}
+{% set imageFields = imageFields|merge({'image' : attribute(post, 'post_' ~ productImageSelect)}) %}
+{% if enableContentImage and contentImage is not empty %}
+	{% if isSVG %}
+		{% if inlineRawSVG %}
+			<style>
+				.{{blockClassName|default('cbl-image')}}__content-image.{{block.id}}{
+					{{imageStyles}}
+				}
+			</style>
+			{% set attributes = "alt=" ~ contentImage.alt ~ " width=" ~ contentImage.width ~ " height=" ~ contentImage.height ~ " " %}
+			{{get_raw_svg(contentImage.id, blockClassName|default('cbl-image') ~ '__content-image ' ~ block.id, attributes)}}
+		{% else %}
+			<style>
+				.{{blockClassName|default('cbl-image')}}__content-image.{{block.id}}{
+					{{imageStyles}}
+				}
+			</style>
+			<img loading="lazy" data-elementname="content-image" data-renderdynamic="{{renderDynamic}}" data-patternsuffix="{{suffix}}" class="{{blockClassName|default('cbl-image')}}__content-image content-image {{block.id}}" src="{{gt_image_mainsrc(contentImage)}}" alt="{{contentImage.alt}}" width="{{contentImage.width}}" height="{{contentImage.height}}">
+		{% endif %}
+	{% else %}
+		<style>
+			.{{blockClassName|default('cbl-image')}}__content-image.{{block.id}}{
+				{{imageStyles}}
+			}
+		</style>
+		{% if fields.enable_content_image_link %}
+			<a href="{{fields.content_image_link.url}}" class="{{blockClassName|default('cbl-image')}}__content-image-link">
+			{% endif %}
+			<img loading="lazy" data-elementname="content-image" data-pattern-dynamic="{{renderDynamic}}" data-pattern-suffix="{{suffix}}" class="{{blockClassName|default('cbl-image')}}__content-image content-image {{block.id}}" sizes="{{sizes}}" src="{{gt_image_mainsrc(contentImage)}}" srcset="{{gt_image_srcset(contentImage)}}" alt="{{contentImage.alt}}" width="{{contentImage.width}}" height="{{contentImage.height}}">
+			{% if fields.enable_content_image_link %}
+			</a>
+		{% endif %}
+	{% endif %}
+{% elseif enableContentImage and enablePostImage %}
+	{% set image = get_image(imageFields.image) %}
+	<style>
+		.{{blockClassName|default('cbl-image')}}__content-image.{{block.id}}{
+			{{imageStyles}}
+		}
+	</style>
+	{% if fields.enable_content_image_link %}
+		<a href="{{fields.content_image_link.url}}" class="{{blockClassName|default('cbl-image')}}__content-image-link">
+		{% endif %}
+		<img loading="lazy" data-elementname="content-image" data-pattern-dynamic="{{renderDynamic}}" data-pattern-suffix="{{suffix}}" class="{{blockClassName|default('cbl-image')}}__content-image content-image {{block.id}}" src="{{ gt_image_mainsrc(image) }}" srcset="{{ gt_image_srcset(image) }}" width="{{ image.width }}" sizes="{{sizes}}" height="{{ image.height }}" alt="{{ image.alt }}" title="{{ image.title }}"/>
+
+		{% if fields.enable_content_image_link %}
+		</a>
+	{% endif %}
+{% endif %}