Stuck with Content Representations/How to open a subdomain and load snippets

Kirby 3 Solved ✅
1

Hello community – I’m building a website that has a container inside, and is filled with contents via click. The content comes from a jquery .load(url) call.
With this function I call a template, which is missing header and footer snippet, called project.
I don’t want to load header and footer, because it is already in my home.php, the site with the container.

The URL has to change as well. I do this with window.history.pushState(id, id, url); so if some one is sharing the page with the content, the entire site will be displayed, and the content will be loaded inside the div. There is also a close button, that deletes the url uid and deletes the contents.

Now my problem is, that if I open the website with a subdomain, the header and footer will not be loaded, because it is missing in the project.php template. I did this before with an AJAX call, where I could detect it and load header and footer with the project template.

Now I was looking for solutions and came across Content Representations, but I don’t really get it.
My approach would be to have an projects.json.php file, where I store all project information. But I’m not getting smarter. I only want to load header and footer when a subdomain gets shared and opened. I detect the subdomain via

  window.onload = function () {
    console.log('new');
    var url = window.location.href;
        url = url.split("/");
    if (url[4] == 'projects'){
      console.log('in projects');
    }
  }

And the most primitive way is to redirect to the homepage, look for the uri that is stored in the url, and make an artificial click. But there must be another way.

2

I guess you mean a subfolder, not a subdomain?

3

Yes, i.e. website.de/xxx

4

You can load the normal template (=standard URL projects) with header and footer for the subfolder page, and the the JSON representation (projects.json) without header and footer when you load the content into the home page.

5

Instead of .load(), I’ll use fetch('projects.json')
How do I get the content of the correct subfolder?

  .then(function(articles) {
    console.log(JSON.stringify(articles));
  });

returns just an array with all subfolders titles.

Well, I slowly get behind the idea.

In other words: fetch(‘projects.json/specificID’)
I don’t want to fetch each subfolders content.

6

Depends on what your content representation returns, that’s up to you to make it return the data you need. If you want to filter data, you can do that.

7

True, but my question is if I can take the clicked element (in projects) and look for its subfolders (project) content. I’m not sure how to filter it, do I take the uri from the clicked element and put it in the fetch function? I think this is missing in the cookbook generating-json

fetch('projects.json/ ')
.then(function(response) {
  return response.json();
})
.then(function(projects) {
  console.log(projects);
});

is my JS code that is outputting everything in an array.

8

If you click a link, you have a href attribute, or if you are using a button, you can use a data attribute with the project ID or URL. In your JS, you fetch this attribute value and take it from there.

9

Thanks.
If someone is wondering how I did filter:

  $('.item').on('click', function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    fetch('projects.json')
    .then(function(response) {
      return response.json();
    })
    .then(function(projects) {
      const getProject = projects.find(project => project.url === url);
    });
  });
10

One thing that kept me awake this night:
I could also just use the .load() function with the specific URL and look for the content in the project and ignore header and footer snippets. Therefore a JSON is not required, or does it?

11

You could. I guess you mean hide the header and footer based on Url, right?

12

Hey it’s me again; I’ve been building a .json, but I don’t know how to output a gallery field. This is what I’ve tried:

project.json.php

<?php

$images = $page->gallery()->toFiles();
$image = foreach($images as $image): $image->resize('1000')->url()

$data = [
  'title' => $page->title()->value(),
  'images'=> $images,
  'image' => $image
];

echo json_encode($data);

It throws this error: 43

How can I put all the images one after the other in a array, or something.

14

I’ve solved it like this:

<?php

$images = $page->gallery()->toFiles();
$json = [];

foreach($images as $image){
  $json[] = [
    'url'   => (string)$image->resize(1200)->url(),
  ];
}

$data = [
  'title' => $page->title()->value(),
  'image'=> $json
];

echo json_encode($data);