Page 2 – JoomLead

Forum Replies Created

Viewing 14 posts - 16 through 29 (of 29 total)

← 1 2

Michael

Subscriber

Posted 6 years, 11 months ago in reply to: [solved] Instafeed with problems

Hi josehroberto,

Just replace the code from instafeed.html.twig with the code below

{% extends '@nucleus/partials/particle.html.twig' %}

{% set rand = random() %}
{% set group = random() %}
{% block stylesheets %}
  <link rel="stylesheet" href="{{ url('gantry-theme://css/uikit.min.css') }}" type="text/css"/>
  <link rel="stylesheet" href="{{ url('gantry-theme://css/components/slidenav.min.css') }}" type="text/css" />
{% endblock %}

{% block javascript_footer %}
  {% do gantry.load('jquery') %}
  <script src="{{ url('gantry-theme://js/uikit.min.js') }}"></script>
  <script src="{{ url('gantry-theme://js/instafeed.min.js') }}"></script>
  <script>

  //http://instagramwordpress.rafsegat.com/docs/get-access-token/
  var temp = '<div class="jl-instafeed-item uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-{{particle.numberitem}}"><a href="\{\{link\}\}"><div class="jl-insta-thumbnail uk-overlay uk-overlay-hover"><img src="\{\{model.images.standard_resolution.thumb\}\}" /><div class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-center uk-flex-middle uk-text-center"><div class="jl-insta-info \{\{model.type\}\} uk-grid uk-grid-width-1-3"><div class="jl-insta-info-love"><i class="fa fa-heart"> <\/i><span class="jl-insta-love">\{\{model.likes.roundcount\}\}<\/span><\/div><div class="jl-insta-info-play"><i class="jl-insta-play \{\{model.type\}\} fa fa-play-circle"><\/i><\/div><div class="jl-insta-info-comment"><i class="fa fa-comment"> <\/i><span class="jl-insta-comment">\{\{model.comments.count\}\}<\/span><\/div><\/div><\/div><\/div><\/a><div id="jl-insta-modal-\{\{model.index\}\}" class="jl-insta-modal uk-modal"><div class="jl-modal-dialog uk-modal-dialog uk-modal-dialog-blank uk-grid uk-slidenav-position"><div class="jl-dialog-image uk-width-large-3-5 uk-width-medium-3-5 uk-width-small-1-1"><div class="jl-dialog-header header-top uk-visible-small"><a href="https://www.instagram.com/\{\{model.user.username\}\}" target="_blank"><img src="\{\{model.user.profile_picture\}\}" /><span class="insta-username">\{\{model.user.username\}\}<\/span><\/a><a href="\{\{link\}\}" target="_blank"><i class="uk-icon-external-link"><\/i><\/a><a href="\{\{link\}\}" target="_blank">Read the post<\/a><\/div>\{\{model.content\}\}<\/div><div class="jl-dialog-content uk-hidden-small uk-width-large-2-5 uk-width-medium-2-5 uk-width-small-1-1"><div class="jl-dialog-container"><div class="jl-dialog-header"><img src="\{\{model.user.profile_picture\}\}" /><span class="insta-username">\{\{model.user.username\}\}<\/span><a href="https://www.instagram.com/\{\{model.user.username\}\}" target="_blank">Follow<\/a><\/div><div class="jl-dialog-info"><span class="jl-info-like">\{\{model.likes.count\}\} likes<\/span><span class="jl-info-time">\{\{model.time\}\}<\/span><\/div><div class="jl-dialog-caption" style="">\{\{model.caption.text\}\}<\/div><\/div><\/div><a href="#"><\/a><a href="#"></a><\/div><\/div><\/div><\/div>';
    jQuery(function($){
      function roundCount(count){
        if (count < 1000){
          return count;
        }else if (count > 1000 && count < 1000000){
          count = count/1000;
          count = parseFloat(count).toFixed(1);
          return count + " K";
        }else if (count > 1000000){
          count = count/1000000;
          count = parseFloat(count).toFixed(1);
          return count + " M";
        }
      }
      function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }
      function getTime(date){
        // Split timestamp into [ Y, M, D, h, m, s ]
        var actiondate = new Date(parseInt(date) * 1000);
        var today = new Date();
        if(today.getDate() === actiondate.getDate() && today.getMonth() === actiondate.getMonth() && today.getYear() === actiondate.getYear()){
            var hourssince =   today.getHours() - actiondate.getHours();
            var minutessince =   today.getMinutes() - actiondate.getMinutes();
            var secondssince =   today.getSeconds() - actiondate.getSeconds();
            if(hourssince > 0){
                date = hourssince+'h';
            }else if(minutessince > 0){
                date = minutessince+'m';
            }else{
                date = secondssince+'s';
            }
        }else{
            var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
            var diffDays = Math.round(Math.abs((today.getTime() - actiondate.getTime())/(oneDay)));
            if(diffDays >= 7){
                date = Math.round(diffDays / 7)+'w';
            }else{
                if(diffDays == '0'){
                    diffDays = '1';
                }
                date = diffDays+'d';
            }
        }
        return date;
    };
      var loadButton = document.getElementById('jl-instafeed-loadmore-{{rand}}');

      {% set token = (particle.accessToken == "" ? '4784198969.ba4c844.62f855e7f91f480eb231516c3bf768f4' : particle.accessToken ) %}
      {% set username = particle.username|trim() %}

      {% set url = "https://www.instagram.com/" ~ username ~ "/?__a=1" %}
      {% set content = gantry.platform.call("file_get_contents",url) %}
      var insta = JSON.parse('{{content|raw|e("js")}}');
      var feed = new Instafeed({
          target: 'jl-instafeed-{{rand}}',
          get: '{{particle.get}}',
          tagName: '{{particle.tagName}}',
          sortBy : '{{particle.sortBy}}',
          userId: insta.user.id,
          accessToken : '{{token}}',
          limit: {{particle.limit == "" ? "12" : particle.limit}},
          template: temp,
          resolution: 'standard_resolution',
          before :function(){
            $("#jl-instafeed-loading-{{rand}}").append('<i class="fa fa-spinner spin"></i>');
          },
          success : function(data){
            $("#jl-instafeed-loading-{{rand}}").text("");
            console.log(data.data);
            var crop = '';
            var page = $("#jl-instafeed-loadmore-{{rand}}").attr("data-page")
            page = parseInt(page);
            var limit = {{particle.limit == "" ? "12" : particle.limit}};
            limit = parseInt(limit);
            var index = page * limit;
            for (var i = 0;i<data.data.length;i++){

              //index
              data.data[i].index = index + i;

              //count
              var count = data.data[i].likes.count;
              data.data[i].likes.roundcount = roundCount(count);
              data.data[i].likes.count = numberWithCommas(count);

              //comment
              var comment = data.data[i].comments.count;
              data.data[i].comments.roundcount = roundCount(comment);
              data.data[i].comments.count = numberWithCommas(comment);

              //time
              var time = getTime(data.data[i].created_time);
              data.data[i].time = time;

              //video
              if (data.data[i].type == "video"){
                var poster = data.data[i].images.standard_resolution.url;
                //poster = "";
                var video = data.data[i].videos.standard_resolution.url;
                var content = '<video class="jl-insta-video" poster="'+poster+'" src="'+video+'" type="video/mp4" controls><\/video>';
                data.data[i].content = content;
              }else{
                var image = data.data[i].images.standard_resolution.url;
                var content = '<img src="'+image+'" />'
                data.data[i].content = content;
              }

              //caption
              var limit = {{particle.caption == "" ? 300 : particle.caption}};
              var caption = data.data[i].caption.text;
              var tags = data.data[i].tags;
              if (caption.length > limit){
                caption = caption.substring(0,limit);
              }
              caption += '... <a href="'+data.data[i].link+'">Read more</a>';
              tags.forEach(function(item){
                var tag = item;
                var search = "#" + tag;
                var regEx = new RegExp(search, "ig");
                var replace= '<a href="https://www.instagram.com/explore/tags/'+tag+'/">#'+tag+'<\/a>';
                caption = caption.replace(regEx, replace);
              });

              //console.log(caption);
              data.data[i].caption.text = caption;

              //image
              var url = data.data[i].images.standard_resolution.url;
              //console.log(url);
              var width = data.data[i].images.standard_resolution.width;
              var height = data.data[i].images.standard_resolution.height;
              var pos = url.lastIndexOf("/");
              var start = url.substring(0,pos+1);
              var end = url.substring(pos,url.length);
              var original = 'https://instagram.fsgn4-1.fna.fbcdn.net/' + end;
              var square = data.data[i].images.thumbnail.url;
              square = square.replace(/vp.*\/.{32}\/.{8}\//, '').replace('150x150', '600x600');
              data.data[i].images.standard_resolution.thumb = square;
            }
          },
          after: function() {
            {% if particle.loadmore %}
              loadButton.innerHTML = "Load more";
              var page = $("#jl-instafeed-loadmore-{{rand}}").attr("data-page");
              page = parseInt(page) + 1;
              $("#jl-instafeed-loadmore-{{rand}}").attr("data-page",page);
            {% endif %}

            $('.jl-insta-modal').each(function(){
              $(this).on({
                'hide.uk.modal': function(){
                    $(".jl-insta-video").each(function () { this.pause() });
                }
              });
            });
            {% if particle.loadmore %}
              if (!this.hasNext()) {
                  loadButton.setAttribute('disabled', 'disabled');
              }
            {% endif %}
            $('.jl-insta-next').on('click',function(event){
              event.preventDefault();
              var id = $(this).parents('.jl-insta-modal').eq(0).attr("id");
              id = id.substring('jl-insta-modal-'.length,id.length);
              id = parseInt(id) + 1;
              var modal = UIkit.modal("#jl-insta-modal-" + id);
              modal.options.center = true;
              modal.show();
            });
            $('.jl-insta-prev').on('click',function(event){
              event.preventDefault();
              var id = $(this).parents('.jl-insta-modal').eq(0).attr("id");
              id = id.substring('jl-insta-modal-'.length,id.length);
              id = parseInt(id) - 1;
              if (id < 0) return ;
              console.log(id);
              var modal = UIkit.modal("#jl-insta-modal-" + id);
              modal.options.center = true;
              if ( modal.isActive() ) {
                  modal.hide();
              } else {
                  modal.show();
              }
            });
          }
      });
      {% if particle.loadmore %}
      loadButton.addEventListener('click', function() {
        loadButton.innerHTML = "Loading...";
        feed.next();
      });
      {% endif %}
      feed.run();
    });
  </script>
{% endblock %}

