Jump to content

Loop through children with images and text


kuba2
 Share

Recommended Posts

Hello

Real Beginner here. I am trying to loop the children of a product ( Keramik ) I have. They should look as an image with text underneath ( Example with bicycle tires ). I create for each product an own child page .

I can't get my head around this...

 

Thanks for all the help.

 

Jakob

 

I would like to have 3 Images with text on each row

Bildschirmfoto 2016-10-15 um 10.22.52.png

 

My structure:

 

Bildschirmfoto 2016-10-15 um 10.18.45.png

 

Each child has a Title, img and description

 

Bildschirmfoto 2016-10-15 um 10.18.39.png

Link to comment
Share on other sites

Hej!

Could you post your current code so we can see what's wrong?

A couple of links that might be useful: 

Generally it should / could be something like this:
This could be the template file for a product - but with the actual names of your fields and so on ...

<html>
  <head></head>
  <body>
<?php foreach($page->children() as $product): ?>
    <div>
      	<img src="<?= $product->img->url; ?>">
    	<h3><?= $product->title; ?></h3>
      	<p><?= $product->inhalt1; ?></p>
    </div>
<?php endforeach; ?>
  </body>
</html>

I used shorthand <?= ?> tags and the <?php foreach(): ?> <?php endforeach; ?> alternative control structure thing here which I really like (http://php.net/manual/en/control-structures.alternative-syntax.php
But it is up to you how to implement it.

Hope that helps

lg
Steffen

  • Like 4
Link to comment
Share on other sites

1 hour ago, kuba2 said:

I would like to have 3 Images with text on each row

Hi @kuba2 and welcome. I can't tell from the screenshots what templates you are using. However, this is how I do it for my 'news-index.inc' template. This pulls in all children of that page and displays them like you are asking (except mine are news entries, not tires!).

// news-index.inc
<?php
    $entries = $page->children();
    $created_by = $page->createdUser->displayName;
?>

<?php foreach ($page->children() as $entry): ?>

    <?php $publish_date = date('d/m/y', $entry->created); ?>

    <div class='news-wrapper'>
        <div class='news-column-left'>
            <h1 class='news-title'><a href="<?php echo $entry->url ?>"><?php echo $entry->title; ?></a></h1>
            <?php echo $entry->summary; ?>
        </div>

        <div class='news-column-right'>
            <p class='entry-info'><span class='fa fa-calendar' aria-hidden='true'></span><?php echo $publish_date; ?></p>
            <p class='entry-info'><span class='fa fa-pencil-square-o' aria-hidden='true'></span><?php echo $created_by; ?></p>
        </div>
    </div>

<?php endforeach; ?>

So I guess you could do something similar like:
 

// keramik.php
<?php foreach ($page->children() as $entry): ?>
    <div class='single-product-wrapper'>
      <h1 class='tire-name'><a href="<?php echo $entry->url ?>"><?php echo $entry->title; ?></a></h1>
      <img src="<?php echo $entry->img ?>" />
      <p><?php echo $entry->inhalt1; ?></p>
    </div>
<?php endforeach; ?>

$page above is the current page you're on. $page->children returns an array with all the child page iDs (say '1|5|12|22|22'). So each child page is looped through (foreach) and printed to the webpage one at a time. $entry is the ID of the array item each loop through. If that makes sense.

I am just starting working with images so I don't know what will happen with the img in the code above, I think it may just print at whatever size you uploaded it at. However, this should get you started.

Regards the printing three in a row, this is css. I use http://neat.bourbon.io/ for layouts, so in my case (for my first example), the scss is:

// styles.scss
/* News index page */
.news-wrapper {
    @include row();
    padding-bottom: 1em;
    border-top: 5px solid $light-grey;
}

.news-column-left {
    @include pad(0 2em);
    @include media($tablet) {
        @include span-columns(9 of 12);
    }
}

.news-column-right {
    background: #FFE6A7;
    @include media($tablet) {
        @include span-columns(3 of 12);
        @include pad(0.5em);
    }
}

// OUTPUTS

// styles.css
/* News index page */
.news-wrapper {
  display: block;
  padding-bottom: 1em;
  border-top: 5px solid #e7e7e7; }
  .news-wrapper::after {
    clear: both;
    content: "";
    display: table; }

.news-column-left {
  padding: 0 2em; }
  @media screen and (min-width: 600px) {
    .news-column-left {
      float: left;
      display: block;
      margin-right: 0%;
      width: 75%; }
      .news-column-left:last-child {
        margin-right: 0; } }

.news-column-right {
  background: #FFE6A7; }
  @media screen and (min-width: 600px) {
    .news-column-right {
      float: left;
      display: block;
      margin-right: 0%;
      width: 25%;
      padding: 0.5em; }
      .news-column-right:last-child {
        margin-right: 0; } }

Hope this helps.

 

EDIT: @blynx beat me to it :-p

  • Like 2
Link to comment
Share on other sites

@kuba2 You are welcome : )
Actually I learned a lot PHP and Object Oriented Programming just through Processwire - you should really look into the processwire documentation http://processwire.com/docs/ - especially about template files and selectors in the beginning - later you will really enjoy http://processwire.com/api/ref/ the API reference where the most important things are documented.

@SamC well, but your reply is way more sophisticated! ;)

  • Like 3
Link to comment
Share on other sites

2 minutes ago, blynx said:

@kuba2 You are welcome : )
Actually I learned a lot PHP and Object Oriented Programming just through Processwire - you should really look into the processwire documentation http://processwire.com/docs/ - especially about template files and selectors in the beginning - later you will really enjoy http://processwire.com/api/ref/ the API reference where the most important things are documented.

@SamC well, but your reply is way more sophisticated! ;)

Thanks. I knew very little about PHP before a few months ago. I just studied the processwire API and it's very well written. I'm more a designer so my CSS skills outweigh any PHP ones :) this is what I like about processwire, I have 100% control over HTML/CSS and the built in methods make it quite simple to grab stuff out the database.

  • Like 2
Link to comment
Share on other sites

3 minutes ago, kuba2 said:

Thanks for sharing! I started coding everything at once, so my PHP is lacking. Great to here how You came to it...helps a lot.

I edited my earlier post to show the actual css that the scss spits out.

Link to comment
Share on other sites

Hey there, thanks again

 

Almost there

With this code:

              <?php foreach ($page->children() as $product): ?>

                <div class='single-product-wrapper'>
        
                  <img src="<?php echo $product->img; ?> "/>
                  <p><?php echo $product->inhalt1; ?></p>

                </div>

              <?php endforeach; ?>

 

I get this output:

 

                <div class='single-product-wrapper'>
        
                  <img src="roter-engel-kerze-gross-big.png "/>
                  <p><p>Grosser Roter Engel mit Kerzenlicht</p>

<p>Ein grosser Keramikengel mit kleinen Löchern, durch welche das Kerzenlicht scheinen kann. Filigrane Gesichtszüge geben der Skulptur einen feinen Touch. </p></p>

                </div>

            
                <div class='single-product-wrapper'>
        
                  <img src="sitz-big.png "/>
                  <p><p>Sitzender Engel</p>

<p>Dieser sitzende engel kann auf einer Möbelkante platziert werden und schaut fröhlich im Zimmer umher.</p>

<p>Die Figur ist ca. 25 cm hoch.</p></p>

                </div>

            
                <div class='single-product-wrapper'>
        
                  <img src="gruner-engel-mittel-stehend-big.png "/>
                  <p><p>Fröhlicher stehender grüner engel</p>

<p>Die Figur kann überall platziert werden und verbreitet gute Stimmung.</p>

<p>Höhe: 15cm</p></p>

                </div>

 

But somehow the images don't show....

Bildschirmfoto 2016-10-15 um 15.45.36.png

 

I tried the

 $product->img->url

doesn't work.

 

It's probably a detail, but I don't see it

 

Thanks

Link to comment
Share on other sites

Haven't read through this in detail, but my quick guess would be the image single vs array issue.

$product->img->first()->url

Or if you want, you can set the "Max Files Allowed" to 1 on the Details tab of the "img" field settings.

  • Like 1
Link to comment
Share on other sites

hi kuba2 and welcome :)

hard to say what's wrong... just wanted to give you a tip: install tracy debugger and use the console! it's awesome and will help you to understand everything much better than putting some code into your template files and reloading the browser over and over again.

you could do something like this in your case:

