[Resolved] Template for attachments (image)

Home Forums Support Template for attachments (image)

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #991700
    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.

    #991971
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #991991
    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.

    #992414
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #992498
    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.

    #992578
    Tom
    Lead Developer
    Lead Developer

    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/

    #992587
    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.

    #992739
    David
    Staff
    Customer Support

    Hi there,

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

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

    #993157
    Alexander

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

    #993571
    David
    Staff
    Customer Support

    Thats certainly true 🙂

    #995060
    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

    #995651
    Tom
    Lead Developer
    Lead Developer

    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?

    #995970
    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.

    #996550
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #996576
    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…)

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.