Creating a separate source page for a list that changes.

[Beareater]

Good Day to All.

I have a website to display my artwork and poetry. In the poetry section there is the main page with links to other pages and also an anthology which lists my poems by title, the titles are linked to a page to view the poems in their entirety. When you click the link to any poem, that page also displays the anthology so that you can easily navigate to the next poem that interests you without having to return to the main poetry page.

The problem I find myself with is that when I want to add a new poem to the anthology I need to edit every page that contains that list. Not something I am interested in doing.

I created the website from scratch several years ago and am just a novice, nothing fancy. I have searched the internet for answers but have yet to find what I am looking for.

I would like to create the Anthology as a list of links on a separate page/file that can be referenced/sourced in each poetry page that would display the list. In this manner I only have to edit one page and those changes will reflect on all the associated pages.

This is the navigation portion of the code that reflects the links desired;

 

 <div id="nav">
      <ul>
                  <li><a href="../index.html">Home Page</a></li>
                  <li><a href="../aboutartist.html">About the Artist</a></li>
                  <li><a href="../all-art.html">Gallery</a></li>
      </ul>
          <h2>Anthology</h2>
      <ul>
                  <li><a href="achildcries.html">A Child Cries</a></li>
                  <li><a href="addedupon.html">Added Upon</a></li>
                  <li><a href="brokenflowers.html">Broken Flowers</a></li>
                  <li><a href="deadlovers.html">Dead Lovers</a></li>
                  <li><a href="dreamchaser.html">Dream Chaser</a></li>
                  <li><a href="ebb.html">Ebb</a></li>
                  <li><a href="eyes.html">Eyes</a></li>
                  <li><a href="inthedark.html">In The Dark Recesses of Our Soul</a></li>
                  <li><a href="luna.html">Luna</a></li>
                  <li><a href="myancientpictographs.html">My Ancient Pictographs</a></li>
                  <li><a href="raindrop.html">Rain Drop on the Back Porch Railing</a></li>
                  <li><a href="restlessthenight.html">Restless The Night</a></li>
                  <li><a href="summer.html">Summer</a></li>
                  <li><a href="tameroftheuniverse.html">Tamer of the Universe</a></li>
                  <li><a href="thankyouchild.html">Thank You Child</a></li>
                  <li><a href="theburning.html">The Burning</a></li>
                  <li><a href="unopenedbooks.html">Unopened Books</a></li>
                  <li><a href="whereangelstread.html">Where Angels Tread</a></li>
      </ul>
                </div>

Ideally, all the links below

<h2>Anthology</h2>

would be referenced/sourced from a different page/file.

 

My difficulty is two fold.

1. How to source the link. I have tried javascript (which i do not know);

<script src="../Poetry List/poetrylist.js"></script>

This was the closest thing I could find that might get me where I want.

 

2. how to create/format the source page that contains the information. currently it is saved as .js

 

Here is the poetry page of the website;http://sagebrushart.com/Poetry.html

 

Any and all help would be greatly appreciated.

[Ingolme]

Systems like these are done on the server with a language like PHP. Often a Content Management System is used, like Wordpress.

 

With plain PHP you can use the include statement to load the same code on multiple pages.

[euc]

Learn PHP or some other server side scripting. I don't know of a web host that doesn't support it.

 

All you would have to do is upload all your content one file at a time into a folder and get the PHP script to run through that folder to generate your list items for you.

 

If you are really interested, reply to this post and I'll write you a short bit of PHP code to accomplish this. All you should have to do is just throw it into the page you already have.

[Beareater]

Thanks Foxie for the lead with the include statement. I followed the link and it does look like PHP would do it, just will take me some time to work it, which is not a problem. I was just hoping there would be a simple HTML solution similar to when I source an image on my site;

 <img src="Thumb Art/Duck_Watercolor_thumb.jpg" class="featureimg"  />

It just seems that if I can source and image I should be able to source a list of text...

 

If i used PHP......

would the "source" look something like this and be found in the same directory?;

 

list.php
<?php

$list='HTML for my list';

?>

 

and my page would look something like this?;

//poetry page code//
          //html proceeding list//
<?php


include 'list.php';

echo "$list"; // HTML for my list

?>
     //HTML after list//

 

