Subpages in isotope/masonry layout instead of blog articles

sbstnbecker
(@sbstnbecker)

5 years ago

Hi there,

I am a complete website/WordPress newbie and would like to set up my very first website concerning the 86 outlying territories of the world (in German).

Due to its isotope/masonry style I selected the Baskerville theme (https://de.wordpress.org/themes/baskerville/) and the Elementor editor.
Thus, I would like to display the collected information with one container per topic. Too long texts are to be shorted to excerpts.

I started with one blog article per topic and finalised this procedure for the US Virgin Islands.
The Baskerville theme/Elementor editor offer image, clickable image slider/caroussel, clickable video, clickable audio, quote, counter-up, widgets and multiple formats among themselves etc. already in the isotope/masonry preview layout.

I really like the category page layout/category/amerikanische-jungfern-inseln/ (still on staging environment) showing all the above-mentioned features and wonder if/how I can also create this layout with subpages instead of blog articles.
It is probably not the best way to link 86 category pages as main content of the website than 86 real subpages.

None of the tested plugins presented a good result: /gebiete/amerikanische-jungfern-inseln/

Could you please help me? How can I display the content by subpages (instead of blog articles) and the subpages per country in isotope/masonry layout on separate country pages?

Thank you very much for your assistance.

Sebastian

The page I need help with: [log in to see the link]

Viewing 15 replies - 46 through 60 (of 174 total)

← 1 2 3 4 5 … 10 11 12 →

Thread Starter sbstnbecker
(@sbstnbecker)

4 years, 11 months ago

Hey @bcworkz ,

Great job, we are coming closer to how it should look like! :o)
Cf. http://unabhängige-gebiete.de.dedivirt473.your-server.de/gebiete/amerikanische-jungfern-inseln/

The containers are now listed below each other instead of from left to right.

It isn’t “full width, no sidebar” yet.

And the “more” tag is not accepted.

Concerning the browser I use Mozilla Firefox and I already tried the “Inspector” a little bit – again without knowing much and great success … :o)
Moderator bcworkz
(@bcworkz)

4 years, 11 months ago
I’m sorry the more tag isn’t working. That aspect is not part of our code. It’s handled by one of the Baskerville template parts. It should be the content.php template, assuming your posts don’t use any of the post formats like “aside” or “quote”. I would expect the template to use the_content(), which should honor the more tag.

Let’s try a test. It’ll mess up the nice arrangement we’ve just accomplished, but you can restore the code to its current state once we have test results. In our added code to content-child-page.php, at the get_template_part() call, add comment marks to deactivate the line, and add a the_content() call. Make it like this:
```
<?php // get_template_part( 'content', get_post_format()); ?>
<?php the_content(); ?>
```
The entire point is to see if the_content() honors the more tag like it should. If it works here, the problem lies in content.php. Which would mean making another custom template. But if the_content() here still does not work, something queer is going on with the WP_Query class which will require more debugging to resolve.

It’ll be easier to make sense of the element developer tool when you have a specific goal to work towards. It’s not necessary to understand all of the tool’s features. You can learn what you need to know as you solve a styling problem. The rest doesn’t matter. I’ll walk you through an example later on, after the PHP/more tag stuff is resolved.
Thread Starter sbstnbecker
(@sbstnbecker)

4 years, 11 months ago

Hey @bcworkz ,

Again many thanks for your support.

With the modification above we now get the 3 containers next to each other as wished: http://unabhängige-gebiete.de.dedivirt473.your-server.de/gebiete/amerikanische-jungfern-inseln/

But the more tag is not honored yet …

And the containers all have the same height instead of adopting the individual height of the content …

Will it be easily possible to somehow copy/paste the Baskerville 2 style code from the parent page to the child page? Or do we/I have to rebuild it part by part?
Moderator bcworkz
(@bcworkz)

4 years, 11 months ago
Let’s get this more tag bit straightened out before we worry about styles. Your copying idea will not work because for the most part all styles are applied universally. If they are not applied, it is because the selectors do no match or are overridden.

