Использование редактора презентаций
Шаблоны презентаций
Упрощенный синтаксис, более мощный функционал
В блоке во вкладке 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 %}