Card Multi-Image
Card Text (top) Card List Card Text (bottom) Social media
{data.tx_t3sbootstrap_cardfooter -> f:format.raw()}
Card Title (default)
{data.bodytext -> f:format.crop(maxCharacters: '{card.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()} {data.bodytext -> f:format.html()} {data.tx_t3sbootstrap_bodytext -> f:format.crop(maxCharacters: '{card.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()} {data.tx_t3sbootstrap_bodytext -> f:format.html()}
{data.tx_t3sbootstrap_bodytext -> f:format.crop(maxCharacters: '{card.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()} {data.tx_t3sbootstrap_bodytext -> f:format.html()}
{card.button.text -> f:format.raw()} {f:translate(key: 'LLL:EXT:t3sbootstrap/Resources/Private/Language/locallang.xlf:more')}
figure.multiImageCircle.image{overflow:inherit;display:block;} img.circularshadow {box-shadow: 3px 3px 20px rgb(0 0 0 / 50%);} .icon-block a { display: inline-block; font-size: 16px; color: #000; text-align: center; border: 1px solid #000; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; margin: 0 5px; z-index: 1; position: relative; } .icon-block a:hover { color: #fff; background-color: #000; } @media (min-width: 768px) { .icon-block a { font-size: 20px; width: 40px; height: 40px; line-height: 40px; } } figure#multiImage-{data.uid}::before { width:0; content:''; position:absolute; bottom:0; right:0; border-bottom: var(--t3sslope-{data.uid}) solid #fff; border-left: var(--t3swidth-{data.uid}) solid transparent; } :root { --t3sslope-{data.uid}: 0; --t3swidth-{data.uid}: 0; } function t3sbProfileCardImage(multiImage) { var circleFigure = multiImage.nextElementSibling; if (circleFigure.nodeName == 'FIGURE') { var circleImage = circleFigure.querySelectorAll('img')[0], percent = circleFigure.getAttribute('data-percent'), circleWidth = multiImage.clientWidth * percent, slope = multiImage.getAttribute('data-slope') / 100; circleImage.width = circleWidth; circleImage.height = circleWidth; if (slope != 0) { var slopeHeight = multiImage.clientHeight * slope, marginTop = (circleWidth + slopeHeight) / 2, idArray = multiImage.getAttribute('id').split('-'), uid = idArray[1]; circleFigure.style.top = '-'+marginTop+'px'; circleFigure.nextElementSibling.style.marginTop = '-'+marginTop+'px'; document.documentElement.style.setProperty('--t3sslope-'+uid, slopeHeight+'px'); document.documentElement.style.setProperty('--t3swidth-'+uid, multiImage.clientWidth+'px'); } else { circleFigure.style.top = '-'+circleWidth/2+'px'; if (circleFigure.nextSibling.nodeName == 'FIGURE') { circleFigure.nextSibling.style.marginTop = '-'+circleWidth/2+'px'; } else if (circleFigure.nextSibling.nextSibling) { circleFigure.nextSibling.nextSibling.style.marginTop = '-'+circleWidth/2+'px'; } else { circleFigure.nextSibling.style.marginTop = '-'+circleWidth/2+'px'; } } } } // Profile Card Card/ProfileCard.html document.querySelectorAll('.multiImage').forEach( multiImage => { t3sbProfileCardImage(multiImage); }); window.addEventListener('resize', function(event) { document.querySelectorAll('.multiImage').forEach( multiImage => { t3sbProfileCardImage(multiImage); }); }, true);