Attachment Page Customisation

Hello, I have several pdf files which display as Thumbnails on a page entitled Publications. When selected a pdf file opens with pdf embedder on attachment page. Is there any way I can get rid of the Leave a Reply / Post Comment items from the attachment page and perhaps replace with a button to get me back to the Publications Page.

I hope I explained that well enough.

Kind Regards,

Lawrence

Hello Lawrence,

To achieve it, do the following steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

(function($){
      
    "use strict"

    if( $('body').hasClass('attachment') ){

      var buttonURL   = '#';
      var buttonLabel = 'Back to Publications';
      
      // Remove comment section
      $('#comments').remove();

      // Add button below attachment page
      $('.post-wrap').append('<a class="roll-button more-button" href="'+buttonURL+'">'+buttonLabel+'</a>');
      
    
    }

})(jQuery);

  1. Update

Regards,
Kharis

Hi Kharis, that worked perfectly many thanks.

What about if I had two (2) pages with Publications on the site…for the sake of discussion Publications #1 and Publications #2 with different pdf’s on each. So when I go to Publications #1 and select an pdf it opens…but how would I specifically direct the Back To Publications button to take me back to Publications #1.

Hope I am not asking for too much,

Kind Regards,

Lawrence

oops, and I meant to add…vice vers.

Hello there,

I am glad to know that the code works for you.

As each attachment is attributed to an unique ID number, replace the code I suggested with this one:


(function($){
      
    "use strict"

    if( $('body').hasClass('attachment') ){

      var buttonURL   = '#';
      var buttonLabel = 'Back to Publications';
      
      // Different button URL for attachment with ID 1778
      if( $('body').hasClass('attachmentid-1778') ){
        buttonURL = '#other-link';
      }
      
      // Remove comment section
      $('#comments').remove();

      // Add button below attachment page
      $('.post-wrap').append('<a class="roll-button more-button" href="'+buttonURL+'">'+buttonLabel+'</a>');
      
    
    }

})(jQuery);

From the code above, replace 1778 with your attachment ID. To find it, go to attachment edit details page. In the web browser’s address bar, you will see something like:

http://yoursite.com/wp-admin/post.php?post=1778&action=edit

Regards,
Kharis

Thank you Kharis,

So if I understand you correctly…if I have say 20 pdf’s i.e. 10 on Publications Page #1 and 10 on Publications Page #2, I have to copy the script 20 times amending to suit each particular attachment id.

Sorry if I am being a bit daft!

Regards,

Lawrence

Yes, you’re right.

Regards,
Kharis

Hello Kharis…doesn’t seem to work for me.

Let’s say I have these two attachment ID’s

http://productsandfeatures.com/wp-admin/post.php?post=4473&action=edit
http://productsandfeatures.com/wp-admin/post.php?post=4474&action=edit

If I am viewing the attachment with the ID 4473 and click on the Back to Publications button I want to go back to the page with the ID http://productsandfeatures.com/bicaval-tricuspid-valve-repair-publications/

If I am viewing the attachment with the ID 4474 and click on the Back to Publications button I want to go back to the page with the ID http://productsandfeatures.com/bicaval-tricuspid-valve-repair-screening-studies/

With these two examples how should the code be populated.

Many thanks for you help

Kind Regards,

Lawrence

Hello Lawrence,

Thank you for sharing the links and explaining it more clearer. As your site is currently being under-construction mode, I can’t debug and troubleshoot the problem. Would you mind grant me to access your site admin area, so I can inspect it directly? For security reason, share the working login credentials to your WP admin to kharisblank@gmail.com; mention the link to this thread in your email body.

Regards,
Kharis

Hello Kharis, email sent.

Kind Regards,

Lawrence

I just replied it.

Regards,
Kharis

Hi, it works fine for the first attachment…thank you. However when I copy, paste and amend the Java Script for the second attachment two (2) buttons appear under the attachment saying Back To Publications

Any idea’s,

Lawrence

Hello Lawrence,

To tell the button to be attributed to other link for other attachment ID, you don’t have to replicate the entire code. But you need to copy the if conditional check. The final code will look like this:


(function($){
      
    "use strict"

    if( $('body').hasClass('attachment') ){

      var buttonURL   = '#';
      var buttonLabel = 'Back to Publications';
      
      // Different button URL for attachment with ID 4473
      if( $('body').hasClass('attachmentid-4473') ){
        buttonURL = 'http://productsandfeatures.com/bicaval-tricuspid-valve-repair-screening-studies/';
      }

      // Different button URL for attachment with ID 4474
      if( $('body').hasClass('attachmentid-4474') ){
        buttonURL = 'http://productsandfeatures.com/other-link';
      }

      // Different button URL for attachment with ID 4475
      if( $('body').hasClass('attachmentid-4475') ){
        buttonURL = 'http://productsandfeatures.com/other-link-2';
      }      

      // Different button URL for attachment with ID 4476
      if( $('body').hasClass('attachmentid-4476') ){
        buttonURL = 'http://productsandfeatures.com/other-link-3';
      }    
              
      // Remove comment section
      $('#comments').remove();

      // Add button below attachment page
      $('.post-wrap').append('<a class="roll-button more-button" href="'+buttonURL+'">'+buttonLabel+'</a>');
      
    
    }

})(jQuery);

Regards,
Kharis

many many thanks Kharis. All good now.

Kind Regards,

Lawrence

You’re always welcome here. :slight_smile:

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis