[Support request] custom image attachment page

[Robin]

I would like to create a custom template for every image attachment page. Is this done through the creation of an “element?”

Please advise!

[David]

Hi there,

This topic here covered the use of Elements for this thing:

https://generatepress.com/forums/topic/template-for-attachments-image/

Let us know if that is of help.

[Robin]

Thank you for getting back to me.

Possible for you to give me a little more guidance?

I am familiar with adding php via the snippet plugin, so that’s no obstacle.

The code itself is the obstacle…

If this can all be accomplished via en Element, that’s great.

What I want to end up with is an attachment page

with a particular navigation menu at top
with the image at LARGE centered on page
with the image’s caption and description below it

. . .

While I await your reply, I will go back over the Elements documentation, see if it starts to make sense.

Thank you!

[David]

Increase the size of the image with this CSS:

body.attachment .attachment img {
    width: 100%;
}

You can use this PHP to get the Caption:

<?php
$image = get_post();
$image_caption = $image->post_excerpt;
echo '<span class="attachment-caption">' . $image_caption . '</span>';
?>

Hard part is placing it below the image as the content is filtered…. works fine after_entry_header which would mean it comes after title and before image.

The navigation – is this a change to the primary navigation ?

[Robin]

Interesting! Yes, I will try that. The body.attachment styling will affect only the page displayed when an image without any other link is clicked?

What happens now is I get a post page containing the image at thumbnail size, and sidebars containing various items useful for blogs and which I do not wish to appear.

Another alternative is to style the single post template, because there will be no blogging on this site, so that template will only be useful for those single-image pages. Is that a better solution? I think I can disable the image-click-link via the JIG (Justified Image Grid) settings. If not, I would want to disable that.

Yes, a menu the same in appearance and location but containing only two links: the home link and a “back to the gallery” link.

The website will consist mostly of image galleries, with the ability to see those images larger.

Thank you very much for your assistance.

[Robin]

At this point, I have no idea from where/what, which template is called up when an image is clicked and displays alone on a black background. If I could style that instance, I would be HAPPY.

Please advise.

Thank you.

[David]

the body.attachment will only apply to the default media attachment pages.
You can disable elements such as sidebars using the Layout Element and apply the display rules of: Media

https://docs.generatepress.com/article/layout-element-overview/

..when an image is clicked and displays alone on a black background.

I assume this is the lightbox feature of the Gallery plugin. Looking at the doc’s it provides captions and descriptions – if this is preferred what ‘styling’ would it require?

[Robin]

No, not the lightbox function.

I am looking to make an alternative to the lightbox, starting with the default attachment template, whatever that is.

What I want:

When a gallery thumbnail is clicked now the image is displayed on a back background, with nothing else on the page. I want to take charge of that page, so that ANY thumbnail image clicked in a gallery goes to that page, which in addition to have a white background instead of a black background, has a top navigation menu with just 2 items on it, but the same placement and styling of the primary navigation menu. The two links I want are the home link at far right as it is now, and a goBack() link labeled “return to gallery” or equiv.

https://dev.janestarks.com/plein-air-cloudscapes-2/

clicking on any thumbnail on this page, goes to (for example):

https://dev.janestarks.com/wp-content/uploads/2019/10/03.22.19-ute-mountain-morning-clouds-1024×361.jpg

the above type of page is what I want to style/construct a template for. Are you saying I can do that by creating an Element?

. . .

thank you

[Robin]

[Tom]

Right now your gallery is linking to the image itself (black background).

You need to set it to open the attachment page, instead of the file.

You can create a custom page template for attachments, you just need to name the template attachment.php.

Otherwise, you can use Elements to insert your caption, remove elements etc.. as David shared above.

To create a different primary navigation for attachments, you’ll likely need to use a plugin like this: https://wordpress.org/plugins/conditional-menus/

[Robin]

Still working on this, and have found something that is a glitch but might be helpful. From the media assistant, if I click on “view” on any particular image, what displays is the home page. So have I somehow set the attachment template default to the home page, without realizing it?

But in the JIG galleries, clicking on any particular thumbnail gets a plain black (or very dark grey? 0e0e0e I think) page, with the image at full size.

https://dev.janestarks.com

THANK YOU.

Quite a puzzle for me…

[Robin]

Beginning to make progress styling the attachment page, and can disable the single image (media link) display.

Got rid of the comments and sidebar, but removed the comments by brute force {display:none;}

I would still like more guidance on styling the page that appears as the attachment. There must be an easier way than doing it all by custom css in the customize section.

What am I missing?

Please advise.

[Robin]

For example, I added

<?php
$image = get_post();
$image_caption = $image->post_excerpt;
echo ‘<span class=”attachment-caption”>’ . $image_caption . ‘</span>’;
?>

to Snippets, but the image caption is not showing up (anywhere) on the attachment page.

[Robin]

If you can tell me which template is called when the image is clicked (single.php? content-single.php?) that would help me understand what I need to do.

[Tom]

The attachment.php file is used for single media files. It doesn’t exist in the theme by default, so single.php is used. You can copy single.php and change the filename to attachment.php in your child theme.

For the PHP you added, you should add it using a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/

Then you can choose the hook (where it will display), and the Display Rules (Media).

[Author]

Posts