Directing landing article page to a specific post?

[PhotoWebMax]

Hi All,

I am not sure if this is PW task or not, but here goes...

On one of the site PW sites I am working on I have a lower "articles teaser" section added to my template. In this section I am using the PW foreach API system to display each article's title, short intro paragraph and a "continue reading" link.

I plan on only having about four or so articles that use this articles teaser section. All of the "continue reading" links takes the viewer to the same single articles container post page where each article is displayed in its full length, one article after another. I find this reduces clicking from page to page, etc.

What I would like to add is a system that takes the reader directly to the specific article they clicked on? So, if the dear reader clicked on the third article in the front "articles teaser" section they would be shown the third article on the actual articles container page: as if they had physically scrolled down the page themselves. From there the reader can simply scroll up or down this page to read the remaining articles. 

My hunch is that there might be a jQuery solution for this? I have never done this before. I am looking for tips on how to combine some kind of script to the PW foreach statement I am using. Or is there a direct PW solution to this that does not require a script?

Thanks!

Max

[SiNNuT]

You can do it with plain old html. You can use a so called fragment identifier to navigate to locations within a html page. Just generate your links like so:

mysite.com/articlecontainer/#location1

And then on the article container page put id's for each article:

<h1 id=location1>First article title</h1>

Repeat for every article, using PHP to automate this. Note the hashtag on the end of the url, this the fragment identifier. Of course, choose names and elements that make sense to you.

[Ivan Gretsky]

If you also need some nice eased scrolling from section to section it could be done with jQuery like this. Probably it is possible to open the long article page and then scroll down smoothly to the desired post.

[PhotoWebMax]

Thanks Guys.

I will take a look at both and see where I am at. Now that I know the term for the affect (fragment identifier) it should be easier to do some digging.

There are several ways of coding and presenting teased post content. In this case I thought this effect might be worth looking into. One of the issues might be how Google handles the content on this page...

This is worth reading: http://blog.httpwatch.com/2011/03/01/6-things-you-should-know-about-fragment-urls/

[adrian]

You could make use of PW's url segments and window.history.pushState - they work together very nicely

[PhotoWebMax]

I did some quick testing with SiNNuT's suggestion and quickly ran into trouble...

I tried adding the /#location1. etc to the article titles but that will not do as the /#location1 gets added to the title name. it looks bad on the front articles teaser section for a start. 

I need this to happen dynamically. So I assume I need to add this to the articles container page template. Here is the relevant code:

<div id="articlesContainer">
	<h2>Articles & More</h2>
	<?php
	$articlesItems = $pages->find("template=articles");
	foreach($articlesItems as $articlesItem) { ?>
		<div class="articlePost"">
	  <h3><?php echo $articlesItem->title; ?></h3>
	  <?php echo $articlesItem->article_maintext; ?>
	</div><!--articlePost ends-->
	  <?php 
	}

	?>
</div><!--articlesContainer ends-->

The fragment identifier code will need to be added to the h3 headline in this case. Do I also need to add a new field that allows me to add the location#?

Thanks!

[SiNNuT]

Something like this. In essence your Read  more links will need to have the hashtag that point to an id (this is the location) on the full article page.

<div id="articlesContainer">
  <h2>Articles & More</h2>
  <?php
  $articlesItems = $pages->find("template=articles");
  foreach($articlesItems as $articlesItem) { ?>
      <div class="articlePost">
        <h3 id="<?php echo $articlesItem->id; ?>"><?php echo $articlesItem->title; ?></h3>
        <?php echo $articlesItem->article_maintext; ?>
      </div><!--articlePost ends-->
    <?php 
  }
  ?>
</div><!--articlesContainer ends-->

<!--
On your template/page that holds the teaser links you
need to generate the hashtagged links to the h3 id, set above.
Do not copy paste but incorporate into your logic. Example below (untested):
-->

<?php
$teaserLinks = $pages->find("template=articles");
foreach($teaserLinks as $teaserLink) {
  echo "<a href='" . $pages->get("/path/to/full_article_page/")->url . '#' . $teaserLink->id . "'>Read more</a>";
}

?>

[PhotoWebMax]

I have gotten this far. This is the full code for the articles container page template:

<?php include('./_head.php'); // include header markup ?>
<div id='content'>
<?php 
// output 'headline' if available, otherwise 'title'
	echo "<h1>" . $page->get('headline|title') . "</h1>";
	?>
	<div id="articlesContainer">
	  <h2>Articles & More</h2>
	  <?php
	  $articlesItems = $pages->find("template=articles");
	  foreach($articlesItems as $articlesItem) { ?>
	      <div class="articlePost">
	        <h3 id="<?php echo $articlesItem->id; ?>"><?php echo $articlesItem->title; ?></h3>
	        <?php echo $articlesItem->article_maintext; ?>
	      </div><!--articlePost ends-->
	    <?php 
	  }
	  ?>
	</div><!--articlesContainer ends-->
<div id="lowerContent">
	<div id="leftWidget">
	<?php include('./leftWidgetContent.inc'); ?>
	</div><!--leftWidget ends-->
	<div id="rightWidget">
		<h3>Articles & More</h3>
		<?php
		$teaserLinks = $pages->find("template=articles");
		foreach($teaserLinks as $teaserLink) { ?>
			<h3><?php echo $articlesItem->title; ?></h3>
			  <p><?php echo $articlesItem->article_introtext; ?></p>
		<?php  echo "<a href='" . $pages->get("/SREPversion2/posts/")->url . '#' . $teaserLink->id . "'>Continue Reading</a>";
		}

		?>
		</div><!--rightWidget ends-->
	</div><!--lowerContent ends-->
	</div><!--end content-->
<?php include('./_foot.php'); // include footer markup ?>

The teaser section with article title and teaser intro text appears on all the site pages (contained inside the rightWidget div). I am using a hidden container page called "Posts" to contain the actual articles. 

The articles page url is generated to show as: localhost:8888/SREPversion2/posts/articletitle

This page will then display all the article spots in full (with title and full main text).

But so far: clicking on any of the teaser links in the teaser section (on any site page) will take you to the top of the articles post page. IE: clicking the fourth teaser link will take you to the top of the main articles page instead of scrolling down to the fourth article post. 

I will mess around with this some more. I think this code is very close...

Max

Edit: I think what is not being generated is the vital # hashtag in the url? In looking this over I am wondering if using the same template name for the articles container page and the rightWidget teaser system div is not the thing to do? Should I split this into two templates with unique names? I checked the generated markup via the w3c valuator and it passed as solid HTML5. So the issue must be in the hashtag logic?

Edited October 26, 2014 by PhotoWebMax

[PhotoWebMax]

Looks like I am totally stalled on this quest. I have tried messing around with this but cannot get the effect I am looking for to work. The # fragment identifier does not work. The site and the post system works fine though...

[kongondo]

Max,

You need a 'name' attribute on the <a> where you are linking to that matches the href of where you are linking from (even and ID attribute will work as SiNNuT explained above). You just need to implement this the right way - i.e. match href to name/id, tag, etc).

Read 6 Things You Should Know About Fragment URLs...

and see example here on PW's Blog

From link: 

<a href="#add-page-screen-now-with-ajax-helper">Add page screen now with AJAX helper</a>

To link: (notice the 'name' attribute; it matches the href of the 'from link')

<a name="add-page-screen-now-with-ajax-helper" href="#"></a><h3>Add page screen now with AJAX helper</h3>

Edited October 28, 2014 by kongondo

[PhotoWebMax]

Still not getting how to adjust my template to make this work. But I had a severe headache (not Proceswire related) today so I will come back to this. My brain feels like dropped on the floor chocolate pudding...

Thanks.

Max

[PhotoWebMax]

Ok Kongondo,

I tried several times to add the name attribute to my articles template but all I got for my efforts is big angry red php error messages. 

I notice that the # hashtag is absent from all the article page fragment urls that get generated from my page URL (all of my efforts).

So, something is just missing from my template logic. I think it is in the final echo link to the teaserLink IDs. See my template above.  I then tried manually adding the # hashtag before the article name in the generated URL in the browser as a test but that only generates the page not found message. 

I am simply dying with the time it is taking to finish this effect on the articles page. I can see how the effect works on the page fragment links I have found on the web, but I am just lost how to make this happen dynamically with ProcessWire: my articles template.

