Jump to content
Tom.

Newbie here confused about shift() and pop()

Recommended Posts

So I'm outputting an image field array, I believe this is known as WireArray (bare with me, I only started developing for ProcessWire Yesterday). 

The cheatsheet has to be one of the best things ever! Not only does it show how simple ProcessWire is and how well crafted the API is, kudos to whoever came up with the cheatsheet. One thing I would like to see is example usages when you click more because at the moment, more doesn't really tell you anything more. I can tell it's inspired by jQuery's API documentation so I have no doubt this will be coming.

So, moving on to the problem I'm having, looking at the cheatsheet $a->shift() will remove the first item for the array and then return it. So I have 

$gallery = $page->gallery;   // A multi-upload image field

$featured = $gallery->first()->size(800,550)->url; // Works fine

$slider = $gallery->shift() // Doesn't work

$slider = $gallery->pop() // Doesn't work

$footer = $gallery->last()->size(800,1100)->url; // Works fine 

So my page layout goes like this: 
                                                 ___________
                                                |__________ | <--  $featured // First Image 

                                                |        |        |

$slider // Image Gallery --> |        |        | <--  $page->content // Body Content Field
                                                |_____|____ |
                                                |__________| <-- $footer // Footer Image

I have no idea if that example helps, but for usability that's how I want the gallery to work, so the user can just drag all their images in at once, move the featured to the front and the footer to the back. 

However $gallery->shift() returns nothing and $gallery->pop() returns nothing. $gallery->slice(1) get's rid of the first one in that array but I want to get rid of the first and last. 

Thanks,

Tom

Share this post


Link to post
Share on other sites

Welcome to the forums Tom!

All kudos to Soma for the cheatsheet. Best thing since sliced bread :) More detailed examples are a little slower in happening but some of the items do have examples, not all.

Shift and Pop are like their PHP array equivalents - shift gets the first item from the array, pop the last, and essentially removes it from the array for use right now.

So your example would be something like:

// Shift the first item off the beginning of the array to use right now. It's no longer in the array for this instance of the page
$featured = $page->gallery->shift();
echo $featured->size(800,550)->url;
 
// Get the footer item now for use later on - we don't want to iterate over it when displaying the other images just below:
$footer = $page->gallery->pop();
 
// Now do some funky gallery stuff - this instance of the gallery array no longer contains the first and last items it did earlier
foreach ($page->gallery as $item) {
    echo $item->size(400,400)->url;
}
 
// And now we can echo the footer
echo $footer->size(800,550)->url;

That should work, though typed into the browser and untested - let us know how you get on :)


P.S. It is also perfectly acceptable to create two new single-image fields for featured and footer - might keep things neater in the admin for you - but this was an interesting request to explain some less-used functionality I think so I went with it :D

  • Like 8

Share this post


Link to post
Share on other sites

That is so much cleaner than I expected it to be! I guess I misunderstood shift() and pop() and it works so much better than I thought it did originally! 

