Использование редактора презентаций
Шаблоны презентаций
Упрощенный синтаксис, более мощный функционал
В блоке во вкладке Params нужно указать twig=1 и disabledCkEditor=1
Таким образом блок станет поддерживать twig
При этом нужно включить плагин Twig, нужно учитывать если у проект включена тема, которая является наследуюмой, то включение плагина не рекомендуется, тогда нужно использовать другие шаблоны
Пример тема Chersonese - является наследуемой темой от темы TM58887, включение плагина Twig - не рекомендуется
Презентация “С логотипом” (with_logo)
<div class="page">
{{ _view.element('Dompdf.pdf/logo', {'offer': offer}) }}
<div class="container">
<div class="row">
<div class="left-col">
{{ _view.element('Dompdf.pdf/title', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/address', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/price', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/params_block', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/advertisement', {'offer': offer}) }}
{% if offer.Youtube %}
{{ _view.element('Youtube.pdf/youtube_advertisement', {'offer': offer}) }}
{% endif %}
{{ _view.element('Dompdf.pdf/map', {'offer': offer}) }}
</div>
<div class="right-col">
{{ _view.element('Dompdf.pdf/picture', {'pictures': offer.AdvertisementPicture, 'maxLimit': '10'}) }}
</div>
<div class="clear"></div>
</div>
<div class="row">
{{ _view.element('Dompdf.pdf/tenants', {'offer': offer}) }}
</div>
</div>
</div>
Презентация “(New) С логотипом” (with_logo_new)
<div class="page">
{{ _view.element('Dompdf.pdf/logo', {'offer': offer}) }}
<div class="container">
<div class="row">
<div class="left-col">
{{ _view.element('Dompdf.pdf/title', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/address', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/price', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/params_block', {'offer': offer}) }}
{% if offer.Youtube %}
{{ _view.element('Youtube.pdf/youtube_advertisement', {'offer': offer}) }}
{% endif %}
{{ _view.element('Dompdf.pdf/map', {'offer': offer}) }}
</div>
<div class="right-col">
{{ _view.element('Dompdf.pdf/picture', {'pictures': offer.AdvertisementPicture, 'maxLimit': '10'}) }}
</div>
<div class="clear"></div>
</div>
<div class="row">
{{ _view.element('Dompdf.pdf/advertisement', {'offer': offer, 'title': 'Описание'|__, 'defaultTextLimit': 1250}) }}
</div>
</div>
</div>
Презентация “Без логотипа” (without_logo)
<div class="page">
<div class="container">
<div class="row">
<div class="left-col">
{{ _view.element('Dompdf.pdf/title', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/address', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/price', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/params_block', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/advertisement', {'offer': offer}) }}
{% if offer.Youtube %}
{{ _view.element('Youtube.pdf/youtube_advertisement', {'offer': offer}) }}
{% endif %}
{{ _view.element('Dompdf.pdf/map', {'offer': offer}) }}
</div>
<div class="right-col">
<div class="row">
{{ _view.element('Dompdf.pdf/picture', {'pictures': offer.AdvertisementPicture, 'maxLimit': '10'}) }}
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
Презентация “Не для рекламы” (not_for_advertising)
<div class="page">
<div class="container">
<div class="row">
<div class="left-col">
{{ _view.element('Dompdf.pdf/title', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/address', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/price', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/params_block', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/advertisement', {'offer': offer}) }}
{% if offer.Youtube %}
{{ _view.element('Youtube.pdf/youtube_advertisement', {'offer': offer}) }}
{% endif %}
{{ _view.element('Dompdf.pdf/map', {'offer': offer}) }}
</div>
<div class="right-col">
<div class="row">
{{ _view.element('Dompdf.pdf/picture', {'pictures': offer.AdvertisementPicture, 'maxLimit': '10'}) }}
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
Презентация “Подробная” (detailed)
<style>
.left-col {
width: 45%;
float: left;
}
.right-col {
float: right;
}
</style>
<div class="page">
<div class="container">
<div class="row">
<div class="left-col">
{{ _view.element('Dompdf.pdf/detailed/logo', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/detailed/title', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/address', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/detailed/price', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/params_block', {'offer': offer, 'title':'Параметры', 'filter': 'pdf'}) }}
</div>
<div class="right-col">
<div class="row">
{{ _view.element('Dompdf.pdf/detailed/main_picture', {'pictures': offer.AdvertisementPicture}) }}
{{ _view.element('Dompdf.pdf/detailed/map', {'offer': offer, 'title': 'Карта'|__}) }}
{{ _view.element('Dompdf.pdf/detailed/contact', {'offer': offer, 'first': true}) }}
{{ _view.element('Dompdf.pdf/detailed/about', {'offer': offer}) }}
</div>
</div>
<div class="clear"></div>
<div class="full_panels">
{{ _view.element('Dompdf.pdf/advertisement', {'offer': offer, 'title': 'Описание'|__, 'defaultTextLimit': 1250}) }}
</div>
</div>
</div>
</div>
{{ _view.element('Dompdf.pdf/detailed/picture', {'offer': offer})}}
Презентация “Краткая” (short)
<style>
.short-block {position: relative}
.pdf-short-top {margin-bottom: 20px}
.pdf-short-top-site-name-wrapper {width: 420px;height: 0;float: left;border-bottom: 100px solid #67067b;border-right: 100px solid transparent;font-weight: bold;}
.pdf-short-top-site-name {padding: 15px 0 0 15px;color: #ff6a79;font-size: 14px;text-transform: uppercase;}
.pdf-short-top-adress-wrapper {padding: 5px 0 0 15px;color: white;font-size: 12px;}
.pdf-short-top-object {padding: 5px 0 0 15px;color: white;}
.pdf-short-top-logo {float: right;}
.pdf-short-top-logo img {margin: 10px 0;}
.short-title-wrapper {}
.short-title {float: left;color: #67067b;font-size: 16px;padding: 15px 0;height: 50px;font-weight: bold;}
.short-price {float: right;}
.short-line-after-price {border-top: 25px solid transparent;border-right: 30px solid #e56766;border-bottom: 25px solid transparent;float: left;}
.short-price-content {background-color: #e56766;color: white;font-size: 18px;padding: 11px 0;margin-left: 30px;}
.short-pictures.photos {margin-bottom: 20px}
.short-pictures.photos .main-photo-small {padding: 10px 35px 10px 25px;background-color: #ebebeb;text-align: center;}
.short-pictures.photos .main-photo-small a {display: block;}
.short-criteria {text-align: justify;margin-bottom: 20px}
.short-criteria-locations {display: inline-block; width: 220px; vertical-align: top;}
.short-criteria-locations--title {width: 255px; color:#67067b; font-size: 16px; font-weight: bold;}
.pdf-short-locations {margin-left: 20px}
.short-criteria-params {display: inline-block; width: 220px; margin-left: 40px; vertical-align: top;}
.short-criteria-params--title {width: 255px; color:#67067b; font-size: 16px; font-weight: bold;}
.pdf-short-params {margin-left: 20px}
.short-criteria-area {display: inline-block; width: 220px; margin-left: 40px; vertical-align: top;}
.short-criteria-area--title {width: 255px; color:#67067b; font-size: 16px; font-weight: bold;}
.pdf-area-list {margin-left: 20px}
.short-description {}
.short-description-p {color: #67067b;font-size: 16px;font-weight: bold;}
.rieltor-div {position: absolute;bottom: 0;}
.background-rieltor {margin-right: 60px;}
.background-rieltor--angle {width: 220px;float: right;height: 150px;background-color: #67067b;transform: skewX(45deg);}
.background-rieltor--wrapper {margin-top: 25px;width: 620px;height: 0;border-bottom: 100px solid #ebebeb;border-right: 100px solid transparent;font-weight: bold;float: left}
.pdf-short-rieltor-picture {float: left; height: 80px; width: 70px; padding: 10px 30px 10px 20px;}
.pdf-short-rieltor-picture img {height: 80px; max-width: 70px}
.pdf-short-rieltor-info {margin-left: 100px;}
.pdf-short-rieltor-info-t {color:#67067b; font-size: 16px; font-weight: bold;}
.pdf-short-rieltor-info-name {color:#606060; font-size: 12px; font-weight: lighter;}
.pdf-short-rieltor-info-phone {color:#606060; font-size: 12px; font-weight: lighter;}
.pdf-short-rieltor-info-email {color:#606060; font-size: 12px; font-weight: lighter;}
.pdf-short-rieltor-info-ext {color:#606060; font-size: 12px; font-weight: lighter;}
</style>
<div class="page short-block">
{{ _view.element('Dompdf.pdf/short/top', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/short/title', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/short/pictures', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/short/criteria', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/short/text', {'offer': offer}) }}
{% if offer.Youtube %}
{{ _view.element('Youtube.pdf/youtube_advertisement', {'offer': offer}) }}
{% endif %}
{{ _view.element('Dompdf.pdf/short/realtor', {'offer': offer}) }}
</div>
Презентация “Краткая (Синяя)” (short_blue)
<style>
.page-main {padding: 1.5em 1.5em 1.5em 2.5em;}
/* Top block */
.location-block {padding: 5px 0 0 15px;color: #111;}
.location-title {font-size: 13px;}
.location-name {font-size: 14px;font-weight: bold}
.location-before-block {position: absolute;width: 380px;height: 0;border-bottom: 110px solid #43bdea;border-right: 140px solid transparent;}
.location-after-block {position: absolute;width: 288px;height: 0;border-bottom: 12px solid #BABABA;font-weight: bold;margin-top: 110px;margin-left: 232px;transform: skewX(50deg);}
/* Area */
.area-list {font-size: 14px !important;font-weight: bold !important;}
/* Params */
.params-list {font-size: 14px !important;font-weight: lighter !important;color: black !important;font-weight: bold;}
/* Realtor */
.background-realtor {margin-right: 80px;}
.realtor-before-block {width: 320px;float: right;height: 95px;background-color: #43bdea;transform: skewX(48deg);}
.realtor-after-block {width: 520px;height: 0;border-bottom: 95px solid #BABABA;border-right: 100px solid transparent;font-weight: bold;float: left;}
.realtor-photo {float: left;height: 80px;width: 70px;padding: 10px 30px 10px 20px;}
.realtor-photo img {height: 80px;max-width: 70px;}
.realtor-info {margin-left: 115px;margin-top: 10px;}
.realtor-info p {color: #111;font-size: 11px;}
.realtor-info .title {color: #111;text-indent: 0;font-size: 16px;font-weight: bold;}
/* Price */
.price-block {margin: 15px 0 0 0;display: block;height: 70px;}
.price-before-block {position: absolute;width: 255px;height: 0;border-bottom: 45px solid #43bdea;border-right: 50px solid transparent;font-weight: bold;}
.price-after-block {position: absolute;width: 176px;height: 0;border-bottom: 12px solid #BABABA;font-weight: bold;margin-top: 45px;margin-left: 129px;transform: skewX(50deg);}
.price-block .price {padding: 5px 0 0 15px;color: #111;font-size: 14px;}
/* Others */
h4 {font-weight: bold !important;color: #111 !important;font-size: 18px !important;margin-bottom: 10px;}
.logo {z-index: 10;margin-left: 580px;margin-top: 0;margin-bottom: 0;}
.item ul {text-indent: 0;list-style-type: none !important;}
.item p {text-indent: 0;font-size: 14px !important;font-weight: lighter !important;}
.short-title {color: #000;font-size: 16px;width: 250px;font-weight: bold;margin-bottom: 15px;}
.main-info {height: 950px;}
</style>
<div class="page-main">
<div class="container">
<div style="margin-bottom: 30px; height: 120px">
{{ _view.element('Dompdf.pdf/short_blue/top', {'offer': offer}) }}
</div>
<div class="row main-info">
<div class="left-col">
{{ _view.element('Dompdf.pdf/short_blue/rentTitle', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/short_blue/area', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/short_blue/params', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/short_blue/price', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/short_blue/descriptions', {'offer': offer}) }}
</div>
<div class="right-col" style="margin-top: 5px;">
<div class="row">
{{ _view.element('Dompdf.pdf/short_blue/main_picture', {'pictures': offer.AdvertisementPicture}) }}
{{ _view.element('Dompdf.pdf/short_blue/main_plan', {'pictures': offer.AdvertisementPicture}) }}
{{ _view.element('Dompdf.pdf/short_blue/map', {'offer': offer}) }}
</div>
</div>
</div>
<div class="clear" style="height: 22.5px"></div>
<div class="short_blue-contractor">
{{ _view.element('Dompdf.pdf/short_blue/realtor', {'offer': offer}) }}
</div>
</div>
</div>
Презентация “СityPro” (city_pro)
<style>
body {font-family: "times-new-roman";font-size: 15.5px;width: 100%;}
.item p {text-indent: 0;}
.bottom-page{position: absolute;left: 0;bottom: 0;width: 100%;height: 400px;}
.left-col {top: 0;margin-top: 0;padding-top: 0;}
.item h4 {font-size: 23px !important;font-weight: normal;}
.p {font-size: 15px !important;}
</style>
<div class="page">
<div class="main-page">
{{ _view.element('Dompdf.pdf/city_pro/logo', {'offer': offer}) }}
<div class="clearbox"></div>
<div class="container">
<div class="row">
<div class="left-col">
{{ _view.element('Dompdf.pdf/city_pro/top', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/city_pro/rent', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/city_pro/price', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/city_pro/costs', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/city_pro/tax', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/city_pro/description', {'offer': offer}) }}
</div>
<div class="right-col">
<div class="row">
{{ _view.element('Dompdf.pdf/city_pro/picture', {'pictures': offer.AdvertisementPicture}) }}
<div style="position: absolute;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="bottom-page">
<div class="row">
<div class="left-col" style="margin-top: 0; ">
{{ _view.element('Dompdf.pdf/city_pro/address', {'offer': offer}) }}
{{ _view.element('Dompdf.pdf/city_pro/map', {'offer': offer}) }}
</div>
<div class="right-col">
<div class="row">
<div style="position: absolute;"></div>
{{ _view.element('Dompdf.pdf/city_pro/bottom_right', {'offer': offer}) }}
</div>
</div>
</div>
</div>
</div>
Индивидуальные доработки в презентациях
Скрыть почту в презентации:
Презентации:
С логотипом и С логотипом (Новая)
{{ _view.element('Dompdf.pdf/logo', {'offer': offer, 'isShowUserEmail': false}) }}
Подробная
{{ _view.element('Dompdf.pdf/detailed/contact', {'offer': offer, 'first': true, 'isShowUserEmail': false}) }}
{{ _view.element('Dompdf.pdf/detailed/picture', {'offer': offer, 'isShowUserEmail': false})}}
Краткая
{{ _view.element('Dompdf.pdf/short/top', {'offer': offer, 'isShowUserEmail': false}) }}
{{ _view.element('Dompdf.pdf/short/realtor', {'offer': offer, 'isShowUserEmail': false}) }}
Краткая (Синяя)
{{ _view.element('Dompdf.pdf/short_blue/realtor', {'offer': offer, 'isShowUserEmail': false}) }}
На примере ниже вариант вывода параметров "стоимость + стоимость кв.метра" и "стоимость + стоимость кв. метра в год" в зависимости от Типа сделки
{% if offer.Advertisement.rent == 0 %}
<div class="item">Цена кв.м: {{ price.format(offer.Advertisement.price_area) }} Р</div>
{% endif %}
{% if offer.Advertisement.rent == 1 %}
<div class="item">Цена кв.м. в год: {{ price.format(offer.Advertisement.price_area_year) }} Р</div>
{% endif %}