(SOLVED) Template approach

[joe72joe]

Hello to the community,
I am currently trying to implement an HTML template.

Unfortunately, I do not know exactly which approach is right for the attached image.
In the picture I have drawn up how my template is built.
It consists of a home.php File. The header and the footer File is included in home.php. So far it works. My problem now is how I bind the tumbnails into the home.php now in a reasonable way.

I would like to be able to control this block from the backend with fields. Should I directly put  the source code (see attached image) in the home.php? Is it perhaps useful to put the thumbnails code into a separate .php file and include the file to home.php?

Thanks in advance

[blynx]

Where is the data from of which this list is made of?
Basically „yes“ - put it into home.php if this is the home page.

Maybe, depending on what the data is, you may want to check out the possibilities of the /fields/ folder and $page->render('field')
(Check out this processwire blog post about that functionality)

E.g.:

In case these items are children of some page. Maybe like so:
(assuming )

// assumed site structure

-home [template: home]
    -portfolio [template: portfolio]
        -nice [template: project]
        -cool [template: project]
        -awesome [template: project]
        -...

// templates/home.php

<?php
include('_top.php');
echo $pages->get('/portfolio/')->render('children');
include('_bottom.php');
?>

// templates/fields/children.portfolio.php

<div class="portfolio">
  <?php foreach($value as $item): ?>
    <div class="portfolio__item">
      <h2><?= $item->title ?></h2>
      <img src="<?= $item->someImage->url ?>">
    </div>
  <?php endforeach ?>
</div>

But there are many ways to do anything. See this as some inspiration.

cheers
Steffen

[joe72joe]

Hello Steffen, thanks for the answer.
I do not really want to have so many templates to achieve the goal, but keep the whole thing relatively light.
My thought was that I basically have the home template, then by using the Tree -> Home -> "Edit" I always have a possibility to include a new block (Thumb) ...
I have to confess that I'm not a PHP expert ...
I just read by coincidence about content blocks - perhaps this could be an approach ... ?
I will dig through the content Thank you first

[blynx]

This sounds like you are looking for something like Repeater fields?

There is the standard Repeater field included in the core - you have to install it under modules > core > Repeater. Check out Repeaters here: https://processwire.com/api/fieldtypes/repeaters/

And there is also RepeaterMatrix, but this is a pro module and costs some few $$. Don't know if you actually need it here ...

But regarding where you put the code ... it doesn't really matter as long as you get along with it and it works for you. Processwire lets you do your own thing there. You will find out later if you could/should improve something.

[joe72joe]

Hi, first of all, I wish the whole community a good start into the new year.
After some time, I have some time again to take care of my implementation problem. I try to achieve that:

That is the html-code:   

<!-- Portfolio Thumbs-->
    <section id="portfolio" class="no-pad-btm">
      <div class="container text-center">
        <div class="row">
          <div class="col-sm-10 col-sm-offset-1">
            <h3>Aktuelle Arbeiten</h3>
            <ul class="portfolio-sorting list-inline text-center">
              <li><a href="#" data-group="all" class="active">Übersicht</a></li>
              <li><a href="#" data-group="design">Design</a></li>
              <li><a href="#" data-group="web/ux">Web/UX</a></li>
              <li><a href="#" data-group="kataloge">Kataloge</a></li>
              <li><a href="#" data-group="editorial">Editorial</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="container-fluid">
        <div id="grid" class="row portfolio-items">
          <div data-groups="["design", "web/ux"]" class="col-md-3 col-sm-6 no-pad">
            <div class="portfolio-item"><a href="#"><img src="site/templates/port_1.jpg" alt="">
                <div class="portfolio-overlay">
                  <div class="caption">
                    <h5>Titel 1</h5><span>Here my small description</span>
                  </div>
                </div></a></div>
          </div>
          <div data-groups="["kataloge", "design"]" class="col-md-3 col-sm-6 no-pad">
            <div class="portfolio-item"><a href="#"><img src="site/templates/port_2.jpg" alt="">
                <div class="portfolio-overlay">
                  <div class="caption">
                    <h5>Titel</h5><span>description</span>
                  </div>
                </div></a></div>
          </div>

 
<!-- Thumbs End  -->
        </div>
      </div>
    </section>

 

In Processwire I have adapted the code, unfortunately, the images and the rest are displayed one below the other and not separated:

That is the adapted code:   

 <!-- Portfolio Thumbs-->
    <section id="portfolio" class="no-pad-btm">
      <div class="container text-center">
        <div class="row">
          <div class="col-sm-10 col-sm-offset-1">
            <h3>Aktuelle Arbeiten</h3>
            <ul class="portfolio-sorting list-inline text-center">
              <li><a href="#" data-group="all" class="active">Übersicht</a></li>
              <li><a href="#" data-group="design">Design</a></li>
              <li><a href="#" data-group="web/ux">Web/UX</a></li>
              <li><a href="#" data-group="kataloge">Kataloge</a></li>
              <li><a href="#" data-group="editorial">Editorial</a></li>
            </ul>
          </div>
        </div>
      </div>


<div class="container-fluid">
  <div id="grid" class="row portfolio-items">

