custom/plugins/CogiCmsBubbles/src/Resources/views/storefront/element/cms-element-cogi-bubbles.html.twig line 1

Open in your IDE?
  1. {% block element_cogi_bubbles %}
  3.     <div class="cms-element-{{ element.type }} {% if element.translated.config.hoverZoom.value %}cogi-bubbles-hover-zoom{% endif %}">
  5.         {% if element.translated.config.imageBorderWidth.value and element.translated.config.imageBorderColor.value %}
  6.             {% set border = 'border: ' ~ element.translated.config.imageBorderWidth.value ~ 'px solid ' ~ element.translated.config.imageBorderColor.value %}
  7.         {% endif %}
  9.         {% set images = element.data.getImages() %}
  10.         {% for index, bubble in element.translated.config.bubbles.value %}
  12.             {% set itemStyles = "" %}
  14.             {% if element.translated.config.bubbleWidth.value %}
  15.                 {% set itemStyles = itemStyles ~ "width:" ~ element.translated.config.bubbleWidth.value ~ "%;" %}
  16.             {% endif %}
  18.             {% if element.translated.config.bubbleMinWidth.value %}
  19.                 {% set itemStyles = itemStyles ~ "min-width:" ~ (element.translated.config.bubbleMinWidth.value + element.translated.config.bubblePadding.value * 2) ~ "px;" %}
  20.             {% endif %}
  22.             {% set itemTextStyles = "" %}
  24.             {% if element.translated.config.bubblePadding.value %}
  25.                 {% set itemStyles = itemStyles ~ "padding-left:" ~ element.translated.config.bubblePadding.value ~ "px;" %}
  26.                 {% set itemStyles = itemStyles ~ "padding-right:" ~ element.translated.config.bubblePadding.value ~ "px;" %}
  28.                 {% set margin = ((element.translated.config.bubblePadding.value > 5 ? element.translated.config.bubblePadding.value : 5) - 5) %}
  29.                 {% set itemTextStyles = itemTextStyles ~ "margin-left:-" ~ margin ~ "px;" %}
  30.                 {% set itemTextStyles = itemTextStyles ~ "margin-right:-" ~ margin ~ "px;" %}
  31.             {% endif %}
  33.             {% if bubble.url %}
  34.                 <a class="cogi-bubble-item" href="{{ bubble.url }}" {% if bubble.newTab %}target="_blank"{% endif %} style="{{ itemStyles }}">
  35.             {% else %}
  36.                 <div class="cogi-bubble-item" style="{{ itemStyles }}">
  37.             {% endif %}
  39.             <div class="cogi-bubble-image">
  40.                 {% if images[bubble.media] %}
  41.                     {% block element_text_on_image_media %}
  42.                         {% set attributes = {
  43.                             'class': 'cogi-bubble-image-img',
  44.                             'alt': (bubble.title ?: ''),
  45.                             'style': border
  46.                         } %}
  47.                         {% sw_thumbnails 'cogi-bubble-thumbnails' with {
  48.                             media: images[bubble.media].media,
  49.                             sizes: {
  50.                                 'default': '501px',
  51.                                 'xs': '501px',
  52.                                 'sm': '315px',
  53.                                 'md': '427px',
  54.                                 'lg': '333px',
  55.                                 'xl': '284px'
  56.                             }
  57.                         } %}
  58.                     {% endblock %}
  59.                 {% endif %}
  60.             </div>
  62.             <div class="cogi-bubble-text" style="{{ itemTextStyles }}">
  63.                 <p class="cogi-bubble-title" {% if bubble.titleColor or element.translated.config.defaultTitleColor.value %}style="color: {% if bubble.titleColor %}{{ bubble.titleColor }}{% else %}{% if element.translated.config.defaultTitleColor.value %}{{ element.translated.config.defaultTitleColor.value }}{% endif %}{% endif %}"{% endif %}>
  64.                     <strong>{{ bubble.title }}</strong>
  65.                 </p>
  66.                 <p class="cogi-bubble-content" {% if bubble.contentColor or element.translated.config.defaultContentColor.value %}style="color: {% if bubble.contentColor %}{{ bubble.contentColor }}{% else %}{% if element.translated.config.defaultContentColor.value %}{{ element.translated.config.defaultContentColor.value }}{% endif %}{% endif %}"{% endif %}>
  67.                     {{ bubble.content }}
  68.                 </p>
  69.             </div>
  71.             {% if bubble.url %}
  72.                 </a>
  73.             {% else %}
  74.                 </div>
  75.             {% endif %}
  77.         {% endfor %}
  79.     </div>
  81. {% endblock %}