Let’s try inserting the following just above the get_template_part() line I asked you to comment out:
```
<?php global $more;
$more = false; ?>
```
This should force the more tag to be honored. If that works, un-comment the get_template_part() line and comment out the get_content() line, Like so:
```
<?php global $more;
$more = false;
get_template_part( 'content', get_post_format());
// the_content(); ?>
```
(extra PHP tags removed to clean up the code)
Thread Starter sbstnbecker
(@sbstnbecker)

4 years, 11 months ago
Hm, I think nothing happened …

Is this code correct then?
```
<?php
/**
 * This template is used in the Loop to display content
 *
 * @package Baskerville 2
 */
?>
	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

		<?php
		/**
		 * Post Title
		 */
		$before_title = '<header class="post-header"><h1 class="post-title entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">';
		$after_title = '</a></h1></header>';
		the_title( $before_title, $after_title );

		/**
		 * Post Thumbnail
		 */
		if ( baskerville_2_has_post_thumbnail() ) { ?>
			<div class="featured-media">
				<?php if ( ! is_single() ) { ?>
					<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
				<?php }
					the_post_thumbnail( 'baskerville-2-post-image' );
				if ( ! is_single() ) { ?>
					</a>
				<?php } ?>
			</div> 
		<?php }

		/**
		 * Post Content / Excerpt
		 */ ?>
			<div class="page-content clear">
				<?php
				the_content( sprintf(
					/* translators: %s: Name of current post. */
					wp_kses( __( 'Continue reading %s <span class="meta-nav">&rarr;</span>', 'baskerville-2' ), array( 'span' => array( 'class' => array() ) ) ),
					the_title( '<span class="screen-reader-text">"', '"</span>', false )
				) );
				$args = array(
'post_type' => 'page',
'post_parent' => get_the_ID()
);
// Custom query.
$query = new WP_Query( $args );
// Check that we have query results.
if ( $query->have_posts() ) {
echo '<div class="posts-masonry">'; 
// Start looping over the query results.
while ( $query->have_posts() ) {
$query->the_post();
echo '<div class="page-container">';

			?>
			
				<?php global $more;
$more = false; ?>
				
				
				<?php // get_template_part( 'content', get_post_format()); ?>
<?php the_content(); ?>
				
				
  <div class="clear"></div>
<?php
									  
						  echo '</div>';

}
echo '</div>'; 
}
// Restore original post data.
wp_reset_postdata();
				
				
				wp_link_pages();
				?>
			</div>
		<?php
		/**
		 * Post Meta
		 */
		if ( is_single() ) { ?>

			<footer class="post-meta-container clear">
				<?php baskerville_2_author_bio(); ?>

				<div class="post-meta clear">
					<?php baskerville_2_single_post_meta(); ?>
					<?php the_post_navigation(); ?>
					<?php edit_post_link(
							sprintf(
								/* translators: %1$s: Pencil icon, %2$s: Name of current post */
								esc_html__( '%1$s Edit %2$s', 'baskerville-2' ),
								'<i class="fa fa-pencil-square-o"></i>',
								the_title( '<span class="screen-reader-text">"', '"</span>', false )
							),
							'<span class="edit-link">',
							'</span>'
					); ?>
				</div>
			</footer> 
			<?php comments_template( '', true );

		} else {
			baskerville_2_post_meta();
		} ?>

	</article> 
```
Thread Starter sbstnbecker
(@sbstnbecker)

4 years, 11 months ago
With this insertion
```
<?php global $more;
$more = false;
get_template_part( 'content', get_post_format());
// the_content(); ?>
```
we get real containers! :o)

But the more tag is not considered …
Moderator bcworkz
(@bcworkz)

4 years, 11 months ago

We’ll get real containers in the end. It’s useful in testing to not use the containers because they can skew test results. With the first test where nothing happened, you mean nothing changed from before? No titles, more tag not honored? If so, the second test result is no surprise.

The more tag works correctly for the exact same posts in other lists?

Very puzzling. I’ve setup the same templates on my site’s child theme. Different parent theme, but it shouldn’t matter. The layout is different due to theme differences, but it gets child pages all the same. In my case the more tag works fine. And the global $more forces an excerpt even on single posts where we would normally get full content. I would normally expect another plugin is causing conflicts at this point, but if the more tag is honored elsewhere it seems unlikely.

