Smart rules in Landing Page

[BDemiri]

Hello,

I applied a smart rule to a module (Power Sec Hero) on my landing page so that the image could be read on both cell phones and computers. But nothing happens. And the image doesn't display properly on either computer or phone. I don't understand how to proceed.

Could you please help me?

Thank you,

Besart

[Jose10]

I have a problem with the “smart rules” if you can help me please:

I happen to have created a module that fulfills the carousel task, which I made with swiper js. The module works correctly, each slide has 2 columns, on the left an image and on the right text. This is dynamic, you can add as many slides as you want, and you can edit the image and text as you like. Both in the editor, in the preview and in the published page it works correctly. The problem appears when I apply smart rules, for example in my case, I have applied the smart rule of country, then for colombia I want to show some content and in mexico for example I want to show a different content. In the editor it looks correct, in the preview, it also looks good. The problem appears when I publish it, when I go to the public link no content appears. So I inspect the code in the browser and I can see that the structure is displayed (div, classes, id, etc), what I can not see is the content, it is as if it did not exist.
That is the problem that I can't solve.
Thanks for your help.

Translated with DeepL.com (free version)

[Crystal_Hopper]

Hi @Jose10! When you go to the public link, are you manipulating your browser to appear as if it is coming from the different countries? I believe the smart rules for countries are utilizing the IP Country Code and you'll have to have a tool that can change this. I've not worked with such tools myself but I've seen others do it. 

That there's no content at all suggests that in the Default state of the module, there is no content. Have you added content to the Default state? For example, when a visitor is coming from a country that does not have a smart rule, they will see the Default content. 

[Jose10]

Thank you very much for your answer and for your intention to help, thank you very much.

I will provide more details of what is happening:

• Module
  The module is a slider which uses the Swiper library https://swiperjs.com/ and works correctly without smart rules. Each slide consists of 2 columns, the left column is an image and the right column has image and text. These two columns are enclosed in a box which is a slide. These slides have a repeater which allows the user to add as many slides as desired.
  
  
• Things I have managed to discard:
  The problem has nothing to do with either the image or the text. I created another image and text module, but not a slider, and it looks correct, both with and without smart rules.
  
  
• Supposed conclusion.
  The problem is in the slider, because as I mentioned before, the image and text module work correctly, but apparently when the intelligent rule detects the slider there is a conflict.
  
  
• Clarification:
  The slider works correctly when the smart rules are not applied, the error occurs when I apply the smart rule of the country.
  It is true that I would need a VPN to verify if by putting another country different from mine, to be able to view what I have done, but in this case it does not apply because I am just adding the smart rule of my country. And in the case of other countries, I have people in those places who can verify what I am saying and the error continues to occur
  Also clarify that in the HubSpot editor everything is seen correctly and even in the preview, but when I visit the public page, that is where the error is detected.

I will show you the HTML, CSS and JS code, in addition, how I view the error and what I managed to see in the inspector

I could leave the error page, but I would need you to specify the country you are in please to apply the smart rule according to your location.

HTML

