Versatile Banner

tshenry · October 7, 2019, 5:55pm

Thanks for posting that. I was able to determine it was this CSS rule:

body {
    overflow-x: hidden;
}

Horizontal scrolling gets introduced with the full-width option due to how scrollbar width is handled in the browser. I had added the above rule to try to mitigate it, but it looks like it has the potential to cause unintended side-effects. I’m going to write this down on my to-do list with this component to see if there is a better way to handle the full-width option, but I can’t guarantee anything. If you happen to find a solution in the mean time, please post it!

thegurjyot · October 17, 2019, 12:46pm

I updated this component today and a small problem started to occur. The reply count jumped a little higher in the mobile view.
I am using a the banner with full width and 3 colums. I have also installed Tab Bar, Category Banner, Hamburger Theme selector and nav links component with Versatile Banner.
Can you take a look at this issue?

martinkerr · January 6, 2020, 11:20am

Hi,

How do i just have an image for the banner (no text, buttons, links etc)? or should i use a different component?

Thanks

tshenry · January 6, 2020, 6:15pm

If all you are looking to do is add an image that always displays as a banner, you can just create your own component through the admin UI. Add the image to the After Header section and any styling to the CSS section and you’ll be set. Here’s a quick, rough example to get you started:

.banner-image {
  width: $large-width; // 1110px
  height: 200px;
  margin-bottom: 15px;
}

<div class="image-banner">
  <img class="banner-image" src="https://i.imgur.com/k7SnZth.jpg">
</div>

AndyatFocallocal · January 15, 2020, 12:49am

This looks awesome @tshenry.

Does it work on tag-pages? and can I use it with the search bar component (which puts a search bar into the banner). Or will they conflict?

tshenry · January 15, 2020, 1:03am

Yes, if you add /tags/ to the url must contain theme setting. Keep in mind there is still only support for a single banner. As it stands, this won’t allow you to make a specific banner for each individual tag.

A quick test suggests they can be installed together, but you may need to make some adjustments on your own if it’s not exactly how you want it. Currently it sits above the Versatile Banner:

AndyatFocallocal · January 15, 2020, 1:35am

Thanks, I missed that.

jrgong · January 15, 2020, 11:48am

A collapsible combination of both, versatile banner and search banner, would be a great addition.

eextra · January 25, 2020, 10:02pm

If I wanted to change it in the plugin from the software side, what exactly and where ? It doesn’t seem to be a problem but maybe I’m wrong? Thanks for your help.

Fausto_Dassenno · February 5, 2020, 10:42pm

Hi,

I have this issue ( the white gap ) when applying the banner in a category with the category banner active.

SMx · February 10, 2020, 10:04am

Awesome plugin, thank you.

One question, I’ve managed to add the banner and it looks awesome, but how can I add an URL underneath the image, since the button is already built into the image?

When using the columns content settings, it adds overlay text and buttons but I don’t want that.
A simple clickable banner image would do.

Thank you.

LE1:

I have sorted this out doing the following:

Create a new component and add the following:

CSS:
.banner-box:hover{cursor:pointer;}

HEAD

<script type="text/javascript">
$(document).on('click', '.banner-box', function(){
  console.log("click here");
  window.open('https://yoururl.com/', '_blank');
});
</script>

LE2

Is there an easy way to serve a mobile optimized banner on mobile screens? Now, I only see the option to hide or show the image on mobile.

wanghaisheng · February 17, 2020, 6:55am

how to adjust can i achieve display banner only in topics and get contents from first lines of topic contents into banner contents,so it is a topic dynamic one instead of one category having a kind of static one

tshenry · February 18, 2020, 7:07pm

I appreciate the feedback, but unfortunately all of these issues/features are going to need to be taken care of on your own, or by hiring someone in the #marketplace. You are more than welcome to fork the component on GitHub and hack away! PRs are also welcome.

When time permits, I will of course review this topic and try to take all of the comments and feature requests into consideration when I work on updating the component.

Grover · March 12, 2020, 2:51pm

I added a “+ New Topic” button in my versatile banner and I’m not sure when it happened but it has stopped working at some point in the last couple months. I’m guessing it happened as part of some larger upgrade that effects ember-view elements. The HTML for the button is just copied directly from the element as seen on the main page:

<button
  aria-label="New Topic"
  id="create-topic"
  class="btn-default btn btn-icon-text ember-view"
  type="button"> 
    <svg class="fa d-icon d-icon-plus svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#plus"></use></svg>
      <span class="d-button-label">New Topic<!----></span>
</button>

I’m also wondering if this is related to the versatile banner not knowing if a user is logged in. Previously my custom “New Topic” button in the banner would only work if a user was logged in, now it doesn’t matter if they are logged in, it just never works. Any help would be greatly appreciated!

tshenry · March 12, 2020, 5:12pm

Hmm, I’m not sure what would have happened there. I’m a little surprised that directly copying the HTML ever worked.

It’s not as clean as it would be if you were using a method similar to the one used with (+ New topic) button on all pages, but anyone in desperate need could try this:

<a href="/new-topic" id="create-topic" class="btn-default btn btn-icon-text">
  <svg class="fa d-icon d-icon-plus svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
    <use xlink:href="#plus"></use>
  </svg>
  <span class="d-button-label">New Topic</span>
</a>

It’s using a the new topic link feature that’s outlined in Compose a new pre-filled topic via URL

You can also use CSS to hide it for anons:

.anon .banner-box #create-topic {
  display: none;
}

Grover · March 12, 2020, 5:20pm

Yeah, I kinda felt dirty while I was adding it, but we’ve seen pretty good usage of that button in the banner so we want to keep it around. Your solution worked perfect! Thanks!

jrgong · March 26, 2020, 3:00pm

Can you add a setting to hide the banner in /search? Since the banner is placed above the search field, it pushed the search text field beyond the visible area when expanded.

As alternative maybe put the banner below the search field.

You can try the issue here:

merefield · March 26, 2020, 5:16pm

Actually it may not be as simple as that. This is definitely an issue though. You can even see this broken on Feverbee’s site btw (when viewing on iOS Safari on mobile), which may not be using the same component but the challenge is the same.

jrgong · March 26, 2020, 5:08pm

Maybe better to add option to hide it on /search completely!
From UX/UI perspective it might not be useful anyway

tshenry · March 26, 2020, 5:19pm

It’s looking like there may be an issue with the setting that’s supposed to restrict the banner to specific pages. It will be a little while before I get an opportunity to work on this component, so for now, can you try adding the following CSS to your theme:

.search-page .banner-box {
    display: none;
}