Jump to content

Tech Support

Administrators
 View Profile  See their activity

  • Posts

    1,779

  • Joined

  • Days Won

    330

 Content Type 

Posts posted by Tech Support

    google rich media result check

    in Technical Support

    Posted

    6 hours ago, Mich said:

    Now, try this on a KVS site other than the demo. If we remove the slash, it either leads to a 404 not found page or show homepage.
    I haven't investigated why yet, but I have tried it on a clean version of 6.2.1, and it still happens.

    This only happens if you don't use Apache. The Apache rewrite rules we provide do some automatic adjustments, but these are not available in Nginx set of rules.

    KVS 5.5.0 discussion and poll

    in Announcements

    Posted

    Sorry, we can't add this due to performance issues. There is no technical way we can easily check if the model has public or any other types of videos when displaying model list. You have to think about other way of design. For example if you don't want models from affiliates to be present, you can add them to some model group, and then use skip_model_groups filter in your general list_models blocks where you don't want these models to appear.

    Theme customization: how to show cookie consent popup

    in KVS default theme

    Posted

    KVS doesn't collect any tracking or commerce-related cookies, only necessary cookies are used to make sure site is operating normally and user preferences are remembered. Therefore it is not possible to switch off any cookies, as they are all needed for KVS functionality to work. But EU countries require sites in their area to inform users about cookie usage. If this is the case for your site, you can use the below steps to display basic cookie consent popup.

    cookie_consent.png.f601411e85e78a2a5d639eaffe056e24.png

     

    Step 1. Download and copy this file to your project: 

    https://www.kvs-demo.com/static/js/cookieconsent.min.js

     

    Step 2. Go to Website UI -> Page components -> include_footer_general.tpl and paste the following code before the closing </body> tag: 

    <script src="{{$config.statics_url}}/static/js/cookieconsent.min.js"></script>
<script>
  window.CookieConsent.init({
    modalMainTextMoreLink: null,
    barTimeout: 500,
    theme: {
      barColor: '#1554b2',
      barTextColor: '#FFF',
      barMainButtonColor: '#FFF',
      barMainButtonTextColor: '#1554b2',
      modalMainButtonColor: '#1554b2',
      modalMainButtonTextColor: '#FFF',
    },
    language: {
      current: 'en',
      locale: {
        en: {
          barMainText: 'This website uses cookies to ensure you get the best experience on our website.',
          closeAriaLabel: 'close',
          barLinkSetting: 'Cookie Settings',
          barBtnAcceptAll: 'Accept all cookies',
          modalMainTitle: 'Cookie settings',
          modalMainText: "Cookies are small pieces of data sent from a website and stored on the user's computer by the user's web browser while the user is browsing. Cookies were designed to be a reliable mechanism for websites to remember information or to record the user's browsing activity.'",
          modalBtnSave: 'Save current settings',
          modalBtnAcceptAll: 'Accept all cookies and close',
          modalAffectedSolutions: 'Affected solutions:',
          learnMore: 'Learn More',
          on: 'On',
          off: 'Off',
          enabled: 'is enabled.',
          disabled: 'is disabled.',
          checked: 'checked',
          unchecked: 'unchecked',
        }
      }
    },
    categories: {
      necessary: {
        needed: true,
        wanted: true,
        checked: true,
        language: {
          locale: {
            en: {
              name: 'Strictly Necessary Cookies',
              description: "We do not collect any tracking or personal data and use only necessary cookies to make sure you don't experience any issues while visiting our site.",
            }
          }
        }
      }
    },
  });