At this stage of my frustration I am totally willing to pay someone who can show me how to do this (with a good explantation so I can learn). I am not sure how much this is worth though? $75 sent via Paypal?

Please PM me if interested...

Thanks,

Max

[adrian]

Hey Max,

Try this in your template for the articles parent page:

foreach($page->children as $article){
    echo "<a name='".$article->name."'><h2>".$article->title."</h2>
        <p>".$article->body."</p>";
}

That will create the posts one after the other with the title and body and with an <a name> tag that is the fragment identifier.

The to link directly to a specific article it would simply be:

www.mysite.com/posts/#post-name

To create these links in your teaser section you might do something like this:

$articles = $pages->get("/articles/")->children("limit=4");
echo "<ul>";
foreach($articles as $article) {
    echo "<li><a href='/articles/#".$article->name."'>".$article->title."</a></li>";
}
echo "</ul>";

That should work just fine!

[PhotoWebMax]

Thanks Adrian,

This is quite different from what I had before...

I added this to my templates (basic-page.php and articles.php). The teaser section on all site pages shows the links to the articles posts. When you click on any of the post  links you get the correct looking url like so: localhost:8888/posts/#the-tripod 

Having the #the-tripod at the end of the URL is a step forward as I could not get that to appear before. The site name is missing though: it should read: localhost:8888/sitename/posts/#the-tripod 

Also, clicking any of the teaser links shows the generic missing page message instead of the content, so I am a couple of steps backwards now. I am still using the $articlesItems = $pages->find("template=articles") statement before the new foreach loop. 

Before I post my code I will try to see if I can unstuck myself first.

I am so envious of how you guys write these code sections like you were creating a simple grocery list for an egg omelet...  

[adrian]

Sounds like you are really close - I was lazy with the 

<a href='/articles/

That will go back to the root of your site. You can just change that to:

<a href='/sitename/posts/

[PhotoWebMax]

I think I have the teaser section on the basic-page template working:

...

</div><!--leftWidget ends-->
		<div id="rightWidget">
			<h3>Articles & More</h3>
			<?php
			$articles = $pages->get("/posts/")->children("limit=4");
			echo '<ul class="articlesTease">';
			foreach($articles as $article) {
			    echo "<li><a href='/posts/#".$article->name."'>".$article->title."</a>
			               <p>$article->article_introtext;</p></li>";
			}
			echo "</ul>";
			
			?>
			
					
			</div><!--rightWidget ends-->
		</div><!--lowerContent ends-->

This produces the <ul> of the article titles (with <a> anchor) and the intro paragraphs for each article post. The articles are in a hidden parent folder called Posts. So far so good.

The articles.php template is a mess though so far all I get is missing page error. More study...

[PhotoWebMax]

OK, I am really confused...

With the above code in my basic-page template I get a total generic "page not found" message when clicking any of the teaser links? Like no page layout or content.

If I add the sitename before the /posts in the first $pages->get statement the teaser section with the links goes blank? If I remove the sitename from that and add it to the <li> echo statement the teaser links reappear. I still get the "page not found message but the rest of the site content and layout is there.

So my basic-page template looks like this:

<?php include('./_head.php'); // include header markup ?>
<div id='content'>
	<?php 
	// output 'headline' if available, otherwise 'title'
	echo "<h1>" . $page->get('headline|title') . "</h1>";
	// output bodycopy
	echo $page->body; 
	?>
	<div id="lowerContent">
		<div id="leftWidget">
		<?php include('./leftWidgetContent.inc'); ?>
		</div><!--leftWidget ends-->
		<div id="rightWidget">
			<h3>Articles & More</h3>
			<?php
			$articles = $pages->get("/posts/")->children("limit=4");
			echo '<ul class="articlesTease">';
			foreach($articles as $article) {
			    echo "<li><a href='/SREPversion2/posts/#".$article->name."'>".$article->title."</a>
			               <p>$article->article_introtext;</p></li>";
			}
			echo "</ul>";
			
			?>
			
					
			</div><!--rightWidget ends-->
		</div><!--lowerContent ends-->
</div><!-- end content -->
<?php include('./_foot.php'); // include footer markup ?>

