TextAndImage.html

{assign var=imageOnLeftClass value='quiqqer-textImage__imageOnRight'}
{if $imageOnLeft}
    {assign var=imageOnLeftClass value='quiqqer-textImage__imageOnLeft'}
{/if}

{assign var=imageZoomClass value=''}
{if $imageZoom}
    {assign var=imageZoomClass value='quiqqer-textImage-image__imageZoom'}
{/if}



<div class="quiqqer-textImage {$imageOnLeftClass}">
    {if $imageOnLeft}
    <div class="quiqqer-textImage-box quiqqer-textImage-image {$fullImageHeight} {$imgWidthClass} {$imageZoomClass} mobile-grid-100">
        {if $img}
            {assign var=inlineStyle value=''}
            {if $maxImageWidth}
                {assign var=inlineStyle value="max-width: {$maxImageWidth}px; width: 100%;"}
            {/if}

            {image src=$img width=$maxImageWidth style=$inlineStyle class="{$imageShadow}" loading="lazy" data-zoom="$imageZoom" data-src="{$img}"}
        {/if}
    </div>
    <div class="quiqqer-textImage-box quiqqer-textImage-content {$textWidthClass} mobile-grid-100"
         style="align-items: {$textPosition};">
        <div class="quiqqer-textImage-content-inner">
            {if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
            <header>
                <h1>{$this->getAttribute('frontendTitle')}</h1>
            </header>
            {/if}

            {$this->getAttribute('content')}
        </div>
    </div>
    {else}
    <div class="quiqqer-textImage-box quiqqer-textImage-content {$textWidthClass} mobile-grid-100"
         style="align-items: {$textPosition};">
        <div class="quiqqer-textImage-content-inner">
            {if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
            <header>
                <h1>{$this->getAttribute('frontendTitle')}</h1>
            </header>
            {/if}

            {$this->getAttribute('content')}
        </div>
    </div>
    <div class="quiqqer-textImage-box quiqqer-textImage-image {$fullImageHeight} {$imgWidthClass} {$imageZoomClass} mobile-grid-100">
        {if $img}
            {assign var=inlineStyle value=''}
            {if $maxImageWidth}
                {assign var=inlineStyle value="max-width: {$maxImageWidth}px; width: 100%;"}
            {/if}

            {image src=$img width=$maxImageWidth style=$inlineStyle class={$imageShadow} loading="lazy" data-zoom="$imageZoom" data-src="{$img}"}
        {/if}
    </div>
    {/if}
</div>