How to show specific images
7 posts by 2 authors in: Forums > CMS Builder
Last Post: January 22, 2013 (RSS)
By Mel - January 21, 2013
Hi everyone,
Individual records each contain 6 images
The code below happily displays all six images with a watermark added to them without problem
If I want to display just 3 images spread throught the detail page, how do I do it?
Say images 1 - 3 - 6
<?php foreach ($biosRecord['nsimages'] as $upload): ?>
<?php if ($upload['isImage']): ?>
<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 ?>
Thanks in advance
Mel
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
PHP Programmer - interactivetools.com
By Mel - January 21, 2013 - edited: January 21, 2013
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 Mel,
I just realised I didn't attach that screenshot to the last post.
Let me know if you need any help integrating the images from the database into the slider.
Thanks!
Greg
PHP Programmer - interactivetools.com
By Mel - January 22, 2013
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
PHP Programmer - interactivetools.com
By Mel - January 22, 2013
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