Okay
  Public Ticket #1681080
Sidebar tags not showing up
Closed

Comments

  • Arturo started the conversation

    Hi, none of the tags are working on the index page, also on the 5.0 you have 

    {{title}} when it should be  {{name}}

    How can I get the posts with tag technology and nature showing up? It should be implemented already...

    Thank you

  •  8
    Estudio replied

    Hi!, thank you for contact us!

    What file should be use {{name}} instead of file? can you share your blog url?

    About the technology and nature sections, there are 2 reserved tags: featured top (for technology) and featured bottom, of course the titles must be edited manually because Ghost is not powerfull as Wordpress.

    Here is a screenshot of the documentation:

    And inside symmetric/partials/sidebar-featured.hbs you can change the titles:

    Let me know if can i assist you with anything else!

    Regards!

  • Arturo replied

    That information doesn't help. I actually figured it out, look, this is what you should have included:

    {{!-- Technology --}}

    <div class="item featured-top">
        <h3 class="title bordered uppercase">Technology</h3>
        <div class="box">
            {{#get "tags" limit="all" include="count.posts" filter="slug:[technology]" }}
                {{#foreach tags}}
                    {{#if count.posts}}
                        {{#get "posts" filter="tags:{{slug}}" limit="3"}}
                            {{#foreach posts}}
                                {{#if featured}}
                                    <article class="{{post_class}}">
                                        <h4 class="title"><a href="{{url}}">{{title}}</a></h4>
                                        {{#if feature_image}}
                                            <a href="{{url}}" class="thumb hover-effect">
                                                <span class="fullimage cover" style="background: url({{feature_image}});"></span>
                                            </a>
                                        {{/if}}
                                        <time class="uppercase" datetime="{{date format='YYYY-MM-DD'}}"><i class="fa fa-clock-o"></i> {{date}}</time>
                                    </article>
                                 {{/if}}
                            {{/foreach}}
                        {{/get}}
                    {{/if}}
                {{/foreach}}
            {{/get}}
        </div>
    </div>

    By the way can you upload a video of how to use your documentation to change things? I feel like you invested so much time in it and it's pretty much useless to the buyers. I have an idea of how to program and it doesn't benefit me in anything, I have to manually use the chrome inspector to find your stuff. Maybe a video would put more value to your doc.

  •  8
    Estudio replied

    Hi! i tested your code and you are doing a double loop (getting all tags -> and then filtering the last 3 posts with the current slug)

    You can do that with a single loop like:

    {{#get "posts" limit="3" filter="tags:technology"}}
    

    And of course your {{#if featured}} is filtering a lot of more posts, in this case our customer can use any tag not only technology and the most important thing is the robots.txt (featured-top and featured-bottom tags are not indexed by Google)

    About your thoughts related to the documentation, you are right the documentation is really extensive and should be a lot more helpful to make some short videos, but im not fluent in English so i prefer write for the moment.

    Let me know if Symmetric  v5.0 help you with the Prepos 6 installation (this APP minify and optimize CSS and JS) for people who knows coding and programming.

    Regards!

  • Arturo replied

    That's weird, without the double loop didn't work, do you mind posting your whole code using slug instead of tag?

  •  8
    Estudio replied

    Of course!, this is the full code (filtering only technology tags instead of featured-top):

    <!-- start: .item -->
        <div class="item featured-top">
            <h3 class="title bordered uppercase">Technology</h3>
            <div class="box">
                {{#get "posts" limit="7" filter="tags:technology" as |technology|}}
                    {{#foreach technology}}
                        <article class="{{post_class}}">
                            <time class="uppercase" datetime="{{date format='YYYY-MM-DD'}}"><i class="fa fa-clock-o"></i> {{date}}</time>
                            <h4 class="title"><a href="{{url}}">{{title}}</a></h4>
                        </article>    
                    {{/foreach}}
                {{/get}}
            </div>
        </div>
        <!-- end: .item -->
    

    This is the admin screenshot: http://prntscr.com/kk0kqr

    And the front-end: http://prntscr.com/kk0kxh the first technology section is with my code and the second with yours.

    And my environment is Ghost 1.25.4: http://prntscr.com/kk0l2o

    Im using that code since ghost 0.8 without problems, are you using Ghost pro hosting or do you have a VPS with SSH?

  • Arturo replied

    That one works good, I added the if statement for featured posts and works fine, better time complexity now. 

    I'm currently in local, with ghost 2.0, by the way I think your theme (v5) had some warnings with the new version, not sure.

    I need to finish the theme by this weekend, do you mind leaving the ticket open until then in case I have more questions?

  •  8
    Estudio replied

    No problem! You can contact us on weekends too.

     Just a minute ago i checked Ghost website and there is a new pre-release, we are going to do a full migration to that version (2.0) so it will be warning/errors free.

    Last and most important, do you mind if you change your rating (1 star), it's help us a lot to have a good rating. 

    We always trying to improve and give to our customer a good and fast support, so we are open to any feedback or suggestion you have about our templates.

    Best Regards!

  • Arturo replied

    I'm going to do it, I just didn't have the time, to be honest with you I don't like all the globals, for example, how do you change what's on the image attached with all those globals? Wouldn't it be better to have separate classes for each box?



    Attached files:  Screen Shot 2018-08-17 at 11.43.34 PM.png

  •  8
    Estudio replied

    Checking your screenshot, are you trying to use only 1 sidebar? if that is the case, i recommend you to edit index.hbs and replace:

    <!-- start: .left-content -->
    <div class="left-content section articles grid-parent grid-50"></div>
    

    with

    <!-- start: .left-content -->
    <div class="left-content section articles grid-parent grid-75"></div>

    And remove:

    {{> sidebar-default}}
    

    We used a grid based on percentages: https://unsemantic.com/ so any container with grid-% can be changed into whatever you want.

    For example: http://prntscr.com/kk0u51

    Let me know if this help you.

  • Arturo replied

    That's perfect, exactly how I wanted and yes, it was only 1 sidebar jeje. Thanks by the way, I just changed the review to 4 stars, depending of how I can edit it by sunday I may rise it to 5.

  •  8
    Estudio replied

    Perfect! glad to know that!

    Let us know if you need anything else.

  • Arturo replied

    I really love your theme. I'll change it to 5 stars.

    By the way on the doc you have a typo, on 2.5, where it says:  "In order to usage this section add the articles in the next way" it should be use, not usage.

    I also added the error message on 2.0


    I have a question, how can I set the background of the posts (only the posts, like the sidebar that has it while) to color white and leave the original background color for the remaining spaces, like the picture?

    Attached files:  s.png
      Screen Shot 2018-08-18 at 12.56.21 AM.png

  •  8
    Estudio replied

    Hi! thank you for change the rating.

    About your question, try this code on css/style.css inside the /* Global Articles list */

    div.articles article, div.articles article.default{ background: #fff; padding: 30px; }
    

    Should look like this on your IDE:

    I added a white background and some padding so the text and the image doesn't exceed the edges.

    With that change, your template should look like this: http://prntscr.com/kk1gvc

    Let me know if this help you.

  • Arturo replied

    That helps, I'll take it from there with the padding. Last question before I upload it, how can I link the comments on the index page? It's not showing the amount of comments.

    In your doc it says to go to config.js, but I can't find that on the v5, I added the shortname in the posts.hbs but still doesn't work

  • Arturo replied

    Hi, have you looked into the comments? The website is: elkepon.com

    I have uploaded the theme and the top navbar is not working, but in local it is. Same ghost version. What do you think that could be the problem?

  •  8
    Estudio replied

    Hi! about the comments you are right i removed the config.js file to improve the performance, you should edit default.hbs:

    Checking you website, your disqus_shortname seems to be correct, could be the Disqus cache or something related to JS, let me check first.

    About the navigation, can you create me an User to your Ghost admin to check this out?, the navigation should work fine: https://help.ghost.org/article/19-navigation

    My email is admin@estudiopatagon.com

    Thanks!

  •  8
    Estudio replied

    Another important thing looking your website, try to use:

    <pre class="prettyprint"></pre>

    Without <code> tag inside the <pre>, like this: http://prntscr.com/kk706t

    This will help you with large code, for example: http://prntscr.com/kk70o1

    Regards!

  •  8
    Estudio replied

    Ok, i found the problem, the Disqus counter need a minor update, because you already did several changes, i recommend you to install manually,  just follow these steps:

    1.- Open Prepos 6 to autocompile.

    2.- Open assets/js/functions.js and paste this code before function:

    var disqus_shortname=theme_config.disqus_shortname;!function(){var e=document.createElement("script");e.async=!0,e.type="text/javascript",e.src="//"+disqus_shortname+".disqus.com/count.js",document.getElementsByTagName("BODY")[0].appendChild(e)}();
    

    3.- Your code should be: http://prntscr.com/kk72tc

    4.- functions.min.js and scripts.min.js will be autocompiled.

    5.- Reupload your template.

    Im going to upload Symmetric V5.1 with this minor update and some documentation changes.

    Let me know if this help you.

  • Arturo replied

    thanks for the note on the code, I tried using 

    <pre class="prettyprint"></pre>

    with the code and it skipped all my #includes, test it yourself :)

    How can I change the ghost markdown design in your theme to have it how I had it, it's just a little hard to find your code and I don't want to overwrite anything, check the screenshot, that's how I was designing my theme until I saw yours, I'd like the markdown style like that with those colors. 


    I'm going to work on disqus now to see if it fixes it.



    Attached files:  Screen Shot 2018-08-18 at 2.19.03 PM.png

  •  8
    Estudio replied

    Yes, checked your <stdio> #include and breaks the HTML of the template, in this case the code must be escaped before it pasted, for example, this code: http://prntscr.com/kk77p2

    Should be: http://prntscr.com/kk784o

    I recommend you to use an online tool: https://www.freeformatter.com/html-escape.html this will escape several HTML tags which break the page.

    About the markdown, this can be edited on style.css (nÂș 1340) http://prntscr.com/kk79fc the most important tags are div.text pre and div.text code

    Im going to do some minor changes to the default pre and code tags (not enough contrast):

    http://prntscr.com/kk7a9h added background: none to div.text pre code and changed the main color from: #999 to #777, this will help you if you don't want to use prettyprint highlighter.

    If you don't to overwrite the existing style.css it is highly recommendable to add your CSS style to the main-color.css file, and if you need to upgrade the template, you can replace that file without loosing the CSS changes.

    Regards!

  • Arturo replied

    I'll track the markdown color after. For now, the disqus still doesn't work.

    I did compiled it with Prepros

    Attached files:  Screen Shot 2018-08-18 at 2.59.38 PM.png

  •  8
    Estudio replied

    Hi you are trying to use a JS variable that doesn't exists: http://prntscr.com/kk7mzf

    Check if your var elkepon = theme_config.elkepon is correct, i think the correct way is:

    var elkepon = theme_config.disqus_shortname;

    According to your default.hbs code: http://prntscr.com/kk7nwj

    Let me know if this help you.

  • Arturo replied

    Thanks for the url

    The disqus still doesn't work, this is how I have it, and my shortname is elkepon



    Attached files:  Screen Shot 2018-08-18 at 3.24.51 PM.png
      Screen Shot 2018-08-18 at 3.26.34 PM.png
      Screen Shot 2018-08-18 at 3.27.47 PM.png

  • Arturo replied

    I was checking on post.hbs and your disqus code has some lines that mine doesn't, how can I configure it if for elkepon?

    <!-- start: disqus integration -->
                        <div id="comments">
                            <h3 class="title bordered uppercase">{{t "Comments"}}</h3>
                            <div id="disqus_thread"></div>
                        </div>
                        <script>
                            /**
                            *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
                            *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
                            /*
                            var disqus_config = function () {
                            this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
                            this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
                            };
                            */
                            (function () { // DON'T EDIT BELOW THIS LINE
                                var d = document, s = d.createElement('script');
                                s.src = 'https://elkepon.disqus.com/embed.js';
                                s.setAttribute('data-timestamp', +new Date());
                                (d.head || d.body).appendChild(s);
                            })();
                        </script>
                        <noscript>Please enable JavaScript to view the
                            <a href="https://disqus.com/?ref_noscript">the comments.</a>
                        </noscript>
                        <!-- end: disqus integration -->

    That's how I have it, this is how you have it:

    <!-- start: disqus integration -->
                        <div id="comments">
                            <h3 class="title bordered uppercase">{{t "Comments"}}</h3>
                            <div id="disqus_thread"></div>
                        </div>
        
                        <script>
                            /**
                             *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
                             *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
                             */            
                            var disqus_shortname = theme_config.disqus_shortname; // required: replace example with your forum shortname
                            var disqus_config = function () {
                                this.page.url = '{{@blog.url}}{{url}}';  // Replace PAGE_URL with your page's canonical URL variable
                                this.page.identifier = '{{comment_id}}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
                            };
                            
                            (function() {  // DON'T EDIT BELOW THIS LINE
                                var d = document, s = d.createElement('script');
                                
                                s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                                
                                s.setAttribute('data-timestamp', +new Date());
                                (d.head || d.body).appendChild(s);
                            })();
                        </script>
                        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
                        <!-- end: disqus integration -->
  •  8
    Estudio replied

    Hi! yes it is really important to set the page.url and page.identifier:

    var disqus_shortname = theme_config.disqus_shortname; // required: replace example with your forum shortname
    var disqus_config = function () {
        this.page.url = '{{@blog.url}}{{url}}';  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = '{{comment_id}}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    

    That lines create a unique ID for Disqus, so if that ID match with the Disqus Database ID will work with the count.js file.

    Try to use my code instead, the only required variable is the disqus_shortname you already defined correctly on default.hbs file.

    Regards!

  • Arturo replied

    I have it working now, last thing, because I tried removing the sticky.js file and then it messes up something else. How can I make the top navbar stick to the top, I don't want it to follow me as I scroll down?


    After that, that's the end result. 

  •  8
    Estudio replied

    Just comment on functions.js line:

    $('#header div.menu-wrapper').sticky();
    

    Like this: http://prntscr.com/kk8sjv

  • Arturo replied

    I just did, and it keeps showing when I scroll down, is there another place I have to change?

    Attached files:  Screen Shot 2018-08-18 at 5.11.13 PM.png
      Screen Shot 2018-08-18 at 5.12.04 PM.png

  • Arturo replied

    By the way do you have the psd version of the picture I included? In some you have "us" and others "me"

    Attached files:  Screen Shot 2018-08-18 at 5.14.16 PM.png

  •  8
    Estudio replied

    Hi! we don't have a PSD available for that, that widget was fully designed on HTML + CSS

    Anyway, you can edit that text by editing directly partials/sidebar-default.hbs http://prntscr.com/kk8y58 or the correct way, editing locales/en.json 

    If you edit en.json you must restart the installation to see the changes

  • Arturo replied

    Oh even better! I didn't noticed it was in css.


    I commented this line:

    $('#header div.menu-wrapper').sticky();

    and the bar still appears when I scroll down. I even did it with the Prepos and restarted ghost. What could it be?

  •  8
    Estudio replied

    About your other question, checking your online scripts.min.js it seems is not compiled properly: http://prntscr.com/kk93wd the sticky functions still there.

    Try to open js/scripts.js and just click save and wait for the updated message (the green face icon) and reupload.

    If that doesn't work, try downloading the latest version of symmetric and just copy the prepos-6.config file and replace into your local environment and restart prepos app.

    On last case, you can compile that file manually: http://prntscr.com/kk97i6 (select scripts.js) and process file.

    Let me know if this help you.

  • Arturo replied

    Thank you , just saving the script did the trick. By the way, where can I contact  you for business? 

  •  8
    Estudio replied

    Hi!, you can contact me to admin@estudiopatagon.com or my personal email is: javierencalada20@gmail.com

    Regards!