<div data-groups="<?php foreach($page->portfoliothumbs as $port) {
        echo "{$port->lb_home_port_datagroup}"; }
      ?>"
  class="col-md-3 col-sm-6 no-pad">

<div class="portfolio-item">
    <?php
      foreach($page->portfoliothumbs as $port) {
      echo "<a href={$port->lb_home_port_img_thumb_url->url}><img src={$port->lb_home_port_img_thumb->url} alt={$port->lb_home_port_img_thumb->description} >";
    }
    ?>
<div class="portfolio-overlay">
  <div class="caption">
    <h5>
      <?php foreach($page->portfoliothumbs as $port) {
      echo "{$port->lb_home_port_titel}"; }
      ?>
    </h5>

<span>
  <?php foreach($page->portfoliothumbs as $port) {
    echo "{$port->lb_home_port_description}"; }
  ?>
</span>

</div>
</div></a>
</div>
</div>

<!-- Thumbs End  -->        
</div>
</div>
</section>

Processwire fields:

 I suspect the "foreach loop" needs to start at the top. I tried that but get constantly error messages in the syntax ... Can someone of the PHP professionals give me a tip how the code has to look, so that the div blocks place next to each other

Thx in regard

Edited January 3, 2018 by kongondo
Please wrap your code in code blocks. See the <> icon.

[dragan]

is the site public to view somewhere? This looks to me like a CSS or HTML issue, rather than PHP or PW-related. Did you run it through W3C validator to see if the tags are all nested correctly?

[flydev]

@joe72joe

Are you sure that this loop won't insert another double quotes inside the double quote of the data attribute ?

         <div data-groups="<?php foreach($page->portfoliothumbs as $port) {
                echo "{$port->lb_home_port_datagroup}"; }
            ?>"

 

Will be more easy if there is something live to check ya.

[dragan]

fwiw, with just two CSS declarations and taking your raw code, manually adding 4 items, it looks something like this:

did you forget your floats?

 

[joe72joe]

Hello, thank you for the quick feedback.

Processwire is installed locally.

When I put in the html-code in home.ph, everything looks good. As soon as I replace the tags, it works, too, but the pictures, titles etc. are placed one after the other at the respective position. That's why I think I would have to put the loop on top of the div data-group .. is just a guess ... but if I'm honest, I have no idea at the moment ... my php knowledge is very limited ...  I do not see the forest for the trees :-(( respectively i can't find the error in the syntax

 

[joe72joe]

now i tried to put another loop at the top, but then i get an server error ... somehow I do not look through there. Is my syntax wrong?

<!-- Portfolio-->
    <section id="portfolio" class="no-pad-btm">
      <div class="container text-center">
        <div class="row">
          <div class="col-sm-10 col-sm-offset-1">
            <h3>Aktuelle Arbeiten</h3>
            <ul class="portfolio-sorting list-inline text-center">
              <li><a href="#" data-group="all" class="active">Übersicht</a></li>
              <li><a href="#" data-group="design">Design</a></li>
              <li><a href="#" data-group="web/ux">Web/UX</a></li>
              <li><a href="#" data-group="kataloge">Kataloge</a></li>
              <li><a href="#" data-group="editorial">Editorial</a></li>
            </ul>
          </div>
        </div>
      </div>

<?php foreach($page->portfoliothumbs as $portSet) {
  <div class="container-fluid">
    <div id="grid" class="row portfolio-items">

      <?php foreach($page->portSet as $port) {
        <div data-groups= echo "{$port->lb_home_port_datagroup}";
        class="col-md-3 col-sm-6 no-pad">
          <div class="portfolio-item">
            echo "<a href={$port->lb_home_port_img_thumb_url->url}><img src={$port->lb_home_port_img_thumb->url} alt={$port->lb_home_port_img_thumb->description} >";
            <div class="portfolio-overlay">
              <div class="caption">
                <h5> echo "{$port->lb_home_port_titel}"; </h5>
                  <span> echo "{$port->lb_home_port_description}"; </span>
              </div>
            </div></a>
      }   ?>
    </div>
  </div>
<!-- Thumbs End  -->        
</div>
</div>
}   ?>
</section>

 

[kongondo]

@joe72joe,

moderator note:

I had to edit your previous post to wrap your code in code blocks. In your last post, you are still not wrapping code in code blocks. Could you please wrap code in code blocks. Use the <> icon. Thanks.

[joe72joe]

sorry, i did it now. Thx

[joe72joe]

just noticed that my created repeater is a template, which is called in -> Templates "repeater_portfoliothumbs". If I change the foreach loop now in:

<?php foreach($page->repeater_portfoliothumbs as $portfoliothumbs) {
  <div class="container-fluid">
    <div id="grid" class="row portfolio-items">
      <?php foreach($portfoliothumbs->port) {

I get this message:

Parse Error: syntax error, unexpected '<'

 

[adrian]

You are mixing PHP and HTML incorrectly. Close PHP with ?> at the end of the first line - that way it won't throw the error on the opening <div on the second line.

[joe72joe]

@adrian you are right. Now it works. I have cluttered up some of the syntax between html and php. In any case, the foreach loop had to go up, as I had suspected.
I'm really excited about Processwire. After using Contao for a few years I am overwhelmed by the flexibility of this system. I will continuing with studying ...

Many thanks for your help, guys