</script>

    Adjust colors and texts if needed.

    Categorization best practices

    in Educational Series

    Posted

    10 hours ago, Evgen said:

    I want to use flags to vote users for abstract text on various pages of the site.
    For example, I want to hang on the index page "Hello, dear friend. We have such and such principles." Is it possible?
    What should I do for this?

    This might be possible with posts that support flagging. Please create support ticket with more details what you want to do.

    Theme customization: how to change number of videos per row

    in Educational Series

    Posted

    First of all, the number of items per row in a list is not a fixed number but is adaptive to screen size. For example, on bigger screens it may be 3 or 4 per row, on smaller it can be down to 2 and even to 1. There is no easy way to modify this behavior: you should have a fair understanding of CSS, adaptive layouts, media queries and be very accurate to check all possible scenarios.

    In this article we will try to highlight the path to changing this.

     

    How CSS adaptive layout works in the first way

    Each list is displayed as a grid inside some container. Container has a width and this width depends on device screen size. Then each container list item is given a % of container size. For example in the given layout each item is given 25% of container size, so that 4 items can fit the space (4 * 25% = 100%):

    thumb_layout_big.thumb.png.5ca12043a8a7a516ab415ec799d853c8.png

     

    Depending on the amount of container space, the width of each item is given the different % of container width. For example on the page with toolbar each list item is given 33.33% of width so that only 3 items are displayed per row (3 * 33.33% = 100%):

    thumb_layout_medium.thumb.png.1c2dcf7a8c26c69c67cf2bde1271dfe3.png

     

    Finally on smaller devices there is no sense to display multiple videos in a row, so the list item size is given 100% of the container size:

    thumb_layout_small.png.8a094ddf41552f9c9859e6a4791d1a73.png

     

    How do you know when it should have 4 per row, when 3, when 2 and 1? Well, this is decided by looking into site on different dimensions using browser DEV tools that allow displaying site under different dimensions. When you see the items are becoming too small, you may decide to reduce the number of items per row.

    And how about 5 per rows? Displaying 5 per row will be a problem. Your list has a certain number of total items displayed at once, and by default we use 12 or 24. 12 and 24 are both divisible by 4 and 3 and 2. So when you display 4 per row, you have 3 (or 6) full rows. When you display 3 per row, you have 4 (or 8) full rows. If you decide to display 5 per row, then your list displayable size should be 20, and you can use 5 per row, 4 per row and 2 per row. You can't normally use 3 per row, because 20 is not divisible by 3. Well, you can use 3 anyway, but this would mean that last line will always have 2 items instead of 3.

     

    Where it is all set

    This is defined as a big set of CSS rules in theme CSS file. In order to see which CSS file your theme is using just look into HTML page source: 

    view-source:https://www.kvs-demo.com/

     

    There you may see multiple CSS file are included on top, and the bigger one will contain the rules: 

    <link href="https://www.kvs-demo.com/static/styles/all-responsive-white.css?v=9.1" rel="stylesheet" type="text/css"/>

     

    Now you need to modify the whole set of layout rules, because there are different rules for different display cases and mobile resolutions. Please note, if your theme has dynamic style switch, it may be using multiple similar CSS files. For example KVS default theme has 2 CSS files:

    • all-responsive-white.css

    • all-responsive-metal.css

    They both have similar rules duplicated. So if both color themes are used in your project, you need to do similar changes in both files.

    Now let's look into more details how these rules are defined. In KVS default theme the list item style is defined by this pattern: 

    .list-<list-type> .item {
  styles for item of <list-type> list
}

     

    So the very first style definition of this pattern is this: 

    .list-playlists .item,
