How to show specific images

Hi Mel,

Is there a reason that you need to have the other three images in that upload field if they're not being displayed? It might be simpler to have a separate upload field in your section that contains the three images so you can loop through them more easily.

If you wanted to only display the 1st  3rd, and 6th images you could do it based on there key value like this:

<?php foreach ($biosRecord['nsimages'] as $key => $upload): ?>
<!-- The code below would only display the 1st, third and sixth image
<?php if ($upload['isImage'] && ($key == '0' || $key == '2' || $key == '5')): ?>
<div class="bg-1 bioFrame "><img src="<?php echo get_custom_watermark_url($upload['urlPath'], 'watermarkNew.png') ?>" height="<?php echo $upload['height'] ?>"
alt="<?php echo $biosRecord['name'] ?>" class="img_border"/>

<?php endif ?>
<?php endforeach ?>

Or you could use one of the info fields as a variable to identify if an image should be displayed or not. For example you could add 'show' to the second info field for an image that should be displayed (I've attached an example screenshot), then use an if statement to only display images that have that:

<?php foreach ($biosRecord['nsimages'] as $key => $upload): ?>
<!-- The code below would only display the 1st, third and sixth image
<?php if ($upload['isImage'] && $upload['info2'] == 'show'): ?>
<div class="bg-1 bioFrame "><img src="<?php echo get_custom_watermark_url($upload['urlPath'], 'watermarkNew.png') ?>" height="<?php echo $upload['height'] ?>"
alt="<?php echo $biosRecord['name'] ?>" class="img_border"/>

<?php endif ?>
<?php endforeach ?>

Let me know if you have any questions.

Thanks!

Greg

Hi Greg,

Thanks for your reply

Re your question on image uploads:

On the PC site it needs to display all six images on the individual record page

I am in the process of putting together a mobile site and in order to avoid having to scroll through six images I may limit it to 2 or 3 only and it will also reduce load time and bandwidth usage

Although I am hoping to use the slider that comes with the design but I am not sure if you can call images from a database into the slider

I have emailed the designer to see if you can

In the menatime I will run some test with your suggestions

Thank you - Mel

PS Did you add the screenshot  as I cannot see the link :-)

Hi Greg,

No reply from the designer of the mobile template as yet so I have substituted a different slider which I have used for static images on another site before

This latest version also includes swipe for mobile sites although I have not set this part up as yet

I know I said that I will probably only use 2 or 3 of the six images but I thought for starters I would keep it simple for testing and rotate through all 6 images but with a view to displaying just 3 images once I have got it to work

I can get the slider to call the images from the database, so I am heading in the right direction, but it displays all six images in one go and breaks out of the slider box, is this because I am calling all the images in one hit? should I be adding something else to  the php code

See code below

Thanks - Mel

    <!-- mels slider test -->
    <script type="text/javascript">

    jQuery(document).ready(function($){
        $('#my-slider').advancedSlider({width: 250,
                                              height: 330,
                                             skin: 'minimal-small',
                                                shuffle: false,
                                                slideshowControls: true,
                                                slideshowControlsToggle: false,
                                                slideArrowsToggle: true,
                                                slideButtonsNumber: true,
                                                timerAnimationControls: false,
                                                timerRadius: 20,
                                             timerStrokeColor1: '#ffffff',
                                             timerStrokeColor2: '#000000',
                                             timerStrokeOpacity1: 0.8,
                                             timerStrokeWidth1: 6,
                                             timerStrokeWidth2: 3,
                                             fullscreenControls: true,
                                                effectType: 'slide',
                                             slideEasing: 'easeInOutExpo',
                                                slideLoop: true,
                                                overrideTransition: true
                                        
        });
    });
    
</script>
    
    <div class="advanced-slider" id="my-slider">
        <ul class="slides">
        <?php foreach ($biosRecord['nsimages'] as $upload): ?>
        
        <li class="slide">
                <img class="image" src="<?php echo get_custom_watermark_url($upload['urlPath'], 'watermarkNew.png') ?>" />                                    
        </li>
        <?php endforeach ?>
        </ul>
    </div>
    <br class="clear" />
    <!-- /mels slider test -->

Hi Mel,

So the slider system isn't working, and all of the images are being displayed at once? Looking at how you have your page set up, I think your PHP code is fine, and calling all of the images in one go shouldn't have any affect. I think it's most likely to be a problem with your slider system.

Have you tried using firefox firebug or  Chromes console to check if any Javascript files are missing, or if there are any bugs in the Javascript code?

Thanks!

Greg

Hi Greg,

Found the problem

In the documentation the pathway to one of the CSS files was not correct, changed that and it worked straightaway

Also your first solution to showing selected images works a treat will also test your second solution when I get a moment

Thanks for your help and also the firefox firrebug suggestion -  will remember that one for the future

Mel