[michaelxxxParticipant]

Hello,

how can i create an own attachment page?

I found this:
https://community.theme.co/forums/topic/where-does-x-theme-stores-the-attachment-page-template/
But this post shows only how to add extra content to an attachment page.

Which files do I need to copy (and modify) to my X child theme to create an own attachment page?

It would be great when can can tell me this.

[DarshanaModerator]

Hi there,

Thanks for writing in! You can directly edit the page template. Which stack you’re using currently? so that we can provide you with an example.

Thanks!

[michaelxxxParticipant]

Hi,

on one theme i´m using ethos – on the other site i´m using renew 🙂

Thank you for your help.

[Rue NelModerator]

Hello There,

Thank you for providing that information. To create a custom attachment page, please follow these steps:

Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// ATTACHMENT.PHP
// -----------------------------------------------------------------------------
// Handles output of attachment page.
// =============================================================================

?>

<?php x_get_view( x_get_stack(), 'wp', 'attachment' ); ?>

3] Save the file named as attachment.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child

5] Again using Notepad or TextEdit or Sublime Text or any text editor, please create another new file in your local machine.
6] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/ETHOS/WP-ATTACHMENT.PHP
// -----------------------------------------------------------------------------
// Single post output for Ethos.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

?>

<?php get_header(); ?>
  
  <div class="x-container max width main">
    <div class="offset cf">
      <div class="<?php x_main_content_class(); ?>" role="main">

        <?php while ( have_posts() ) : the_post(); ?>
          <?php x_get_view( 'global', 'content', 'attachment' ); ?>
          <?php x_get_view( 'global', '_comments-template' ); ?>
        <?php endwhile; ?>

      </div>

      <?php if ( $fullwidth != 'on' ) : ?>
        <?php get_sidebar(); ?>
      <?php endif; ?>

    </div>
  </div>

<?php get_footer(); ?>

7] Save the file named as wp-attachment.php
8] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/ethos/

9] Again using Notepad or TextEdit or Sublime Text or any text editor, please create another new file in your local machine.
10] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/ATTACHMENT.PHP
// -----------------------------------------------------------------------------
// Display of attachment content.
// =============================================================================
?>

<?php do_action( 'x_before_the_content_begin' ); ?>

<div class="entry-content content">

<?php do_action( 'x_after_the_content_begin' ); ?>

  <?php the_content(); ?>
  <?php x_link_pages(); ?>

  	<?php 
  		// Parent post navigation.
		the_post_navigation( array(
			'prev_text' => _x( '<span class="meta-nav">Published in</span><span class="post-title">%title</span>', 'Parent post link', '__x__' ),
		) );
	?>			

<?php do_action( 'x_before_the_content_end' ); ?>

</div>

<?php do_action( 'x_after_the_content_end' ); ?>

11] Save the file named as attachment.php
12] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

For Renew stack, please repeat steps 5 to 8.

Please let us know how it goes.

[michaelxxxParticipant]

Hi,

thank you for your help.
It looks that your code creates an own attachment page where I can put some own content.

The only thing that is not shown is the attachment 😉

What code do I need to include into wp-attachment.php to show:

– the attachment title
– the post date and category
– and the most important: the full attachment image

[michaelxxxParticipant]

ok, I have added this code to show the title and date, that works fine:

    <div class="x-container max width main">
    <div class="offset cf">
      <div class="<?php x_main_content_class(); ?>" role="main">

    <div class="entry-wrap">
      <?php x_get_view( 'ethos', '_content', 'post-header' ); ?>
    </div>

But the only thing that is still missing is the attachment image.
Please see the screen shot.

What code do I need to show the full attachment image?

[Rue NelModerator]

Hello Again,

Sorry for the typo error in my last reply. Please revise the steps 11 and 12.
11] Save the file named as content-attachment.php
12] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

And on this file, you can add your customizations:

– the attachment title
– the post date and category
– and the most important: the full attachment image

This should display the full image and all your other custom information you’d like to display. For further details, please see the codex:
https://codex.wordpress.org/Function_Reference/wp_get_attachment_metadata