{% block particle %}
    {% if particle.enabled %}

        <div class="jl-instafeed-loading uk-text-center" id="jl-instafeed-loading-{{rand}}">
        </div>
        <div id="jl-instafeed-{{rand}}" class="jl-instafeed uk-grid">
        </div>
        {% if particle.loadmore %}
          <a>Load More</a>
        {% endif %}
    {% endif %}
{% endblock %}

We updated quickstart and particles.zip, you can donwload in custom area.

Thank You

This reply was modified 6 years, 11 months ago by Michael.

Michael

Subscriber

Posted 6 years, 11 months ago in reply to: [Solved] Pricing particle.

This reply has been marked as private, meaning that only the original poster and forum moderators can see the content of the reply.

Michael

Subscriber

Posted 6 years, 11 months ago in reply to: [Solved] Pricing particle.

Hi Bob,

Your problem is installing particles in hydrogen. You can remove the pricing table particles and proceed with the initial installation of hydrogen.

How to Install Gantry 5 Particle

And Hover Atom :

You should follow the steps in the documentation.

https://joomlead.com/g5/docs/hover-atom/

Turn on hover atom

Thank you!

Michael

Subscriber

Posted 6 years, 11 months ago in reply to: [Solved] Pricing particle.

Hi Bob,

When you copy from raiseup template to hydrogen, you forgot to create custom.scss file in custom and forgot to import pricingtable.scss.

