Anchors for pagebreak?

Post Reply
dontodd
Ssr. Bludit
Posts: 15
Joined: Tue Dec 19, 2017 1:17 am

Fri Apr 17, 2020 4:30 pm

Hello,

I don't think Bludit can do this now, but I'm wondering how hard it would be to add an anchor in the page when creating a pagebreak. For example, the text on the front page might look like this:

Code: Select all

<p>Paragraph 1</p>
<!-- pagebreak -->
which would render:

Paragraph 1

Read more

Then, on the full page, you'd get:

Code: Select all

<p>Paragraph 1</p>
<a name="continue"></a>
<p> Paragraph 2</p>
It may not be so bad for a very short intro before the pagebreak, but with two paragraphs, it really interrupts the flow.

I looked at the theme files (using Moran), but I don't see how I can add the anchor to the actual page content.
User avatar
Jay
Master Bludit
Posts: 106
Joined: Mon Feb 11, 2019 8:41 pm

Fri Apr 17, 2020 6:34 pm

I've read your post three times, and I still can't imagine what are you trying to achieve.

One thing that might come in handy for you is the source code of SamBrishes' pagination plugin.
dontodd
Ssr. Bludit
Posts: 15
Joined: Tue Dec 19, 2017 1:17 am

Fri Apr 17, 2020 6:49 pm

Sorry I wasn't clear.

If you use a pagebreak in a post, on the index/home page, it prints a Read More link, which opens the post page.

If you put the pagebreak after a couple of paragraphs, when the user clicks the Read More link, they start at the top of the post page and may have to scroll down to locate where they left off reading on the index/home page.

Adding an anchor on the post page where the pagebreak was inserted (like

Code: Select all

<a name="continue"></a>
, you could then add the anchor tag to the link on the index/home page, e.g. https://website.com/page-name#continue, which would load the post page and send the reader directly to the #continue anchor on the page.

As another example, compare https://en.wikipedia.org/wiki/Brazil vs https://en.wikipedia.org/wiki/Brazil#Music - the second one will send you directly to the section called Music while the first one just send you to the page.
User avatar
Jay
Master Bludit
Posts: 106
Joined: Mon Feb 11, 2019 8:41 pm

Sat Apr 18, 2020 12:40 am

K, now everything is clear to me. I just didn't understand if you requested a feature, ask for a solution explaining it with some kind of a pseudo code, and I thought you ask for something way different that you had on your mind.


What you ask for can be quite easily achieved in at least two ways, with or without using javascript. All depends on theme you use.

The most important thing is the pagebreak string you need to change.
Edit /kernel/boot/variables php and find the variable responsible for pagebreak
define('PAGE_BREAK', '<!-- pagebreak -->');

To ease up things I'd try with '<a id="pagebreak"><!-- pagebreak --></a>' as 'name' attribute in anchors is obsolete, and would make life harder.
Don't forget to edit and resave already created articles. Pagebreak code won't change magically inside existing articles.

Then you have two choices to let the visitor continue reading the full article with new pagebreak code.

1. Find the loop code in your theme responsible for listing the articles intros. Edit its "read more" url code and add a #pagebreak string at the end of url.
This will position window view automatically on page load at the place where new pagebreak code lies.
You can try to visit an example page on your blog by pasting url to it and addint #pagebreak at the end of url.


2. add a proper javascript code that will scroll page to the place where pagebreak is placed. As I had a bit of time, I prepared ready to use snippet. Try to paste it at the bottom of your theme before </body></html> elements and if possible above other scripts if such exist.

Code: Select all

		<script>
			window.onload = function(){
				var element = document.querySelector('#pagebreak');
				element.scrollIntoView({ behavior: 'smooth' });
			};
		</script>
dontodd
Ssr. Bludit
Posts: 15
Joined: Tue Dec 19, 2017 1:17 am

Sat Apr 18, 2020 3:57 pm

This is awesome, thank you so much!

I like the way the javascript scroll works, but I ended up going with adding #pagebreak to the link in case someone comes to the page from elsewhere--the page would automatically scroll to the #pagebreak.

Thanks again, I really appreciate it!
Post Reply