Thank for the help also Male Newbie [ (: ]

[euc]

PHP "include" does not address the problem of how to scan through a folder that changes. Because an include file inherits the context of the script that included it, it doesn't solve the problem of doing it anywhere either. The only thing an include file does not inherit is PHP mode. Even $_SERVER['PHP_SELF'] returns the value of the calling script.

 

The following code, delimited with the "=" signs but not to be included, will do the job of automatically updating the display page.

Any problem whatever like no such folder, nothing in it or permissions not set, is accounted for. If there is a normal file called WhateverFolder, it won't crash the script but it won't find anything.

 

Replace WhateverFolder with the name of the folder you create to hold your content.

 

This does not change the title displayed in the list. That will be displayed here as the HTML file name. It takes only a few extra lines of code to extract the title from the HTML document.

============================================================================
<?php
$NothingFound = true;
if ($DirHandle = @opendir ('/WhateverFolder/')) {
while ($Content = readdir($DirHandle)) {
if (!is_dir($Content)) {
echo '<li><a href="/WhateverFolder/',$Content,'"</a>',$Content,'</li>';
$NothingFound = false;
}
}
closedir ($DirHandle);
}
if ($NothingFound) echo '<li>Sorry - nothing available</li>';
?>
============================================================================

This accounts for directories but doesn't account for other files that are NOT HTML. If this is a problem, the 5th line can be replaced with this:-

 

if (!is_dir($Content) and strtoupper(substr($Content,-5)) == '.HTML') {

 

This does not change the title displayed in the list and uses only the original HTML filename. It takes only one or two lines of code to extract the title from the HTML document.

[Ingolme]

If you use PHP, just have the HTML in one file, you don't need any special code. The include() function will show the HTML on the page without anything else needed.

[euc]

Foxy Mod. That still does not answer the original issue. How can I simply upload another HTML file and include it in the unordered list.

 

What PHP code would you put in the include() file? All include does is to simply insert the lines in that file into the original file.

 

This guy is obviously a real beginner and wants a simple solution. Having PHP read a single file, whether it's in the include or not, and serve poems from that file is a lot more complicated than my solution above.

 

Of course you can't simply run it from a home computer, like you can HTML, unless you have a web server like Apache and PHP installed. If you insert my code into the original HTML where th list items are, it will work on such a server.

Edited March 31, 2016 by euc

[Ingolme]

His request was to put an HTML menu onto all the pages of his site, while only having to update the menu in one place and have the changes reflected everywhere else.

Your solution is overkill for the task at hand and does not give the person the opportunity to name the links differently than the files they link to.

 

Here's the list of links:

 

menu.html

 <div id="nav">
      <ul>
                  <li><a href="../index.html">Home Page</a></li>
                  <li><a href="../aboutartist.html">About the Artist</a></li>
                  <li><a href="../all-art.html">Gallery</a></li>
      </ul>
          <h2>Anthology</h2>
      <ul>
                  <li><a href="achildcries.html">A Child Cries</a></li>
                  <li><a href="addedupon.html">Added Upon</a></li>
                  <li><a href="brokenflowers.html">Broken Flowers</a></li>
                  <li><a href="deadlovers.html">Dead Lovers</a></li>
                  <li><a href="dreamchaser.html">Dream Chaser</a></li>
                  <li><a href="ebb.html">Ebb</a></li>
                  <li><a href="eyes.html">Eyes</a></li>
                  <li><a href="inthedark.html">In The Dark Recesses of Our Soul</a></li>
                  <li><a href="luna.html">Luna</a></li>
                  <li><a href="myancientpictographs.html">My Ancient Pictographs</a></li>
                  <li><a href="raindrop.html">Rain Drop on the Back Porch Railing</a></li>
                  <li><a href="restlessthenight.html">Restless The Night</a></li>
                  <li><a href="summer.html">Summer</a></li>
                  <li><a href="tameroftheuniverse.html">Tamer of the Universe</a></li>
                  <li><a href="thankyouchild.html">Thank You Child</a></li>
                  <li><a href="theburning.html">The Burning</a></li>
                  <li><a href="unopenedbooks.html">Unopened Books</a></li>
                  <li><a href="whereangelstread.html">Where Angels Tread</a></li>
      </ul>
</div>

Here's all the code you need to put this list of links onto any page:

<?php include 'menu.html'; ?>

The pages of the site will need to be converted to PHP, and the links should be made relative to the site root (such as /index.php or /poems/unopenedbooks.php )

[euc]

I did consider the names of the links when I said

 

"This does not change the title displayed in the list and uses only the original HTML filename. It takes only one or two lines of code to extract the title from the HTML document."

 

I just didn't bother. I don't think he is interested anyway because of his comment

 

"I was just hoping there would be a simple HTML solution"

 

To do what you say certainly works but he also has to modify the file "menu.html" every time he uploads a new file. He might as well just edit the unordered list in the first place.

 

Your solution is back to square 1.

 

Actually, while we are on the topic of doing it anywhere, I think it would be really nice if the HTML <LINK> tag could do more than just download style sheets directly into the browser. This still would not have answered Beareaters original question but I would use it a lot.

Edited April 1, 2016 by euc

[Ingolme]

Not really. It's not the same having to edit the menu in one file as in 20 of them.

[Beareater]

ok..I found a solution on this schools website http://www.w3schools.com/howto/howto_html_include.asp

<!DOCTYPE html>
<html>
<body>

<div w3-include-html="content.html"></div> 

<script src="w3-include-HTML.js"></script>

</body>
</html>

The only problem is...i can copy this exact code (above) and save it in an .html file on my pc (to test it) and it does not work.

It works great on the website test panel and is exactly what I need to be able to insert a list that I dont need to edit on every page.

 

I even save this (below) in a seperate content.html file in the same directory.

<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>

If I edit the test on my pc with a couple of <h1></h1>'s they show up but not the list??

<!DOCTYPE html>
<html>
<body>
<h1>help</h1>
<div w3-include-html="content.html"></div> 
 
<script src="w3-include-HTML.js"></script>
<h1>help</h1>
</body>
</html>

Edited April 1, 2016 by Beareater

[Beareater]

 

<script src="w3-include-HTML.js"></script>

 

It must have something to do with this line... i have no "w3-include-HTML.js" file

[Beareater]

ok, ok. I found where it says to download the "w3-include-HTML.js"

I just dont know where to put it...

i tried putting it in <head></head> on the main page (the one calling for the list) and I also tried saving it as its own file saved under the name above in the same directory.

no luck..

Edited April 1, 2016 by Beareater

[dsonesuk]

If he used a filename that reflect the tile with each word separated by a hyphen, you could in theory, look in folder, retrieve all filenames of pages in that folder strip out the hyphens and file extensions and use what is left, then format it to produce required title.

 

Using JavaScript to do this is not SEO friendly.

 

By hyphenating you make it more SEO friendly as search engines can read each hyphen separated word (relationship with content it links to), instead of one joined up filename as you have.

 

NOTE: don't use underscore for word separation of filename, it less readable than hyphen is.

 

The first thing to do, is establish if PHP is available on your server? create php page it does not need any html and use <?php echo "Hello poetic World!"; ?> if it shows "Hello poetic World" without quotes you have PHP, else if it shows <?php echo "Hello poetic World!"; ?> it is more likely just html.

Edited April 1, 2016 by dsonesuk

[euc]

_{Javascript is a client side scripting language and will not solve your problem because it hasn't got access to the file system on your server.}

 

_{A client side script (like Javascript) is one that runs on the computer that receives and displays the page. A server side script (like those mentioned below) is run on the computer that sends the page.}

 

_{You are stuck with a server side script like Python, Perl, ASP, PHP or dialects like Hack, or something. There is no easy one line fix for your specific problem which, as I understand it, is how to automatically update a menu page, iframe or similar by simply uploading another HTML file.}

 

_{In my post above I gave you the shortest method I could think of that does PRECISELY that. Maybe someone else can do better.}

 

On the other hand, if your problem is just updating several pages, and you don't mind updating the menu file, use an <IFRAME>. You can do that entirely in HTML.

Edited April 1, 2016 by euc

[dsonesuk]

This code will mean all files will have to be php, to use include. What this does is search for all poetry files (php) with hyphenated names (as mentioned before) in directory,

It will then strip hyphens, extensions, convert to proper case, it will search smaller words such as small example only ' A ', ' Or ', ' And ' (note spaces either side) and change back to lowercase, it creates li elements with anchor link elements and inserts, href (including path), title, anchor text from converted filename.

<!--static html-->
<ul>
    <li><a href="index.html">Home Page</a></li>
    <li><a href="aboutartist.html">About the Artist</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="all-art.html">Gallery</a></li>
</ul>
<h2>Anthology</h2>
<ul>
    <?php
    //dynamic using php
    $allowed_filetypes = array('php');
    $small_words = array(' A ', ' Or ', ' And ');

    $FileDirectory = "../../../php_test/list-files/Poetry/";
    $fullPathFilename_Array = scandir($FileDirectory);
    $dirArray = [];

    foreach ($fullPathFilename_Array as $FileName) {
        $convert = "";
        $file_extension = strtolower(pathinfo($FileName, PATHINFO_EXTENSION));  //retrieve extension only

        if (in_array($file_extension, $allowed_filetypes)) {
            $convert = str_replace("-", " ", $FileName);
            $convert = ucwords(str_replace("." . $file_extension, "", $convert));
            foreach ($small_words as $reset_smallword) {
                $convert = str_replace($reset_smallword, strtolower($reset_smallword), $convert);
            }
            echo '<li><a href="' . $FileDirectory . $FileName . '" title="' . $convert . '">' . $convert . '</a>' . "\n";
        }
    }
    ?>
</ul>