Give me some time to think up what else we can do. In the mean time, please post a copy of Baskerville’s content.php template (assuming your posts are not using any post formats like “quote” or “link”). Thanks.

Thread Starter sbstnbecker
(@sbstnbecker)

4 years, 11 months ago

Hello @bcworkz ,

The more tag is honored in the posts/articles (cf. http://unabhängige-gebiete.de.dedivirt473.your-server.de/category/amerikanische-jungfern-inseln/), but not on pages …

content.php does not exist, only in combination with the posting formats aside, audio, gallery, image, link etc.

If you have a look at http://unabhängige-gebiete.de.dedivirt473.your-server.de/category/amerikanische-jungfern-inseln/ I use 1 or 2 quote formats …
Thread Starter sbstnbecker
(@sbstnbecker)

4 years, 11 months ago
Ah, I found content.php in the parent settings of the child theme configurator …

Can I copy them to the child theme without changing anything? Or how can I send you the content of this file?

Is this correct content of content.php?
```
<?php
/**
 * This template is used in the Loop to display content
 *
 * @package Baskerville 2
 */
?>

<?php if ( ! is_single() ) { ?>
	<div class="post-container">
<?php } ?>

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

		<?php
		/**
		 * Post Title
		 */
		$before_title = '<header class="post-header"><h1 class="post-title entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">';
		$after_title = '</a></h1></header>';
		the_title( $before_title, $after_title );

		/**
		 * Post Thumbnail
		 */
		if ( baskerville_2_has_post_thumbnail() ) { ?>
			<div class="featured-media">
				<?php if ( ! is_single() ) { ?>
					<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
				<?php }
					the_post_thumbnail( 'baskerville-2-post-image' );
				if ( ! is_single() ) { ?>
					</a>
				<?php } ?>
			</div> 
		<?php }

		/**
		 * Post Content / Excerpt
		 */ ?>
			<div class="post-content clear">
				<?php
				the_content( sprintf(
					/* translators: %s: Name of current post. */
					wp_kses( __( 'Continue reading %s <span class="meta-nav">&rarr;</span>', 'baskerville-2' ), array( 'span' => array( 'class' => array() ) ) ),
					the_title( '<span class="screen-reader-text">"', '"</span>', false )
				) );
				wp_link_pages();
				?>
			</div>
		<?php
		/**
		 * Post Meta
		 */
		if ( is_single() ) { ?>

			<footer class="post-meta-container clear">
				<?php baskerville_2_author_bio(); ?>

				<div class="post-meta clear">
					<?php baskerville_2_single_post_meta(); ?>
					<?php the_post_navigation(); ?>
					<?php edit_post_link(
							sprintf(
								/* translators: %1$s: Pencil icon, %2$s: Name of current post */
								esc_html__( '%1$s Edit %2$s', 'baskerville-2' ),
								'<i class="fa fa-pencil-square-o"></i>',
								the_title( '<span class="screen-reader-text">"', '"</span>', false )
							),
							'<span class="edit-link">',
							'</span>'
					); ?>
				</div>
			</footer> 
			<?php comments_template( '', true );

		} else {
			baskerville_2_post_meta();
		} ?>

	</article> 

<?php if ( ! is_single() ) { ?>
	</div>
<?php } ?>
```
Moderator bcworkz
(@bcworkz)

4 years, 11 months ago

That looks right, thanks. I was hoping for inspiration about why the more tag isn’t honored. I see no reason. I think the solution is to add a content filter just for this query that forces the content to be clipped at any more tag no matter what. The filter will be removed afterwards so it would not affect anything else.

I can put something together for you without too much fuss, but I’ll be away for a few days, so it’ll have to wait until I get back. I appreciate your patience through all of this.

Thread Starter sbstnbecker
(@sbstnbecker)

4 years, 11 months ago

@bcworkz , my appreciation is for you!

I am very very happy that you assist me in this affair! I really honor your support!!!

Again many many thanks! I will wait for your return.

Meanwhile I will fill up the other pages … :o)

Thread Starter sbstnbecker
(@sbstnbecker)

4 years, 11 months ago

Is it possible that, due to the code modifications we did, the feature to make a page to a subpage of another disappeared?

