[Resolved] Template for attachments (image)

[Alexander]

Hello,

I just switched to GeneratePress (including the Premium extensions) and it all went pretty well. I’m a photographer and my site is very heavy on photos (obviously) and I also often link to individual photos, ie. WP’s attachment page, for example https://www.alex-kunz.com/photos/summer-dawn-at-garnet-peak/.

In my previous theme, I had a separate template image.php and it showed additional metadata from the attachment, namely the photo’s caption, and the categories and tags (I’m using a plugin that enables taxonomies for attachments).

I’d like to get the same extra information in GeneratePress but GP doesn’t even have an image.php template – I’m not a developer and don’t even know where to start now. 😛

Any help would be appreciated.

Thanks
Alexander.

PS: already using a child theme of GP.

[Tom]

Hi there,

What theme were you using previously?

Any examples of the kind of layout you want to achieve?

It should be relatively easy to set something up using Elements (or in your child theme).

Let me know 🙂

[Alexander]

Hello Tom,

thanks for your help – I hope this isn’t asking too much…

The theme I previously used was called “Portfolio Press” (I used the premium version, Portfolio+) and I guess the image.php template was really just a customized version of single.php for the attachment.

What I’d like to have (other than what GP shows right now) would be a slightly larger image with the photo caption underneath (then the description, GP already does that). In the footer I had a backlink to the parent of the attachment (“This photo appears in …”), and I added php to get the two term lists for attachment_tag and attachment_category to it.

Here’s what it looked like: screenshot

Looking at the template, this is the section in footer that contains the parts I’d like to add (I hope this pastes in a useful way)…

	<footer class="entry-meta">
	<span class="entry-meta-icon icon-format-<?php echo esc_attr( 'image' ); ?>"></span>
	<?php
		$metadata = wp_get_attachment_metadata();
		printf( __( 'This photo appears in <b><a href="%4$s" title="View %5$s" rel="gallery">%6$s</a></b> at <a href="%1$s" title="Link to full-size image">%2$s &times; %3$s</a> ', 'portfolioplus' ),
			esc_url( wp_get_attachment_url() ),
			$metadata['width'],
			$metadata['height'],
			esc_url( get_permalink( $post->post_parent ) ),
			esc_attr( strip_tags( get_the_title( $post->post_parent ) ) ),
			get_the_title( $post->post_parent )
		);
	?>
	<?php edit_post_link( __( 'Edit', 'portfolioplus' ), '<span class="edit-link">', '</span>' ); ?>
	<?php echo get_the_term_list( $post->ID, 'attachment_category', '- category: ', ', ' ); ?>
	<?php echo get_the_term_list( $post->ID, 'attachment_tag', '<br>Photo tags: ', ', ' ); ?>
</footer>

Thanks a lot
Alexander.

[Tom]

Cool, so let’s add that to GP first.

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to after_content
3. Check the “Execute PHP” checkbox
4. Add this as the hook content:

<footer class="entry-meta">
    <span class="entry-meta-icon icon-format-<?php echo esc_attr( 'image' ); ?>"></span>
    <?php
        $metadata = wp_get_attachment_metadata();

        printf( __( 'This photo appears in <b><a href="%4$s" title="View %5$s" rel="gallery">%6$s</a></b> at <a href="%1$s" title="Link to full-size image">%2$s &times; %3$s</a> ', 'portfolioplus' ),
            esc_url( wp_get_attachment_url() ),
            $metadata['width'],
            $metadata['height'],
            esc_url( get_permalink( $post->post_parent ) ),
            esc_attr( strip_tags( get_the_title( $post->post_parent ) ) ),
            get_the_title( $post->post_parent )
        );

        edit_post_link( __( 'Edit', 'portfolioplus' ), '<span class="edit-link">', '</span>' ); 
        echo get_the_term_list( $post->ID, 'attachment_category', '- category: ', ', ' );
        echo get_the_term_list( $post->ID, 'attachment_tag', '<br>Photo tags: ', ', ' ); 
    ?>
</footer>

5. Under “Display Rules”, choose “Media”.

Let me know how that looks so far 🙂

[Alexander]

OMG I can’t believe how elegantly this is done in GeneratePress. I love it! Thank you, Tom.

It looks good (I guess I’ll tweak it a little bit, no problem) – would it be possible to add the icons that GP uses to indicate post categories and post tags for the term lists, for visual consistency?

What’s missing is the image caption, and to make the image a little bit larger (I used the “large” size in the past).