I fixed that problem for you.

Thank you

Michael

Subscriber

Posted 6 years, 11 months ago in reply to: [Solved] Pricing particle.

Hi Bob,

Hydrogen, You have incorrectly set up the pricing table.

I have corrected and the result is as below.

https://imgur.com/a/ztNEa

Thank you

Michael

Subscriber

Posted 6 years, 11 months ago in reply to: [Solved] Pricing particle.

Hi Bob,

I just tried creating pricingtable particles in the layout.

https://imgur.com/a/PYhqt

Result:

https://imgur.com/a/6iVuY

Thank you

Michael

Subscriber

Posted 6 years, 11 months ago in reply to: Resize the page content

Hi tithij,

Can you capture the screen of your problem?

mainbar in main container, when aside and sidebar is empty the mainbar size is 100%.

Thank you

Michael

Subscriber

Posted 6 years, 11 months ago in reply to: [Solved] Pricing particle.

Hi Bob,

I checked, I think the problem is that the module is not asignment to the page. I have created a price-position and asignment in the home and results as shown below.

Assignment to home

https://imgur.com/a/2GcIO

Results

https://imgur.com/a/z5Ihg

Thank you

Michael

Subscriber

Posted 6 years, 11 months ago in reply to: Resize the page content

Hi tithij,

Could you please send the administrator account for me to take a look?

NOTE: You can send PRIVATE REPLY by following https://imgur.com/a/yVVyw

Michael

Subscriber

Posted 6 years, 11 months ago in reply to: [Solved] Pricing particle.

Hi Bob,

Could you please send the administrator account for me and set the account to super user so I can check the source code for pricingtable particles particle?

Thank you