The above generates the articles teaser section inside the rightWidget.

My articles.php template looks like this:

<?php include('./_head.php'); // include header markup ?>
<div id='content'>
<?php 
// output 'headline' if available, otherwise 'title'
	echo "<h1>" . $page->get('headline|title') . "</h1>";

	// output bodycopy
	echo $page->body;
	
	$articles = $pages->get("/posts/")->children("limit=4");
	foreach($page->children as $article){
	    echo "<a name='".$article->name."'><h2>".$article->title."</h2>
	        <p>".$article->body."</p>";
	}
	?>

<div id="lowerContent">
	<div id="leftWidget">
	<?php include('./leftWidgetContent.inc'); ?>
	</div><!--leftWidget ends-->
	<div id="rightWidget">
		<h3>Articles & More</h3>
		
		<?php
		$articles = $pages->get("/posts/")->children("limit=4");
		echo '<ul class="articlesTease">';
		foreach($articles as $article) {
		    echo "<li><a href='/posts/#".$article->name."'>".$article->title."</a>
		               <p>$article->article_introtext;</p></li>";
		}
		echo "</ul>";
		
		?>  
		
		</div><!--rightWidget ends-->
	</div><!--lowerContent ends-->
	</div><!--end content-->
<?php include('./_foot.php'); // include footer markup ?>

The core part of this template is the foreach loop below the body echo.

I am not sure if I am close or a 100 miles away? Even if I try to adjust the generated URL manually in the browser window I still get the page not found message.

I am not sure if all this is even worth it for this window scroll effect. But maybe my "trail of tears" might help some other new kid someday...

[kongondo]

I am getting confused myself! 

Is it possible for you to either point to a website that shows the 'effect' you want, or do a mockup of what you want or set up a demo install with your code over at lightning.pw?

[adrian]

If you right click on one of the teaser links, what is the address you get if you "Copy Link Address"?

Does this match what you expect?

Does the Posts page load find if you remove the #page-name identifier from the end of the url?

[PhotoWebMax]

Adrian,

If i right click and copy the address it looks perfect: localhost:8888/SREPversion2/posts/#the-tripod

Server is "localhost", site name is "SREPversion2", "posts" is the hidden parent folder containing the articles, and lastly "the-tripod" is one of the published articles. We need the # before the article name in the URL and it is there. 

I have no idea why I only get the page not found message though. If needed I can recreate the entire site at lightning.pw.

When I was following SiNNut's suggestions I got the whole page link system working expect for the fragment identifier hashtag. When you clicked on any of the articles links you were presented with the full list of articles, one after another, but the browser curser was at the top of the page and not positioned at article #4, etc...

[adrian]

Some random things to try:

Does this load the main page fine?

localhost:8888/SREPversion2/posts/

Does it make any difference if the page is not set to hidden?

Do you have urlsegments enabled for this template? If so, try with them off.

What about the url ending with a slash option - try changing that.

Otherwise, re-create on lightning and I'll take a look for you

[PhotoWebMax]

Adrian,

I tried all of those suggestions but no cheer.

I also got stumped with lightning: the admin login for my generated site fails with the username and password that was provided. 

So, for now I am beaten and bleeding. I have to go and get other stuff done but will come back to this later...

I really appreciate all of your efforts in this quest. 

[SiNNuT]

Weird. This stuff should really be easy. Unless there is something really strange in your setup it must be some bugs in the way the links and/or anchors are generated. Let us know if you succeed in setting something up on lightning.

[kongondo]

....I also got stumped with lightning: the admin login for my generated site fails with the username and password that was provided. 

Remember you need to login with your email address and your account password. You can subsequently create a different supersuser with a different password (if you wish) and log in 'normally'

[PhotoWebMax]

Did figure out the login procedure for Lightning. I thought you needed the username and password for the site that gets generated...

I have the Lightning site (just the section content we are trying to fix) up and running. Copied the files and CSS, etc. Some of my images and thumbs are not displaying. So let me get that sorted out first. I will report back later, maybe tomorrow. I am sort of fried and discouraged at the moment and need to do something else.

Going for a dog walk right now...

EDIT: a dog walk is always a great thing...

Edited October 29, 2014 by PhotoWebMax