{% require_css %}
<style>
  {% scope_css %}

  .testimonial-slider {
    {{ module.style.spacing.desktop.css }}
  }
  .testimonial-slider .swiper-slide {
    grid-template-columns: {{ module.style.column_size.left ~ '%' }} {{ module.style.column_size.right ~ '%' }};
    {% if module.style.add_box_shadow %}
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    {% endif %}
  }

  {# ---- Tablet Breakpoint ---- #}

  @media (max-width: 992px) {
    .testimonial-slider {
      {{ module.style.spacing.tablet.css }}
    }
  }

  {# ---- Mobile Breakpoint ---- #}

  @media (max-width: 700px) {
    .testimonial-slider {
      {{ module.style.spacing.mobile.css }}
    }
  }

  {% end_scope_css %}
</style>
{% end_require_css %}

<div class="testimonial-slider">
  <div class="testimonial-slider__container">
    {% if module.add_text %}
    <div class="testimonial-slider__text"> 
      {{ module.text }}
    </div>
    {% endif %}  
    <div class="testimonial-slider__slides-container">
      <!-- Swiper -->
      <div class="swiper mySwiper testimonial-slider__swiper">
        <div class="swiper-wrapper testimonial-slider__wrapper">
          {% for item in module.add_edit_slides %}
          <div class="swiper-slide testimonial-slider__slide">
            <div class="testimonial-slider__slide-image">
              {% if item.image.image.src %} 
              {% set sizeAttrs = 'width="{{ item.image.image.width|escape_attr }}" height="{{ item.image.image.height|escape_attr }}"' %}
              {% if item.image.image.size_type == 'auto' %}
              {% set sizeAttrs = 'width="{{ item.image.image.width|escape_attr }}" height="{{ item.image.image.height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
              {% elif item.image.image.size_type == 'auto_custom_max' %}
              {% set sizeAttrs = 'width="{{ item.image.image.max_width|escape_attr }}" height="{{ item.image.image.max_height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
              {% endif %}
              {% set loadingAttr = item.image.image.loading != 'disabled' ? 'loading="{{ item.image.image.loading|escape_attr }}"' : '' %}
              <img src="{{ item.image.image.src|escape_url }}" alt="{{ item.image.image.alt|escape_attr }}" {{ loadingAttr }} {{ sizeAttrs }}>
              {% endif %}
            </div>
            <div class="testimonial-slider__slide-text">
              {% if item.text.add_image %}
              <div class="testimonial-slider__slide-text-logo">
                {% if item.text.image.src %}
                {% set sizeAttrs = 'width="{{ item.text.image.width|escape_attr }}" height="{{ item.text.image.height|escape_attr }}"' %}
                {% if item.text.image.size_type == 'auto' %}
                {% set sizeAttrs = 'width="{{ item.text.image.width|escape_attr }}" height="{{ item.text.image.height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
                {% elif item.text.image.size_type == 'auto_custom_max' %}
                {% set sizeAttrs = 'width="{{ item.text.image.max_width|escape_attr }}" height="{{ item.text.image.max_height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
                {% endif %}
                {% set loadingAttr = item.text.image.loading != 'disabled' ? 'loading="{{ item.text.image.loading|escape_attr }}"' : '' %}
                <img src="{{ item.text.image.src|escape_url }}" alt="{{ item.text.image.alt|escape_attr }}" {{ loadingAttr }} {{ sizeAttrs }}>
                {% endif %}
              </div>
              {% endif %}
              <div class="testimonial-slider__slide-text-content">
                {{ item.text.text }}
              </div>
              {% if item.text.add_name_and_rol %}
              <div class="testimonial-slider__slide-text-name">
                {{ item.text.name_and_rol }}
              </div>
              {% endif %}
            </div>
          </div>
          {% endfor %}
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>  
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

 
CSS

.testimonial-slider {
  width: 100%;
  padding: 0 20px;
} 

.testimonial-slider__container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.testimonial-slider__text * {
  margin: 0;
}

.testimonial-slider .swiper {
  width: 100%;
  height: 100%;
  padding: 20px 20px 90px;
}

.testimonial-slider .swiper-slide {
  min-height: 620px;
  display: grid;  
  border-radius: 20px;
  overflow: hidden;  
}

.testimonial-slider__slide-image img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.testimonial-slider__slide-text * {
  margin: 0;
}

.testimonial-slider__slide-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 20px 40px;
}

.testimonial-slider__slide-text img {
  max-width: 100px !important;
}

.testimonial-slider__slide-text-name {
  text-align: center;
  color: #0083FF;
  font-weight: 600;
}

.testimonial-slider .swiper-pagination {
  bottom: 40px !important;
}

@media (max-width: 700px) {
  .testimonial-slider .swiper-slide {
    grid-template-columns: 100% !important;
  }
}

JS

var swiper = new Swiper(".mySwiper", {
  spaceBetween: 40,
  loop: true,
  speed: 800,
  autoplay: {
    delay: 10000,
    disableOnInteraction: true,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

[Crystal_Hopper]

Hi @BDemiri couple of thoughts:

• Are you looking at the page using devices or browsers that don't have it cached?
  • Make sure you're previewing incognito mode and have done a clear cache, hard refresh
• What happens when you don't use a smart rule? 
  • Really the webpage should be responsive and you shouldn't need to use smart rules to make the images behave.
• Can you provide screenshots of what you're seeing?

[BDemiri]

Hi @Crystal_Hopper 

Thank you for your answer.

Even without an intelligent rule, the problem is the same. I tried previewing the page on my computer. I've also sent the link to view as an "external link" from both a computer and a cell phone (same problem). Here are two screenshots (one with destkop, the other one in Mobile view).

Thank you 

[TomM2]

Hey @BDemiri when you say "the image could be read" what do you mean exactly? Is the image not appearing? 

What specifically are your smart rules and what devices have you tested this on? 

[BDemiri]

Hi @TomM2 

Thank you for your answer.

No, the image appears, but not correctly. The smart rule I added is "Device Type" Mobile and Desktop checkboxes. Nothing else since HubSpot doesn't allow me to do any stylish changes in smart rules...

The module I used is a Power Sec Hero, maybe the problem comes from that ?

You can see two screenshots in the other conversation above.

Thank you

[Jnix284 · Accepted solution]

Hi @BDemiri happy to help!

The Power Sec Hero module has it's own background image option for desktop, tablet, and mobile so smart rules aren't needed.

If you aren't seeing the smart rule, it's likely not being recognized by the HubSpot preview tool - I've found that they are best verified on actual devices.

Here is the Power Theme documentation for Section Modules, you're looking for this setting:

You'll find it in the module by scrolling down to the Style section:

and you'll change the background setting here:

to Background Image/Video: