Jump to content

(SOLVED) Template approach


joe72joe
 Share

Recommended Posts

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

shot.jpg

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...

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:

html_shot1.jpg.2bcf9c7cdaf97fe0c9648962ee6f7c4e.jpg

html_shot2.jpg.bd1375049d931a32cf1c53c5a6a46bf6.jpg

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:

processwire_repeater.jpg.38ccb3267a7424758eb30259018277c1.jpg

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:

pw_repeater.jpg.1ef920eb09f358109cef1a8248a60bb5.jpg

 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 by kongondo
Please wrap your code in code blocks. See the <> icon.
Link to comment
Share on other sites

@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.

  • Thanks 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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 '<'

 

Link to comment
Share on other sites

@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

 

  • Like 1
Link to comment
Share on other sites

  • joe72joe changed the title to (SOLVED) Template approach

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...