.list-models .item,
.list-sponsors .item,
.list-channels .item,
.list-categories .item,
.list-albums .item,
.list-albums-images .item,
.list-videos .item,
.list-videos-screenshots .item {
  display: inline-block;
  text-align: left;
  background: transparent;
  vertical-align: top;
  cursor: pointer;
  margin: 10px 0 0 10px;
  width: calc(25% - 10px);
  cursor: pointer;
  -webkit-box-shadow: -1px 1px 5px rgba(207, 207, 207, 0.65);
  box-shadow: -1px 1px 5px rgba(207, 207, 207, 0.65);
  border-radius: 0 0 5px 5px;
  background-color: #ffffff;
}

     

    The most important part is this line: 

    width: calc(25% - 10px);

     

    This lines says that all items of playlists, categories, models, channels, sponsors, albums and videos have layout 4 per row by default (25% * 4 = 100%). We need 10px offset because this style also uses margin of 10px from left.

    Then there are many overrides for this style. For example if a video list is displayed together with sidebar, its number of videos per row is reduced to 3 (33.33% * 3 = 100%): 

    .sidebar + .main-container .list-videos .item {
  width: calc(33.33% - 10px);
}

     

    Then at the bottom of CSS file there are media queries that override certain styles depending on user's device resolution. For example the next style is applied when screen resolution is below 1255px and it reverts back video list layout to 4 per row with a sidebar, mainly because starting from 1255px the sidebar is not displayed aside anymore and is moved to the bottom of page: 

    @media screen and (max-width: 1255px) {
  ...

  .sidebar + .main-container .list-playlists .item,
  .sidebar + .main-container .list-videos .item {
    width: calc(25% - 10px);
  }

  ...
}

    Note this style is applied to both video list and playlist list.

    Then at 640px it limits the amount of video items per row to 2 (50% * 2 = 100%): 

    .list-videos .item {
  width: calc(50% - 10px);
}

    And etc.

    Here are some key points that worth mentioning:

    • In KVS default theme some lists have different settings depending on whether they are displayed together with sidebar or not. Sidebar may be switched on or off on some pages.
    • Some styles are applied to different lists (like for videos and playlists above). So you should be aware that changing the width for such styles may also affect other types. If you want to override behavior for videos only, it may be easier to just add new styles for specific item type at the end of file (following the CSS cascade rules), rather then modify existing styles.

     

     

    KVS 6.2.1 update

    in Announcements

    Posted

    11 hours ago, viper said:

    Is it ready now? If I update now, do I have to update again?

    The updates are in process of uploading, you can check if your license has an update archive available.

    11 hours ago, viper said:

    And do I get free installation by support?

    No, there is no free update installation. We are physically not able to update all projects for free, even if working 24/7.

    • Thanks 1

    Changing video resolution indicator?

    in Technical Support

    Posted

    Yes, you can do that. The indicator is rendered in Website UI -> Page components -> include_list_videos_block_common.tpl using this line: 

    {{if $item.resolution_type==1}}<span class="is-hd">HD</span>{{elseif $item.resolution_type>0}}<span class="is-hd is-{{$item.resolution_type}}k">{{$item.resolution_type}}K</span>{{/if}}

    You can change it to: 

    {{if $item.resolution_type==1}}<span class="is-hd">HD</span>{{elseif $item.resolution_type==2}}<span class="is-hd is-2k">FHD</span>{{elseif $item.resolution_type>0}}<span class="is-hd is-{{$item.resolution_type}}k">{{$item.resolution_type}}K</span>{{/if}}
    • Like 1

    History comments, notification upvote/downvote and reply comment feature is still missing ?

    in Technical Support

    Posted

    33 minutes ago, Tanjiro said:

    Does KVS have feature like "history comments" for user ? User can find their comments which they commented before.

    This is possible to display using list_comments block. If you put this block into [Memberzone] My Profile page and switch off mode_global parameter in it, this block will display comment of the logged in user in their profile page.

    35 minutes ago, Tanjiro said:
    • And notifications like their comment got upvote/downvote like youtube, something like "Someone liked/disliked your comment" for guests vote and "Your comment got a like/dislike from username" for registered user vote
       
    • Also important feature like reply a comment, and notification when someone reply their comment

    Notifications and ability to reply comments will be part of nextgen development, when we switch comments blocks to nextgen. Could be next version already.

    • Like 1

    KVS 6.2.1 update

    in Announcements

    Posted

    30 minutes ago, Alex said:

    It seems the admin panel needs a tab "video format groups" to see format group ID's...

    Agree, but you can always see the ID from the video format group editor URL. Rarely needed.

    19 minutes ago, Alex said:

    And isn't there something superfluous or malfunctioning among these settings in the context of Premium/Non-Premium?

    No, this is all correct now. The "Premium" video format group is just a name which came from previous KVS versions, you can rename it to anything else. It is not connected to access level anymore.

    KVS 6.2.1 update

    in Announcements

    Posted

    12 hours ago, SMaxim said:

    Hello. After the update, I noticed two cases with text translations.

    Please create support ticket. This looks to be the side effect of migrating models to nextgen API, it will pull country from database now. I think this can be fixed via template.

    KVS 6.2.1 - how to add support for Cloudflare Turnstile captcha

    in KVS default theme

    Posted

    21 hours ago, Mich said:

    Do we need to edit only include_footer_general.tpl, or are there other files to be modified, such as in the blocks?

    If the theme supports reCAPTCHA, then all changes in other places are already there. If it doesn't, this might be very old theme. Unfortunately we can't provide instructions for it, as the process would be very complicated as dozen of places would need to be replaced.

    KVS 6.2.1 - how to add support for Cloudflare Turnstile captcha

    in KVS default theme

    Posted

    Starting from 6.2.1 update we added support for Cloudflare Turnstile captcha in addition to Google reCAPTCHA that was already supported before.

    However using Cloudflare Turnstile will need minor template changes. The changes are provided for KVS default theme, but likely they will also work with other themes (from kvs-themes.com) that have support for reCAPTCHA, at least we do not see any potential issues at the moment.

    First of all you should check if your theme version has support for reCAPTCHA, otherwise it won't be possible to use Turnstile as well. In order to check that you need to open Website UI -> Page components -> include_footer_general.tpl and check if you have this code block at the bottom: 

    {{if $recaptcha_site_key!=''}}
....
{{/if}}

    If this block is present, then you can follow this guide to add support for Turnstile.

     

    How to update a supported theme for Cloudflare Turnstile

    Step 1. Update theme JS file from here: 

    https://kvs-demo.com/static/js/main.min.js

    NOTE: this file is minified and it is not expected that you've ever done any custom changes into it. If you did any changes there, they will be lost.

     

    Step 2. In Website UI -> Page components -> include_footer_general.tpl replace this block: 

    {{if $recaptcha_site_key!=''}}
....
{{/if}}

    with this: 

    {{if $recaptcha_site_key!=''}}
  {{if $recaptcha_type=='google'}}
 	<script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>
  {{elseif $recaptcha_type=='cloudflare'}}
  	<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?compat=recaptcha"></script>
  {{/if}}
{{/if}}

     

    Then your theme is ready for Cloudflare Turnstile captcha. You can go to their admin panel and create your site there. This will provide you a pair of Site key and Secret key, similar to Google reCAPTCHA. Input these keys into KVS Captcha plugin and switch to Cloudflare Turnstile. Then check your site's GUI that captcha is working.

    • Like 1
×
×
  • Create New...