Ah ProcessWire just keeps getting better and better! Thank you very much! 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By ngrmm
      I want to have filters with month names in german. I fetch them from date-fields with strftime('%B', $timestamp);
      But i'm not able to add them correctly to a wireArray()
      What's the right way to do that?
      $ms = wireArray(); $m1 = strftime('%B', 1579643232); // Januar $m2 = strftime('%B', 1583107200); // März $ms->prepend($m1); $ms->prepend($m2); foreach($ms as $name) { echo "$name "; // result: Januar M�rz }  
    • By MateThemes
      Hello everyone!
      I have a markup and image field question:
      I have a markup in which a gallery preview should be displayed on home page. This gallery have a special markup, 3 of 4 images have special image ratio.

      The gallery looks like this. 
      The html markup is like this:
      <div class="uk-section-muted" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-top-small; delay: 200;"> <div data-src="./assets/images/arrahof/home-restaurant-bg.svg" class="uk-background-norepeat uk-background-contain uk-background-top-center uk-section uk-section-large" uk-img> <div class="uk-container uk-container-small"> <div class="uk-margin-large" uk-grid> <div class="uk-width-1-1@m"> <h2 class="uk-text-center" uk-scrollspy-class>Das Angebot im ArraHof</h2> </div> </div> <div class="uk-grid-small uk-grid-margin-small" uk-grid> <div class="uk-width-expand@s"> <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class> <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#"> <img class="el-image" data-src="https://via.placeholder.com/610x604" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="604" alt="Placeholder Image" uk-img> <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div> <div class="uk-position-center uk-position-small"> <div class="uk-overlay uk-padding-large uk-transition-fade uk-margin-remove-first-child"> <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">Lorem Ipsum</h3> <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div> </div> </div> </a> </div> </div> <div class="uk-width-expand@s"> <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class> <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#"> <img class="el-image" data-src="https://via.placeholder.com/610x604" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="604" alt="Placeholder Image" uk-img> <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div> <div class="uk-position-center uk-position-small"> <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child"> <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3> <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div> </div> </div> </a> </div> </div> </div> <div class="uk-grid-small uk-grid-margin-small" uk-grid uk-height-match="target: .uk-card; row: false"> <div class="uk-width-2-3@s"> <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class> <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#"> <img class="el-image" data-src="https://via.placeholder.com/610x400" data-width="610" data-height="400" alt="Placeholder Image" uk-img> <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div> <div class="uk-position-center uk-position-small"> <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child"> <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3> <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div> </div> </div> </div> </a> </div> <div class="uk-width-expand@s"> <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class> <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#"> <img class="el-image" data-src="https://via.placeholder.com/610x820" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="820" alt="Placeholder Image" uk-img> <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div> <div class="uk-position-center uk-position-small"> <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child"> <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3> <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div> </div> </div> </div> </a> </div> </div> </div> <div class="uk-margin-large" uk-grid> <div class="uk-width-1-1@m"> <div class="uk-text-lead uk-width-xxlarge uk-margin-auto uk-text-center" uk-scrollspy-class>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</div> <div class="uk-margin-medium uk-text-center" uk-scrollspy-class> <a class="el-content uk-button uk-button-default uk-button-large" href="#">Unterkunft</a> </div> </div> </div> </div> </div> How can I achieve when I have an image field to add the custom markup within the image field? I have no clue to get this done.
      Thank you!
    • By gebeer
      Although the PW backend is really intuitive, ever so often my clients need some assistance. Be it they are not so tech savvy or they are not working in the backend often.
      For those cases it is nice to make some help videos available to editors. This is what this module does.
      ProcessHelpVideos Module
      A Process module to display help videos for the ProcessWire CMS. It can be used to make help videos (screencasts) available to content editors.
      This module adds a 'Help Videos" section to the ProcessWire backend. The help videos are accessible through an automatically created page in the Admin page tree. You can add your help videos as pages in the page tree. The module adds a hidden page to the page tree that acts as parent page for the help video pages. All necessary fields and templates will be installed automatically. If there are already a CKEditor field and/or a file field for mp4 files installed in the system, the module will use those. Otherwise it will create the necessary fields. Also the necessary templates for the parent help videos page and it's children are created on module install. The module installs a permission process-helpvideos. Every user role that should have access to the help video section, needs this permission. I use the help video approach on quite a few production sites. It is stable so far and well received by site owners/editors. Up until now I installed required fields, templates and pages manually and then added the module. Now I added all this logic to the install method of the module and it should be ready to share.
      The module and further description on how to use it is available on github: https://github.com/gebeer/ProcessHelpVideos
      If you like to give it a try, I am happy to receive your comments/suggestions here.
    • By NehaPillai
      Hello Everyone, I was trying to update SEO meta title, description and meta keywords for my website in Process Wire CMS but it saving in the backend but it is not reflecting on my website, Please help me regarding this error. Please find below attached screen shot for your ref. TIA.


    • By cosmicsafari
      Hi all,
      I have been asked by a client whether we can setup load balancing for their existing Processwire site.
      From my investigations on Google and within these forums, it definitely seems possible but as a newbie with a basic understanding of the subject im a bit lost.
      Does anyone know of any existing tutorials for settings up load balancing with PW?
      What items would need to be changed on their current stand alone install, is there a list of best practices worth consulting etc?
      As I understand it we would need to have some sort of copying mechanism (rsync script most likely) in order to make sure any uploaded assets are shared between the main server and the fallback ones, other than that im not sure what else would need to be ammended.
      Any thoughts/help would be greatly appreciated.
×
×
  • Create New...