Okay
  Public Ticket #2304789
Blog not displaying on gutenberg
Open

Comments

  •  4
    berg709 started the conversation

    My blog images and titles are suddenly not showing (since using Gutenberg) and the header title (i.e. blog) is no longer centered.

    Is there a fix for this?

    No CSS was applied to modify the images or titles from showing on the blog section.

    Tried creating a new blog page from scratch, but same issue.

    Thanks in advance!

    Attached files:  blog.png

  •  487
    Gabriel replied

    Hi, can you create a temp admin for me to take a look?

    I'm not sure what happened and can't recommend anything at this point.

    Thanks

  •   berg709 replied privately
  •   berg709 replied privately
  •  487
    Gabriel replied

    All right, I see you're using v.1.8. Current version is v.1.14 and your issue was most likely fixed since then.

    Is there any reason for not updating the theme?

    If not, I can update it for you. Let me know.

  •  4
    berg709 replied

    Can you please update?

  •  487
    Gabriel replied

    Sure. Will let you know when ready.

  •  487
    Gabriel replied

    Made the update, blog page looks good.

    Can you check on your end too?

  •   berg709 replied privately
  •   berg709 replied privately
  •  487
    Gabriel replied

    Titles for pages and posts built with the page builder can be changed to Image, Slide, Video, Animation, Base or Empty.

    For posts built with Gutenberg, title defaults to Base.

    I've added some CSS in theme options to fix the alignment.

    Take a look at the pages:

    https://www.rocktherankings.com/blog/

    https://www.rocktherankings.com/travel-seo/

    Is this what you were looking for?

  •   berg709 replied privately
  •   berg709 replied privately
  •  487
    Gabriel replied

    Can you share a screenshot? I don't see it on my end.

  •   berg709 replied privately
  •  487
    Gabriel replied

    Ok, the horizontal scroll came from the comments form.

    You set the container width to 824px on that page but comments were overflowing. I fixed it with CSS.

    The top spacing comes from Theme Options - Layout - Section Top / Bottom Padding. I assume you don't want to change that globally so I added some CSS for default posts only.

  •  4
    berg709 replied

    This was super helpful, Gabriel.

    Many thanks!

  •   berg709 replied privately
  •  487
    Gabriel replied

    Hi,

    1. Add this to Theme Options - Customizations - JavaScript Global:

    (function ($) {
        $.fn.scrollTo = function () {
            if (!isEmpty(this)) {
                $('html, body').animate({
                    scrollTop: $(this).offset().top -125
                }, 1000);
            }
        }
    }(jQuery));

    Adjust the offset if needed.

    2. You can enable it in the Grid List / Masonry List element:

    4101075121.png

    3. Add this to Theme Options - Customizations - CSS Global:

    .wp-block-image img {
        height: auto;
    } a {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    I've also included a fix for long links breaking out the container on mobile.

  •   berg709 replied privately
  •  487
    Gabriel replied

    What did you use for table of contents?

  •  4
    berg709 replied

    I'm using the built in block with Gutenberg

  •  487
    Gabriel replied

    Found it: https://wordpress.org/plugins/ultimate-blocks/

    Looks like it's an issue with the plugin, although they said it was fixed: https://wordpress.org/support/topic/toc-and-sticky-header/

    Here's a jQuery that adds an offset to the scroll. Add it to Theme Options - Customizations - JavaScript Global instead of the old one:

    (function ($) {
    $(document).on('click', '.ub_table-of-contents ul a', function (event) {
    event.preventDefault();    
     var href = $.attr(this, 'href');
     href = '#' + href.split('#')[1];
         $('html, body').animate({
             scrollTop: $($(href)).offset().top + -80
         }, 30);
    });
    }(jQuery));
    
  •   berg709 replied privately
  •  487
    Gabriel replied

    Ok, had to make a few adjustments. Links look different on your end. Use this:

    (function ($) {
    $(document).on('click', '.ub_table-of-contents a', function (event) {
    event.preventDefault();    
     var href = $.attr(this, 'href');
         $('html, body').animate({
             scrollTop: $($(href)).offset().top + -110
         }, 500);
    });
    }(jQuery));
  •   berg709 replied privately
  •  487
    Gabriel replied

    Should work, I tested it in console on your website.

    Does the temp admin still work?

  •   berg709 replied privately
  •  487
    Gabriel replied

    You had this above the code:

    grid-table.classList.remove("img-scale-up");

    Not sure what it did, but it triggered an error and stopped running the rest of the code.

  •   berg709 replied privately
  •   berg709 replied privately
  •  487
    Gabriel replied

    Hi, for 1 and 2, add this to Style field in section settings:

    background-repeat: no-repeat;

    3. There's nothing on /blog, did you change the location?

    4. Unfortunately not, the only way to do it is to write the posts using the page builder. That way you can add a masonry list element, just like on the blog page.

    5. This configuration should display the categories menu as a list:

    9375182448.png

  •   berg709 replied privately
  •  487
    Gabriel replied

    This code should remove author from blog page. Add it to Theme Options - Customizations - CSS Global:

    .tag-row.icon-row span, .tag-row.icon-row .social-group-button{
        display: none;
    }
    .tag-row.icon-row span:nth-child(1), .tag-row.icon-row span:nth-child(2) {
        display: inline;
    }

    For the footer, set the column layout to 4-4-4 (three equal columns).

  •   berg709 replied privately
  •  487
    Gabriel replied

    Sure. This removes the "/":

    .tag-row.icon-row span:after {
    display: none;
    }

    To split the footer in four equal columns, use the two columns layout and further split those in half:

    6008957437.png

    Code here:

    <div class="col-md-6">
    Content Here
    </div> <div class="col-md-6">
    Content Here
    </div>
  •   berg709 replied privately
  •  487
    Gabriel replied

    All right, to make it easier, I made a few changes in the theme. You will need to replace:

    wp-content/plugins/hybrid-composer/admin/admin-settings-page.php

    wp-content/plugins/hybrid-composer/index.php

    I'm including these files in the next update so don't worry about overwriting them.

    Refresh the theme options page a few times after uploading the files and you will get this:

    1991960932.png
    <div class="col-md-4">
    Content Here
    </div> <div class="col-md-4">
    Content Here
    </div> <div class="col-md-4">
    Content Here
    </div>

    Attached files:  Archive.zip

  •   berg709 replied privately
  •   berg709 replied privately
  •  487
    Gabriel replied

    Can you try using a Grid List instead of Masonry List? Use the same settings and see how it works.

  •   berg709 replied privately
  •   berg709 replied privately
  •  487
    Gabriel replied

    Hi, this should fix both:

    @media (max-width: 992px) {
    .menu-cta {
        display: block;
        margin-right: 0 !important;
        margin-bottom: 30px;
    }
    }
    .ub-block-post-grid-header {
        z-index: 1;
    }
  •   berg709 replied privately
  •  487
    Gabriel replied

    Sorry for the late reply.

    You can set the section to Full Width and add "No Paddings" to the column holding the image: https://socanny.d.pr/jjgOu4

    You might need to split the left section into three smaller columns (2-8-2) so it doesn't stick to the left side.

  •   berg709 replied privately
  •  487
    Gabriel replied

    This happens because the relative path included the parent page. Use the absolute path instead:

    https://www.rocktherankings.com/wp-content/uploads/2020/03/rtr-hero1.png