Last night I set up the new page “Wappengalerie” and wanted to make it to a subpage of “Uebersichten”, however, in the right sidebar the corresponding option was gone …

Thread Starter sbstnbecker
(@sbstnbecker)

4 years, 11 months ago

And another question: Do I have to copy content.php from the Baskerville 2 PARENT also to the Baskerville 2 CHILD theme?

Currently, I find it only in the parent theme according to the Child Theme Configurator …
Moderator bcworkz
(@bcworkz)

4 years, 11 months ago
None of our code could affect backend features. Our stuff is strictly limited to output. That’s a strange development. I suspect a plugin or theme conflict caused by recent core updates. If you can narrow down which extension is the cause by deactivating plugins until the feature reappears, then you can notify the responsible author about the issue so it can be fixed for everyone’s benefit.

If you need more help isolating the cause, please start a new topic in the Fixing WordPress forum. The forum admins prefer that we do not mix multiple subjects in the same thread. This topic has grown quite long on its own! 🙂 (not a problem)

One more thought about this though. Are you sure you were working on pages and not posts? Seems rather silly, but I’ve made that mistake before. Also be sure Page Attributes is checked in screen options (3 dots->Options).

No need to copy content.php to your child theme. Any templates not in the child will be taken from the parent. Only templates that have been modified need to be in the child folder. One location is fine for most templates.

OK, here’s the latest attempt to force more tag excerpts. First, add the following line to content-child-page.php, right below wp_reset_postdata(); (at the bottom of our added code):
remove_filter( 'the_content', 'get_more_excerpt', 999 );

The rest of my solution goes in the child theme’s functions.php. Just add it to the bottom of anything else already there:
```
/**
 * get_more_excerpt()
 * Replacement for get_the_content() that always only returns excerpts before
 * any  tags regardless of context. Otherwise returns all content.
 * Must be used in "The Loop".
 * WARNING! Password protected posts are not protected with this function.
 */
function get_more_excerpt() {
  global $post;
  $content = $post->post_content;
  // set link text here  VVVV
  $more_link_text = '(more&hellip;)';
  $output = '';
  if ( preg_match( '//', $content, $matches )) {
    if ( has_block( 'more', $content ) ) {
      // Remove the core/more block delimiters. They will be left over after $content is split up.
      $content = preg_replace( '//', '', $content );
    }
    $content = explode( $matches[0], $content, 2 );
    $has_more = true;
  } else {
    $content = array( $content );
    $has_more = false;
  }
  $output .= $content[0];
  if ( $has_more ) {
    $output .= ' <a href="' . get_permalink( $post ) . "#more-{$post->ID}\" class=\"more-link\">$more_link_text</a>";
    $output = force_balance_tags( $output );
  }
  return $output;
}

// Filter content only on pages based on child-page.php
add_action('wp_head', function() {
  if ( is_page()) :
    $template = get_post_meta( get_queried_object_id(), '_wp_page_template', true );
    if ('child-page.php' == $template ) {
      add_filter( 'the_content', 'get_more_excerpt', 999 );
    }
  endif;
});
```
I’m not expecting this to be the final solution to everything, but it’ll get us one step closer. I’m concerned the next issue will be that the masonry effect is not applied. We’ll get it figured out, it just takes time working like this. For everyone’s safety and benefit, it needs to be this way.

Did you ever change the other code I gave you for functions.php for enqueuing the masonry script? Change the template file name from child-list.php to child-page.php? If not, please do so.
Thread Starter sbstnbecker
(@sbstnbecker)

4 years, 11 months ago

Hey @bcworkz ,

Back again? Thanks for your lines.

With the latest code change more tags are honored, but embedded videos, weather widgets and the presentation of Google Maps changed/disappeared: http://unabhängige-gebiete.de.dedivirt473.your-server.de/gebiete/amerikanische-jungfern-inseln/

I did not change any other code other than you posted.

Do you mean I should rename “Child List Seiten-Template” to “Child Page” in the list of theme files in the theme editor?

Viewing 15 replies - 46 through 60 (of 174 total)

← 1 2 3 4 5 … 10 11 12 →

The topic ‘Subpages in isotope/masonry layout instead of blog articles’ is closed to new replies.

Subpages in isotope/masonry layout instead of blog articles

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics