Loop through children with images and text

kuba2 · October 15, 2016

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

My structure:

Each child has a Title, img and description

blynx · October 15, 2016

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

kuba2 · October 15, 2016

Fantastic! Thank You very much

I need to go to PHP school!

SamC · October 15, 2016

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

kuba2 · October 15, 2016

Great help! Thanks a lot

blynx · October 15, 2016

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

SamC · October 15, 2016

3 minutes ago, kuba2 said:

Great help! Thanks a lot

http://neat.bourbon.io/examples/

Automatic rows is your friend here! Works very well once you're all set up.

SamC · October 15, 2016

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.

kuba2 · October 15, 2016

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.

SamC · October 15, 2016

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.

kuba2 · October 15, 2016

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

I tried the

 $product->img->url

doesn't work.

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

Thanks

adrian · October 15, 2016

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.

bernhard · October 15, 2016

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

kuba2 · October 16, 2016

17 hours ago, adrian said:
Haven't read through this in detail, but my quick guess would be the image single vs array issue.
$product->img->first()->url

Works great! Thanks again

kuba2 · October 16, 2016

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

BitPoet · October 16, 2016

No, you've removed all the necessary HTML markup. You need to echo that too if you want the output to be the same.

blynx · October 16, 2016

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.

SamC · October 17, 2016

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

kuba2 · October 17, 2016

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>

Christophe · October 17, 2016

Hello,

Why do you have 4 different calls to jquery? Are you testing something?

Have a nice week!

kuba2 · October 17, 2016

Good question...

The two on the bottom are for flexslider, which I removed ( forgot to remove them )

One for an animation ( easing in of images ), I just copied the jquery from my example

Sign In

Loop through children with images and text

Recommended Posts

kuba2 16

Share this post

Link to post

Share on other sites

blynx 231

Share this post

Link to post

Share on other sites

kuba2 16

Share this post

Link to post

Share on other sites

SamC 637

Share this post

Link to post

Share on other sites

kuba2 16

Share this post

Link to post

Share on other sites

blynx 231

Share this post

Link to post

Share on other sites

SamC 637

Share this post

Link to post

Share on other sites

SamC 637

Share this post

Link to post

Share on other sites

kuba2 16

Share this post

Link to post

Share on other sites

SamC 637

Share this post

Link to post

Share on other sites

kuba2 16

Share this post

Link to post

Share on other sites

adrian 10,637

Share this post

Link to post

Share on other sites

bernhard 3,297

Share this post

Link to post

Share on other sites

kuba2 16

Share this post

Link to post

Share on other sites

kuba2 16

Share this post

Link to post

Share on other sites

BitPoet 2,048

Share this post

Link to post

Share on other sites

blynx 231

Share this post

Link to post

Share on other sites

SamC 637

Share this post

Link to post

Share on other sites

kuba2 16

Share this post

Link to post

Share on other sites

Christophe 309