http://wordpress.stackexchange.com/questions/59061/get-attachment-title-based-on-attachment-id

Hope this helps.

[michaelxxxParticipant]

Hi Rue,

the changes of the steps 11 and 12 have no effect – the image is still not displayed 🙁
The title, the date, the category… everything is shown – only the image is not there.

Is there also a change in step 2, because the new filename in
wp-content/themes/x-child/framework/views/global/
is now content-attachment.php?

from
<?php x_get_view( x_get_stack(), 'wp', 'attachment' ); ?>
to:
<?php x_get_view( x_get_stack(), 'wp', 'content-attachment' ); ?>

Or is this not necessary?
When I do this I got only a blank page without anything.

Because of the renaming in the steps 11 and 12 maybe you can check you code again?
Or any other idea why the image is not shown?

What is the php code to display the image?

[RadModerator]

Hi there,

This line should not be changed, and it’s from step 2 and not related to 11 and 12.

<?php x_get_view( x_get_stack(), 'wp', 'attachment' ); ?>

The instruction from 11 is instead of naming the file as attachment.php, it should be content-attachment.php and upload it to wp-content/themes/x-child/framework/views/global/. That step 11 and 12 is related to step 6 which has this line:

<?php x_get_view( 'global', 'content', 'attachment' ); ?>

They are different files and mentioned on each step, you shouldn’t change them unless instructed. And please provide your admin and FTP login credentials so we could verify it.

Thanks!

[michaelxxxParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Would you mind providing the correct folder path where your site is installed, your child theme is empty in my view. But it could be due to FTP error too. How about file manager?

Thanks!

[michaelxxxParticipant]

This reply has been marked as private.

[LelyModerator]

This reply has been marked as private.

[michaelxxxParticipant]

Hello Lely,

thank you for your help. X has the best support!!! 🙂

With you code
<?php echo wp_get_attachment_image( get_the_ID(), array('800', '600'), "", array( "class" => "img-responsive" ) ); ?>
the picture is not shown with the full size. In my screenshot you can see that there is so much more space.

My questions:
1) can I disable the sidebar on attachment pages?
2) how can change the size of the image? when I change the array('800', '600') to array('1200', '800') it has no effect.
3) how can I make the image clickable to open the image in full size (I have lightbox activated in my theme)?

[LelyModerator]

Hi There,

You’re welcome!

1.) To remove the sidebar, please update wp-attachment.php file to this:

<?php

// =============================================================================
// VIEWS/ETHOS/WP-ATTACHMENT.PHP
// -----------------------------------------------------------------------------
// Single post output for Ethos.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

?>

<?php get_header(); ?>
  
  <div class="x-container max width main">
    <div class="offset cf">
      <div class="x-main full" role="main">

        <?php while ( have_posts() ) : the_post(); ?>
          <?php x_get_view( 'global', 'content', 'attachment' ); ?>
          <?php x_get_view( 'global', '_comments-template' ); ?>
        <?php endwhile; ?>

      </div>

    </div>
  </div>

<?php get_footer(); ?>

2.) To make it bigger please update this line:

<?php echo wp_get_attachment_image( get_the_ID(), array('700', '600'), "", array( "class" => "img-responsive" ) ); ?>		

To this:

<?php echo wp_get_attachment_image( get_the_ID(), 'full', "", array( "class" => "img-responsive" ) ); ?>		

3.) To make it in lightbox, please update the code in #2 to this:

<a href="<?php echo wp_get_attachment_url( get_the_ID() ); ?>" class="attachment-lightbox"><?php echo wp_get_attachment_image( get_the_ID(), 'full', "", array( "class" => "img-responsive" ) ); ?> </a>

Then add the following code on your child theme’s functions.php file:

add_action('wp_footer', 'enqueue_lightbox_script', -99999);
function enqueue_lightbox_script() {
  echo do_shortcode('[x_lightbox selector=".attachment-lightbox"]');
}
	

This link might also help:https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

Cheers!

[Author]

Posts