Disable Comments on WordPress’ Jetpack Carousel

WordPress Jetpack Carousel - Disable Comments

Several people have posed questions about how to disable comments from Jetpack Carousel module in WordPress. There is a method that has already been discovered, but it requires a change to a plugin file. I’ll briefly mention those, but since I’m very much against changing any core or plugin files directly, I’ll show you another way to disable comments using CSS.

If AJAX calls are causing issues with your site, the pure CSS method won’t help. But if all you want to do is hide the ability to comment, read on.

Aahan Krish showed us how to disable comments using PHP code, in conjunction with a change to the jetpack-carousel.js file included with the plugin. Aahan piggy-backed off of work by William Thomas on disabling the AJAX calls to getComments for each image in the carousel (be sure to read through the comment thread).

If the load on your site from the AJAX calls to getComments is not an issue, and you’d just like to hide the comment form…

How to Disable Comments on Jetpack Carousel with CSS

You can place this code in several different places. It’s up to you where you put it. And depending on where you add it, you might not need the !important declarations. I’ve chosen to add this to the “Custom CSS” Jetpack module (ironic?), which loads before the “Carousel” CSS, thus why I am using !important.

The first declaration hides the Jetpack comment form container, the “Comment” link located to the right, directly above the “View Full Size” image link, and the “Loading Comments…” text.

You are left with a small gray area where the “Comment” link used to be. This is due to some padding & a background color. Remove the padding & the space is gone.

/* Jetpack: Carousel
****************************************** /

/* Hide Comment Form & Link */
#jp-carousel-comment-form-container, /* Form */
div.jp-carousel-buttons a.jp-carousel-commentlink, /* Link */
#jp-carousel-comments-loading /* Loading Comments text */ {
	display: none !important;
}

/* Remove Padding from Link Area */
.jp-carousel-buttons {
	padding: 0 !important;
}

“Loading Comments…” Text

Unfortunately, you will still (albeit, very briefly) see the “Loading Comments…” message appear while each new image is loading. This is added via javascript, and even the plugin author says it cannot be removed.

@Sebas helped us out with a way to disable the “Loading Comments…” text. I’ve updated the CSS code above to include a line for #jp-carousel-comments-loading { display: none; }.

10 Commentson "Disable Comments on WordPress’ Jetpack Carousel"

  1. /

    #jp-carousel-comments-loading span {
    display: none;
    }

    → Reply
    1. (Author) /

      Thanks Sebas. I’ve updated the code in my example CSS above. For reference, just using #jp-carousel-comments-loading should do the trick. No need for the extra span tag.

  2. /

    Hi thanks a lot for this. I placed in the CSS the /* Jetpack: Carousel
    ****************************************** / to remove the comments and loading comments and I placed
    .jp-carousel-wrap a.jp-carousel-image-download {
    display:none;
    } to disable the image “full size”, but small gray area, the padding, is still there. Can you help me with this?
    Much appreciated, thanks, kind regards, Sandra

    → Reply
    1. /

      I added the following to get rid of that small gray area:

      .jp-carousel-image-meta
      {
      display:none;
      }

    2. (Author) /

      Thanks for the tip, Lori.

  3. /

    Amazing! Thank you very much! It solved my problem.

    → Reply
  4. /

    I know I am so dummy with CSS , I followed your instruction I did not resolve my problem.
    Clicked on Custom CSS and it sent to the Theme CSS instruction (as you can see in the attached screenshot) and I copied your instruction,  it removed the comments area but the “Comment” link located on the right and the possibility to  open the “View Full Side” are still there and it works.
    I removed:
    “/* Jetpack: Carousel
    ****************************************** /“
    but the Theme instruction informed me  that a comment code was not closed.
    What did I make wrong? What have I not understood?
    Please give me the correct CSS instruction and where to put it, here you can see the screenshot of the page:
    https://drive.google.com/file/d/0Bzy-6-A97EnvTEFBWkExLXJTRDQ/view?usp=sharing

    → Reply
    1. (Author) /

      Lori’s tip above should remove the comment area:

      .jp-carousel-image-meta {
      display: none;
      }
  5. /

    Is there a way to do this while retaining the captions on mobile?

    → Reply
    1. (Author) /

      Warren,

      Sure, you could use a media query to only target certain screen sizes.

      @media screen and (min-width: 768px) {
        < -- code here -->
      }

      That would only apply the CSS to screens that are 768px wide and above. You could change 768px to be whatever width you’d like.

What Are Your Thoughts?

All fields are required. Your email will not be published.

You can use standard <code> and <pre> tags to post code examples, or a service like codepen.io.