How to adjust parameters in image "attachment page"

Hi - I’d like to be able to use the “attachment page” feature to enable the user to view a larger version of an image in a gallery. However I haven’t been able to find a clear description of how to adjust the parameters of these pages. By default, for example, the Next/Previous buttons don’t display according to parameter set elsewhere in the theme. And the method to eliminate elements like “comment field”, “name of poster”, etc aren’t apparent.

In doing a bit of research, indications point back to these things being controlled by the theme. Is there a way to configure the page, ideally without doing custom coding? :slight_smile:

Thanks in advance!

  1. Next/Previous buttons navigates through images that were attached to that post.

  2. Since there is no function that would allow to disable comments on attachment pages while keeping theme elsewhere you have to do some coding to remove them. Add this code to Child Theme functions.php. A sample Sparkling child theme can be download from here.

function sparkling_filter_media_comment_status( $open, $post_id ) {
	$post = get_post( $post_id );
	if( $post->post_type == 'attachment' ) {
		return false;
	}
	return $open;
}
add_filter( 'comments_open', 'sparkling_filter_media_comment_status', 10 , 2 );
  1. Date and author name can be removed by adding this code to Appearance >> Theme Options >> Other >> Custom CSS
.attachment .entry-meta {
    display: none;
}

Let me know if there is anything else.

Hi - thanks very much for the info! I was able to successfully remove the Comment fields, and the Date & author name. I’m still having an issue with the Prev/Next buttons. One issue is that although I set the Theme Options -> Main -> Element Color, the hover color took effect, but not the primary element color.

The other oddity with those buttons (I think a WP issue?) is that as I scroll thru next/back, I see photos that are in the image library, not just ones from that specific page. In the example below, if I next/back, I’d only expect to see Tole Trays, not other products, the header image, etc. The same behavior occurs if I click on the product image too. In the ideal world, none of that would happen, and I could just add a “back” button to take me up a level to the prior page. But I doubt this is a theme issue, just a WP thing.

I’m also noticing the image isn’t centered in the page. It should actually display much higher on the page, and be centered horizontally. If you view this page you’ll see what I’m describing.

  1. initial page: http://test.habitatinternational.com/tole-trays
  2. and if you click on one of the trays, you’ll see the attachment page with the issues I described, like this: http://test.habitatinternational.com/?attachment_id=34

If you do have any thoughts on how I can correct these issues (well only the Theme-related ones, like the button colors) it would be much appreciated. I’m exploring gallery plug-ins but this project is on a limited budget so …

:slight_smile: thanks again, much appreciated!

  1. To change button link text color you can use CSS code like this by adding it to Appearance >> Theme Options >> Other >> Custom CSS
.entry-attachment {
    text-align: center;
}

.site-content [class*="navigation"] a {
    color: #111;
}
  1. Here you can read more about function used for image navigation on attachment pages. Images that are added inside that post doesn’t mean that they were attached to that post (uploaded when editing that exact post.)

Maybe you might consider using Jetpack that we have installed on our website. I mean that lightbox effect when you click on images.

Thanks again Aigars! The code you suggested did indeed change the button text color. I’ll poke around more to see if I can also change the button color. And I’ll refer to your other suggestions to see what I can do to optimize these pages.

Thanks very much for your help. The support you provide here at no charge exceeds what one often gets for a paid product.

Thank you for your feedback! I really appreciate it!

You can style buttons like this:

#image-navigation .nav-previous a, 
#image-navigation .nav-next a {
  border-color: #111;
  background: #111;
  color: #fff;
} 

This will affect only attachment pages and its navigation. I just used an example color codes and you can use any hex color codes you want.

Let me know if there is anything else.