close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

additional product images

Thread began 3/07/2016 3:56 pm by Christopher West | Last modified 3/24/2016 1:44 pm by Ray Borduin | 729 views | 13 replies |

Christopher WestCommunity Expert

additional product images

Hi quick question on setting up a system where a product detail page can display additional product images.

Basically my client has a supplier that uploads product images via FTP to the website. These product image use the product SKU as its file name (eg 123456.jpg) they also upload additional product images for that product (eg. 123456-a.jpg, 123456-b.jpg and so on) These additional product images are not stored in the database. Therefore, what would be the process on the product detail page to display these additional images. Since the filename SKU will always be the same, I guess I need to do some kind of PHP string calculation to look at the 6 digit SKU and then look at the -a -b part and display it? How would I go about this?

Chris

Sign in to reply to this post

Ray BorduinWebAssist

You can use the file_exists() function to check to see if a file exists in an IF statement that displays the additional images.

<?php if (file_exists(@@recordsetproductid@@ , "-a.jpg')) { ?>

Sign in to reply to this post

Christopher WestCommunity Expert

Thanks. one question though from your reply, in the line of code you have "-a.jpg" what would I need to change this to so thats its dynamic because there there be -a -b -c etc or -a may not even exist but only -b -j -s etc.

Chris

Sign in to reply to this post

Ray BorduinWebAssist

Yes, you would have to repeat that code for the letters possible, or write a loop that goes through the alphabet.

Sign in to reply to this post

Christopher WestCommunity Expert

I would a assume a loop would be better. I will see if I can find something through a google search on looping letters of the alphabet

Sign in to reply to this post

Christopher WestCommunity Expert

Ray would something like this work? (I havent had time to try it yet) - But I assume there be a syntax error where I placed the "-$letter.jpg"

php:
$letters = range('A', 'Z');


foreach ($letters as $letter) {

        <?php if (file_exists(@@recordsetproductid@@ , "-$letter.jpg")) { ?>
}



Chris

Sign in to reply to this post

Ray BorduinWebAssist

It should be:
@@recordsetproductid@@ . "-".$letter.".jpg"

and you have to replace @@recordsetproductid@@ with the actual recordset column reference for your id column.

Sign in to reply to this post

Christopher WestCommunity Expert

Hi have I got the concept of the code wrong? Because the thumbnail images are not being display. I did think it was because there is no echo statement in the thumbs image tag, but when I try to add in the echo I get a syntax error.

Also I am using javascript where when a user clicks on a thumbnail image it replaces the larger image (it works fine without php as using Owl Carousel 2) Also would the logic of this code mess up how the initial image displays (as the default image for the product wont have a -A, -B, -C etc appended on the end of the file name, only rhe additional product images will have those appended)

php:
<div class="big-images">

         <div><span class='zoom' id='ex1'><img  src="libra/images/<?php echo($rsProduct->getColumnVal("ProductSKU")); ?>.jpg" /></span></div>
      </div>
      
      
      <div class="thumbs">    
          <?php 
          
              $letters 
range('A''Z');
              
                  foreach (
$letters as $letter) { ?>
    
                  <div><img  src="libra/images/<?php if (file_exists ($rsProduct->getColumnVal("ProductSKU") . "-".$letter.".jpg")) ?>.jpg" /></div>    
          <?php ?>
      </div>



Chris

Sign in to reply to this post

Ray BorduinWebAssist

I think the code would be more like:

php:
<div class="big-images">

      <div><span class='zoom' id='ex1'><img   src="libra/images/<?php echo($rsProduct->getColumnVal("ProductSKU")); ?>.jpg" /></span>
      </div>
</div>
      
<div class="thumbs">    
<?php 
              $letters 
range('A''Z');
                  foreach (
$letters as $letter) { 
                    if (
file_exists("libra/images/".$rsProduct->getColumnVal("ProductSKU") . "-".$letter.".jpg")) {
?>
                  <div><img   src="libra/images/<?php echo($rsProduct->getColumnVal("ProductSKU") . "-".$letter?>.jpg" /></div>    
<?php 
                    

                  }
?>
</div>
Sign in to reply to this post

Christopher WestCommunity Expert

Thanks that part works, I have overlooked something though.

in the code segment that we are looking at, at the top there is:

php:
<div class="big-images">

      <div><span class='zoom' id='ex1'><img    src="libra/images/<?php echo($rsProduct->getColumnVal("ProductSKU")); ?>.jpg" /></span>
      </div>
</div>



I need to somehow loop this with the code that you have just helped me with.

To give context I want to show you the original code that works (without php). The way it works, there is javascript that functions like this, a user clicks on one of the thumbs and then the image in the big-images div will be replaced with the one the user clicks. (Thats why there needs to be identical img tags in both the big-images and thumbs divs. Does that make sense? So I guess I need to somehow loop the above code so that its syncing with the thumbs.

html:
<div class="big-images">
<div><span class='zoom' id='ex1'><img src="libra/images/image1.jpg" /></span></div>
<div><span class='zoom' id='ex1'><img src="libra/images/image2.jpg" /></span></div>
<div><span class='zoom' id='ex1'><img src="libra/images/image3.jpg" /></span></div>
</div>

<div class="thumbs">
<div><img src="libra/images/image1.jpg" /></div>
<div><img src="libra/images/image2.jpg" /></div>
<div><img src="libra/images/image3.jpg" /></div>
</div>
Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...