It appears that the parent information doesn’t work though – attachments always reference themselves there right now, instead of the post or page they’re attached to. (example: https://www.alex-kunz.com/domelands-late-in-may/mud-hill-bowl/#main)

Thank you so much for your help!
Alexander.

[Tom]

To add the icons, we could need to tweak the HTML a bit. Did you update it at all in the Element? If so, can you share what you’re using now? I can check the newest code out to see why the parent info isn’t working as well.

As for the image size, try this function:

add_filter( 'prepend_attachment', function( $attachment_content ) {
        
        // set the attachment image size to 'large'
        $attachment_content = sprintf( '<p>%s</p>', wp_get_attachment_link(0, 'large', false) );
        
        // return the attachment content
        return $attachment_content;
        
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

[Alexander]

Hello again Tom – image size function works! Thanks!

After a little bit of tweaking, the current code in the Element is this:

<footer class="entry-meta">
    <?php
        $metadata = wp_get_attachment_metadata();

        printf( __( 'This photo appears in <b><a href="%4$s" title="View %5$s" rel="gallery">%6$s</a></b> at <a href="%1$s" title="Link to full-size image">%2$s &times; %3$s</a><br>', 'portfolioplus' ),
            esc_url( wp_get_attachment_url() ),
            $metadata['width'],
            $metadata['height'],
            esc_url( get_permalink( $post->post_parent ) ),
            esc_attr( strip_tags( get_the_title( $post->post_parent ) ) ),
            get_the_title( $post->post_parent )
        );
        
        echo get_the_term_list( $post->ID, 'attachment_category', '<b>Filed in:</b> ', ', ' );
        echo get_the_term_list( $post->ID, 'attachment_tag', '<br><b>Keywords:</b> ', ', ' ); 
    ?>
</footer>

I mean to ask: in order to set the “Execute PHP” in the hook element, I had to comment-out the DISALLOW_FILE_EDIT in wp_config altogether (ie. not just set it to “false”). Can I put it back in now and set it to “true”, or will that prevent the hooks from working?

Thanks for your help
Alexander.

[David]

Hi there,

You can use this filter to allow file edit just for the hooks:

https://docs.generatepress.com/article/generate_hooks_execute_php/

[Alexander]

Thanks a lot, David – I guess I’ve learned now that there’s always either a hook or a filter. 😉

[David]

Thats certainly true 🙂

[Alexander]

Hello Tom,

have you had a chance to investigate why the parent information isn’t working properly, and whether there’s a way to show the photo caption under the image?

Thanks!
Alexander

[Tom]

Hey Alexander,

For the parent info, let’s try this:

<footer class="entry-meta">
    <?php
        global $post;
        $metadata = wp_get_attachment_metadata();

        printf( __( 'This photo appears in <b><a href="%4$s" title="View %5$s" rel="gallery">%6$s</a></b> at <a href="%1$s" title="Link to full-size image">%2$s &times; %3$s</a><br>', 'portfolioplus' ),
            esc_url( wp_get_attachment_url() ),
            $metadata['width'],
            $metadata['height'],
            esc_url( get_permalink( $post->post_parent ) ),
            esc_attr( strip_tags( get_the_title( $post->post_parent ) ) ),
            get_the_title( $post->post_parent )
        );
        
        echo '<span class="attachment-categories">' . get_the_term_list( $post->ID, 'attachment_category', '<b>Filed in:</b> ', ', ' ) . '</span>';
        echo '<span class="attachment-tags">' . get_the_term_list( $post->ID, 'attachment_tag', '<br><b>Keywords:</b> ', ', ' ) . '</span>'; 
    ?>
</footer>

As for the caption – where is it coming from? The standard WP caption field?

[Alexander]

Hello Tom,

YAY – adding the global $post fixed it! 🙂

The caption is indeed the standard WP Caption field. I played with this and found that internally, apparently the caption is is the_excerpt. I didn’t manage to get it to show UNDER the photo though (just like a photo caption when inserting a photo in a post).

…and I also noticed that it collides with the manual excerpt override that you helped me with, here https://generatepress.com/forums/topic/manual-excerpt-is-ignored/ – namely, when I insert the caption, the “Read More” button also appears (which I guess is correct behavior, but it doesn’t make sense there, obviously).

I did copy the category and tag styling from normal posts so the code I’m using now is this:

<footer class="entry-meta">
    <?php
				global $post;
        $metadata = wp_get_attachment_metadata();
        printf( __( 'This photo appears in <b><a href="%4$s" title="View %5$s" rel="gallery">%6$s</a></b> at <a href="%1$s" title="Link to full-size image">%2$s &times; %3$s</a><br>', 'generatepress' ),
            esc_url( wp_get_attachment_url() ),
            $metadata['width'],
            $metadata['height'],
            esc_url( get_permalink( $post->post_parent ) ),
            esc_attr( strip_tags( get_the_title( $post->post_parent ) ) ),
            get_the_title( $post->post_parent )
        );
        
        echo get_the_term_list( $post->ID, 'attachment_category', '<span class="cat-links"><span class="screen-reader-text">Categories </span>', ', ' );
        echo get_the_term_list( $post->ID, 'attachment_tag', '<br><span class="tags-links"><span class="screen-reader-text">Tags </span> ', ', ' ); 
    ?>
</footer>

Thanks for your continued help, it is truly appreciated!
Alexander.

[Tom]

What if we:

1. Add a new Hook.
2. Set the Hook to after_content
3. Check the “Execute PHP” option.
4. Add this as your content:

<div class="attachment-excerpt">
    <?php
        global $post;
        echo $post->post_excerpt;
    ?>
</div>

Let me know 🙂

[Alexander]

Thanks Tom. This shows the correct caption (and without a “Read More” too;-)) so – YAY!

But it appears in the wrong place (below the category and tags). I’ve switched the hook to after_entry_header for now which is a bit better but ideally, the caption would be under the photo… just like the caption under a photo in a normal post (and with the same styling too).

Would it be possible to marry this hook with the bit of code (that you previously gave me in this thread, to show the image larger) and add the caption to the output of $attachment_content? (I guess it is but that’s beyond my level of knowledge I’m afraid.)

add_filter( 'prepend_attachment', function( $attachment_content ) {
        
        // set the attachment image size to 'large'
        $attachment_content = sprintf( '<p>%s</p>', wp_get_attachment_link(0, 'large', false) );
        
        // return the attachment content
        return $attachment_content;
        
} );

(edited for clarity… I hope…)

[Author]

Posts