Pinegrow Community Support Forum

Load different content through PHP? (refresh content without refreshing page)

Hi all,

I have a relatively simple question, I think.

I have created a portfolio page with menu buttons like about, portfolio, skills, ect. When one of those are clicked you go to either index.html, about.html - The whole page is reloaded. No problems here.

On the portfolio.html however I want to be able to load different content in the body depending on what year you click (different work for 2019, 2018, 2017) without it reloading the whole page. Check the Adobe XD images below for what I mean:


(don’t look at the logo for now (it is code generated and should therefore change somewhat similar to the this simpeler problem so I’ll solve that after understanding the dynamic div content.))

I did some coding before and I know this is relatively easily possible with PHP. However I’m not the best coder and new to PineGrow. Is PHP really the best way to create what I want, or is there another method? (like if then statement?) Can someone please help me with this issue?

The code below as it is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Brigitte's Portfolio</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div id="navbar">
        <div id="links1">
            <a href="about.html">About</a>
            <a id="active" href="portfolio-2019.html">Portfolio</a>
        </div>             
        <div id="navbar_logo">
            <a href="index.html"> <img class="w-100 img-thumbnail" img src="logo-0033.png" alt=""> </a>
        </div>
        <div id="links2">
            <a href="inspiration.html">Inspiration</a>
            <a href="skills.html">Skills</a>
        </div>
    </div>         
    <div id="container-about" style="display:grid;grid-template-columns:1fr 150px 150px 150px 150px 150px 1fr;grid-template-rows:100px auto auto;grid-template-areas:'. title title title title title .' '. . . date date date .' '. image image image image image .';grid-gap:20px;">
        <div id="content-about" style="grid-area:title;">
            <ah1 class="title1">PORTFOLIO</ah1>
        </div>
        <div id="content-date" style="grid-area:date;">
            <h5 class="date-button" style="grid-area:date;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-template-rows:auto;">
            <a href="portfolio-2019.html">2019</a>
            <a href="portfolio-2018.html">2018</a>
            <a href="portfolio-2017.html">2017</a>
            <a href="portfolio-2016.html">2016</a>
            <a href="portfolio-2015.html">&lt;2015</a></h5>
        </div>

 </div>
        <div id="content-portfolio-2019" class="portfolio-images">
            <img src="http://pinegrow.com/placeholders/img18.jpg">
        </div>
   </div>
   </div>
        <div id="content-portfolio-2018" class="portfolio-images">
            <img src="http://pinegrow.com/placeholders/img18.jpg">
            <img src="http://pinegrow.com/placeholders/img18.jpg">
           <img src="http://pinegrow.com/placeholders/img18.jpg">
        </div>
   </div>

    <footer class="footer">
        <p class="footer-text">©2019 Copyright <span class="footer-text2">Kock.Design</span></p>
    </footer>
    <script src="assets/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/popper.js"></script>
</body>
</html>

So, as you can see in the code the images for 2019 and 2018 are just displayed below each other.
Is there a way to code if href=“portfolio-2019.html” is active then display div id=“content-portfolio-2019”, if href=“portfolio-2018.html” is active then display div id=“content-portfolio-2018” ? without needing to make all these pages separately?

The solution I came up with would look somewhat like this:

<div id=“content-date”>
<a href=“portfolio.php/2019”>2019</a>
<a href=“portfolio.php/2018”>2018</a>
<a href=“portfolio.php/2017”>2017</a>
<a href=“portfolio.php/2016”>2016</a>
<a href=“portfolio.php/2015”>&It;2015</a>
<div id=“content”>
<?php
	if($_GET[‘content’])
		{
			$content= $_GET[‘content’];
			$display= $content;
			include($display);
		}
	else{
		echo ‘Pick one of the years to view my work of that year.’
	}

I would really appreciate the help!! I can’t manage to figure it out on my own, especially since PineGrow doesn’t accept the normal way to code with PHP, making looking it up on internet so much more difficult.

Kind regards,
Brig

Hi Brig,

Forget Pinegrow and PHP! It will work (except for includes), but better use a text editor next to it.

I’m involved in a project named Ajaxify and this jQuery script let’s you load content in content. Loading content in the body is not a good idea and a deprecated way of poor Ajax implementation.

The best way is the Ajaxify way and keep for example the navigation, footer and only change the content to taste. Advantage is that Google likes it and can index any image or small content part as a whole page.

Website:
Ajaxify website

A example of what I made with it:

Ajaxify implementation in Bootstrap 4

Github

If you have further questions just ask!

Regards,

David