kuba2

Loop through children with images and text

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Fantastic! Thank You very much 

 

I need to go to PHP school!

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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>

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By kaba86
      Hello PW Community, really glad that discovered this CMS recently, it is very strange it took so long That idea of no front design limitations is just awesome!
      Need to say that I have a bit of knowledge of html and css, but almost no php, so I need your help.
      What I want to do is an article posting  cms, with this structure:
       
      - Homepage - Projects - Articles -- Category 1 --- Articles of category 1 -- Category 2 --- Articles of category 2 - About - Contact Found this ProcessWire Profile https://github.com/tutsplus/how-to-create-an-ajax-driven-theme-for-processwire
      It covers almost all my needs, except the menu. When I add a childpage for this page http://artist.nicegrp.com/publications/world-world/ , World:World doesn't appear under Writings & Publications.
      I need a menu that works like a breadcrumb, that shows on the menu the category that you are viewing. So when I'm in articles page, on the menu it shows only articles and it's categories. When I get into a category, that category takes state active link but doesn't show on the menu links and titles for contained articles. How can I do that?
      Sorry for my long writing and English, it is not my native but I hope you understood what I need. Can you help me with that?
      Thank you
       
    • By clickpass
      I want to split my output of an image array, see my code here:
      <div class="row"> <?php foreach($page->umf_imgs as $image) {echo "<div class='one-fourth column refs'><img src='$image->url'></div>";} ?> </div> <div class="row"> <?php foreach($page->umf_imgs as $image) {echo "<div class='one-fourth column refs'><img src='$image->url'></div>";} ?> </div> <div class="row"> <?php foreach($page->umf_imgs as $image) {echo "<div class='one-fourth column refs'><img src='$image->url'></div>";} ?> </div> The number of images is 11, but I only want to add four in a row. Is it possible to grab them, e.g. image 1-4, image 5-8, image 9-12?
    • By gerald
      Hi all,
      I use version 3.0.62. Is there a way to delete all children of a page with one click - without parent page?
      thanks
    • By John W.
      SYNOPSIS
      A little guide to generating an sitemap.xml using (I believe) a script Ryan originally wrote with the addition of being able to optionally exclude child pages from being output in the sitemap.xml file.
      I was looking back on a small project today where I was using a php script to generate an xml file, I believe the original was written by Ryan. Anyway, I needed a quick fix for the script to allow me to optionally exclude children of pages from being included in the sitemap.xml output.
      OVERVIEW
      A good example of this is a site where if you visit /minutes/ a page displays a list of board meetings which includes a title,  date, description and link to download the .pdf file.
      I have a template called minutes and a template called minutes-document. The first page, minutes, when loaded via /minutes/ simply grabs all of its child pages and outputs the name, description and actual path of an uploaded .pdf file for a visitor to download.
      In my back-end I have the template MINUTES and MINUTES-DOCUMENT. Thus:


      So, basically, their employee can login, hover over minutes, click new, then create a new (child) record and name it the date of the meeting e.g. June 3rd, 2016 :

       
      ---------------------------
      OPTIONALLY EXCLUDING CHILDREN - SETUP
      Outputting the sitemap.xml and optionally excluding children that belong to a template.
      The setup of the original script is as follows:
      1. Save the file to the templates folder as sitemap.xml.php
      2. Create a template called sitemap-xml and use the sitemap.xml.php file.
      3. Create a page called sitemap.xml using the sitemap-xml template
       
      Now, with that done you will need to make only a couple of slight modifications that will allow the script to exclude children of a template from output to the sitemap.xml
      1. Create a new checkbox field and name it:   sitemap_exclude_children
      2. Add the field to a template that you want to control whether the children are included/excluded from the sitemap. In my example I added it to my "minutes" template.
      3. Next, go to a page that uses a template with the field you added above. In my case, "MINUTES"
      4. Enable the checkbox to exclude children, leave it unchecked to include children.
      For example, in my MINUTES page I enabled the checkbox and now when /sitemap.xml is loaded the children for the MINUTES do not appear in the file.

       
      A SIMPLE CONDITIONAL TO CHECK THE "sitemap_exclude_children" VALUE
      This was a pretty easy modification to an existing script, adding only one line. I just figure there may be others out there using this script with the same needs.
      I simply inserted the if condition as the first line in the function:
      function renderSitemapChildren(Page $page) { if($page->sitemap_exclude_children) return ""; ... ... ...  
      THE FULL SCRIPT WITH MODIFICATION
      <?php /** * ProcessWire Template to power a sitemap.xml * * 1. Copy this file to /site/templates/sitemap-xml.php * 2. Add the new template from the admin. * Under the "URLs" section, set it to NOT use trailing slashes. * 3. Create a new page at the root level, use your sitemap-xml template * and name the page "sitemap.xml". * * Note: hidden pages (and their children) are excluded from the sitemap. * If you have hidden pages that you want to be included, you can do so * by specifying the ID or path to them in an array sent to the * renderSiteMapXML() method at the bottom of this file. For instance: * * echo renderSiteMapXML(array('/hidden/page/', '/another/hidden/page/')); * * patch to prevent pages from including children in the sitemap when a field is checked / johnwarrenllc.com * 1. create a checkbox field named sitemap_exclude_children * 2. add the field to the parent template(s) you plan to use * 3. when a new page is create with this template, checking the field will prevent its children from being included in the sitemap.xml output */ function renderSitemapPage(Page $page) { return "\n<url>" . "\n\t<loc>" . $page->httpUrl . "</loc>" . "\n\t<lastmod>" . date("Y-m-d", $page->modified) . "</lastmod>" . "\n</url>"; } function renderSitemapChildren(Page $page) { if($page->sitemap_exclude_children) return ""; /* Aded to exclude CHILDREN if field is checked */ $out = ''; $newParents = new PageArray(); $children = $page->children; foreach($children as $child) { $out .= renderSitemapPage($child); if($child->numChildren) $newParents->add($child); else wire('pages')->uncache($child); } foreach($newParents as $newParent) { $out .= renderSitemapChildren($newParent); wire('pages')->uncache($newParent); } return $out; } function renderSitemapXML(array $paths = array()) { $out = '<?xml version="1.0" encoding="UTF-8"?>' . "\n" . '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">'; array_unshift($paths, '/'); // prepend homepage foreach($paths as $path) { $page = wire('pages')->get($path); if(!$page->id) continue; $out .= renderSitemapPage($page); if($page->numChildren) { $out .= renderSitemapChildren($page); } } $out .= "\n</urlset>"; return $out; } header("Content-Type: text/xml"); echo renderSitemapXML(); // Example: echo renderSitemapXML(array('/hidden/page/'));  
      In conclusion, I have used a couple different processwire sitemap generating modules. But for my needs, the above script is fast and easy to setup/modify.
      - Thanks
       
    • By rareyush
      hi everyone
       
      I am trying get a full width sub-menu on 3rd item in menu or navbar which is coming from a loop.
      i was hoping this can be done by using jquery by targeting 3rd element in navbar but jquery is blocked in some browser by default so is there any other method I can do this