$p = $pages->get( # your page id # );
d($p->product-img);
d($p->product-img->url);

if you set your product image to "automatic" it will be an array when you uploaded more than 1 image and a single item when you uploaded only 1 image. in tracy you could easily inspect such things (that's what adrian already said above)

2016-10-15 22_03_59-Edit Field_ atr_images • mentalestaerke.at.png

  • Like 3
Link to comment
Share on other sites

Hello again

Thanks for all the help, love the forum!

How do I resize the image?

I have no Idea how to write something like this ( $thumbnail ) in Shorthand.

<?php

foreach($page->image_field as $image) {
   $thumbnail = $image->size(150,100);
   echo "<p><a href='{$image->url}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a></p>";
}

?>   

 

Also, I wrote the shorthand code in regular PHP, and the images didn't show anymore....

this

<?php foreach ($page->children() as $product): ?>

                <div class='single-product-wrapper'>
                  
                  <img src="<?php echo $product->img->first()->url; ?> "/>
                  <p><?php echo $product->inhalt1; ?></p>

                </div>

              <?php endforeach; ?>

into this

 <div class='single-product-wrapper'>
                
                <?php foreach ($page->children() as $product){
                  echo $product->img->first()->url;
                  echo $product->inhalt1; 


                }

                ?>

              </div> 

That is the same, isn't it?

 

Thanks

Jakob

Link to comment
Share on other sites

Your $thumbnail is already pretty handy - you could write somthing like 

$image->size(123, 456)->url

but then you would have to repeat the size command all the time.

Then, in your last example you have to put the "single-product-wrapper" into the foreach loop, since you want to wrap every product with it .... ‽ ... And what BitPoet said.

 

  • Like 2
Link to comment
Share on other sites

@kuba2 could you post the code but with:
 

// template-name.php

at the top of your snippets, it makes it a bit easier (for me personally) to tell what you are trying to do. For example:

// product-index.php
// I would guess this lists all your subpages of 'Products'

// single-product.php
// I would guess this is a single page showing the product (image/description/whatever)

It's a small thing but it would help in your code above where you have:

<?php

foreach($page->image_field as $image) { // is 'image_field' the fieldname on a single product template?
   $thumbnail = $image->size(150,100);
   echo "<p><a href='{$image->url}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a></p>";
}

?>

and:

<?php foreach ($page->children() as $product): ?>

                <div class='single-product-wrapper'>
                  
                  <img src="<?php echo $product->img->first()->url; // or is the image field called 'img'? ?> "/> 
                  <p><?php echo $product->inhalt1; ?></p>

                </div>

              <?php endforeach; ?>

I'm a bit confused as to what you are doing and on what template. Seem to be getting there though! :)

If you also want to set some defaults, you can have a look at this: https://processwire.com/docs/tutorials/how-to-structure-your-template-files/page4

The 'Adding an init.inc file to the mix (a best practice)' bit. Maybe you could set some image size defaults in there, I haven't tried this though (but probably will rather than have to set sizes all over the place).

  • Like 1
Link to comment
Share on other sites

Here's my code for the page with all the products, which works. Image size works via CSS.

 I am planning implementing shopify, so there will be no single product page.

By the way, I am using the shopify button, which is created by embedding a code from shopify...is that doable with processwire and php? I saw they make an embed code for html...can I put that somehow in the backend, so that the php puts it out as html code?

 

<!doctype html>
<html class="no-js" 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.0">
    <title>In-Albon Devotionalien</title>
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>styles/app.css">
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>styles/style.css">

  </head>


  <body>



<!-- Header -->

<!-- INCLUDE NAV.PHP -->
<?php include("./header2.inc"); ?>



 <div class="row">
   <div class="large-12 medium-12 columns" id="centerdiv">
    <div class="wrap">
     <div class="bilder-produkte">

          

              <?php foreach ($page->children() as $product): ?>

                <div class='single-product-wrapper'>
                  
                  <img src="<?php echo $product->img->first()->url; ?> "/>
                  <p><?php echo $product->inhalt1; ?></p>

                </div>

              <?php endforeach; ?>


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






<!-- Footer -->
     
<?php include("./footer.inc"); ?>



  

    <script src="<?php echo $config->urls->templates?>bower_components/jquery/dist/jquery.js"></script>
    <script src="<?php echo $config->urls->templates?>bower_components/what-input/what-input.js"></script>
    <script src="<?php echo $config->urls->templates?>bower_components/foundation-sites/dist/foundation.js"></script>
    <script src="<?php echo $config->urls->templates?>js/min/app-min.js"></script>

    <script src="<?php echo $config->urls->templates?>js/jquery-2.1.3.min.js"></script>
    <script src="<?php echo $config->urls->templates?>js/functions.js"></script>



<!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="<?php echo $config->urls->templates?>js/libs/jquery-1.7.min.js">\x3C/script>')</script>




  </body>
</html>

 

Link to comment
Share on other sites

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

×
×
  • Create New...