WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Loop Issue Foreach (4 posts)

  1. mak1wp
    Member
    Posted 1 year ago #

    Hello,

    I'm having trouble with a loop that uses foreach.

    I'm using SMOF (slightly modified options framework) to list an array of images which are placed into a flex slider.

    Heres the old code which works.... (but the issue with this is, I dont know how to specify the image sizes)

    <?php
         $slides = $data['pingu_slider']; //get the slides array
    
    		foreach ($slides as $slide) {
    		echo 
    
    	'<li>
    	<a href="'. $slide['link']. ' ">
    	<img src="' . $slide['url' ] . '" />
    	</a>
    
    		<div class="flex-title">'.  $slide['title']. ' </div>
    		<div class="flex-caption">'. $slide['description']. ' </div> 
    
    		</li>';
    }
    ?>

    Heres the new code, which will specify the image size, but it only shows the first image.

    <div class="row">
          <div class="large-12 columns">
    
         <div id="slider" class="flexslider">
    
            <ul  class="slides">
    
    		<?php $loop = new WP_Query( array( 'pingu_slider' ) ); ?>
            <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
            <?php 
    
    	foreach ($loop as $loop) {	?> 
    
                            <li>
                                        <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'small-thumb' ); } ?>
    
                            </li>
    
                        <?php }endwhile; ?>
    
                    </ul>
                </div>
    </div>

    Many many thanks to anybody that can help.

    Cheers

  2. skim-
    Member
    Posted 1 year ago #

    You can hack this with an html width attribute on the image

    <?php
         $slides = $data['pingu_slider']; //get the slides array
    
    		foreach ($slides as $slide) {
    		echo 
    
    	'<li>
    	<a href="'. $slide['link']. ' ">
    	<img src="' . $slide['url' ] . '" width="400" />
    	</a>
    
    		<div class="flex-title">'.  $slide['title']. ' </div>
    		<div class="flex-caption">'. $slide['description']. ' </div> 
    
    		</li>';
    }
    ?>

    Or your second code block can be edited like this ( if 'pingu_slider' is a post type ). Also have a look at http://codex.wordpress.org/Class_Reference/WP_Query for how to structure arguments for WP_Query.

    <ul  class="slides">
    
            <?php $loop = new WP_Query( array( 'post_type' => 'pingu_slider' ) ); ?>
            <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
                    <li>
                       <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'small-thumb' ); } ?>
                    </li>
    
           </ul>
  3. mak1wp
    Member
    Posted 1 year ago #

    Hey @skim-

    Thanks a lot for your reply, really appreciated.

    Unfortunately the second solution doesn't seem to want to work. the pingu slider is an array set up in the options framework http://aquagraphite.com/2011/11/smof-documentation/ , it just wants to show the first image, then disappear completely (doesn't work at all with post_type) :|

    I'm unable to use the first solution for this one. Thanks again though, I'll check out this WP_Query link you've posted.

    Cheers.

  4. mak1wp
    Member
    Posted 1 year ago #

    Looks like this isn't a possibility.

    Solution:

    ACF - instead of using:
    $image['url']

    I've used
    $image['sizes']['thumbnail']

    SMOF - I'm not too sure how to create arrays and such. So instead of using the options framework to add a slide, I've done it via a custom post type - with help from this link http://wp.tutsplus.com/tutorials/create-a-responsive-slider-plugin-with-flexslider/

Topic Closed

This topic has been closed to new replies.

About this Topic