Main
Index 		Search
Posts 		Who's
Online 		Log
In

Home: Products: CMS Builder:
Image linked to PDF document

 
 


kcmedia
User

Jul 14, 2009, 5:23 PM

Post #1 of 14 (2992 views)
Shortcut
Image linked to PDF document Can't Post
Hi

I have 2 uploads in the section one for uploading image and one for uploading pdf documents i want to be able to make that image linked to the pdf document so when you click on the image it will open the pdf i cant for the life of me get it to work.

here is the code viewer.

<?php header('Content-type: text/html; charset=utf-8'); ?>


<!-- INSTRUCTIONS -->
<div class="instructions">
<b>Sample List Viewer - Instructions:</b>
<ol>
<?php /*><li style="color: red; font-weight: bold">Rename this file to have a .php extension!</li><x */ ?>
<li><b>Remove any fields you don't want displayed.</b> (Most list pages only have title and link fields.)</li>
<li>Rearrange remaining fields to suit your needs.</li>
<li>Copy and paste code into previously designed page (or add design to this page).</li>
</ol>
</div>
<!-- /INSTRUCTIONS -->

<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1>Downloads - List Page Viewer</h1>
<?php foreach ($downloadsRecords as $record): ?>
Record Number: <?php echo $record['num'] ?><br/>
Title: <?php echo $record['title'] ?><br/>
_link : <a href="<?php echo $record['_link'] ?>"><?php echo $record['_link'] ?></a><br/>


<!-- STEP 2a: Display Uploads for field 'file' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($record['file'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><br/>

<?php elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /><br/>

<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>

<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->



<!-- STEP 2a: Display Uploads for field 'link_image' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($record['link_image'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><br/>

<?php elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /><br/>

<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>

<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->


<hr/>
<?php endforeach; ?>

<?php if (!$downloadsRecords): ?>
No records were found!<br/><br/>
<?php endif ?>
<!-- /STEP2: Display Records -->
Thanks

Craig
KC Media Solutions
www.kcmedia.biz


ross
Staff / Moderator


Jul 15, 2009, 7:53 AM

Post #2 of 14 (2984 views)
Shortcut
Re: [kcmedia] Image linked to PDF document [In reply to] Can't Post
Hi there.

Thanks for posting!

Instead of doing this with upload fields, I actually think it might be easier to just do it right through the web browser. You can upload both the image and the pdf, then use the image insert tool to easily link that image to the pdf. Could you give that a shot and let me know what you think?

Thanks!
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Product Specialist
support@interactivetools.com

Hire me!  Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/



kcmedia
User

Jul 15, 2009, 3:02 PM

Post #3 of 14 (2979 views)
Shortcut
Re: [ross] Image linked to PDF document [In reply to] Can't Post
Hi Ross

Sorry i dont understand what you mean, what happens is that someone will upload the image and also a pdf document into the section and then i want it to showup on a page see this example http://www.botanybaygamefishing.com.au/includes/test.php you will see the download link above the image all i want to do is make it so that when you click on the image it will show the pdf document and i dont want to link there anymore just the image.

thanks

Craig
Thanks

Craig
KC Media Solutions
www.kcmedia.biz


ross
Staff / Moderator


Jul 16, 2009, 10:22 AM

Post #4 of 14 (2971 views)
Shortcut
Re: [kcmedia] Image linked to PDF document [In reply to] Can't Post
Hi Craig

I see what you are trying to setup and because those two things are in different fields we'll likely need to do some fairly advanced PHP to combine them.

The way I was thinking would work better is if instead of those two fields, you use a single WYSIWYG editor instead. This could be in addition to any other WYSIWYG editor fields you already have in that section.

With the editor, you can upload both images and pdfs quite easily. You can also use the editor to make the image a link to the pdf. I think we should at least try this option out as it will definitely be easier to setup.

Do you want to give it a shot? Don't delete any fields just yet. Just create a new WYSIWYG editor and call it something like "PDF" or whatever you like.

Have you uploaded a file or an image through the WYSIWYG editor before?

Let me know and we'll go from there. Thanks!
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Product Specialist
support@interactivetools.com

Hire me!  Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/



gkornbluth
Veteran

Jul 18, 2009, 7:46 AM

Post #5 of 14 (2955 views)
Shortcut
Re: [kcmedia] Image linked to PDF document [In reply to] Can't Post
The code for what I think you want to do is relatively straightforward in the approach that follows, but it helps to understand how foreach loops and upload fields work in CMS Builder.

For the example I created a multirecord editor called test3 that contains 2 upload fields, “pdf” and “image”

The basic structure of the code you want to appear in the client’s browser is.

Code
<a href="path to your pdf upload"><img src="path to the thumbnail" width="thumbnail width" height=”thumbnail height" alt="alternate description of link" /><br />any other text that you want under the image</a>

It’s also a good idea to put a link on your page that lets the visitor know that they’ll need at least the free Adobe PDF reader to open the PDF document. The link to the free reader is: http://get.adobe.com/reader/

The code on the PHP page to display link image as an active link is below.

In the PHP code there is one main foreach loop that says look at each record in the test3 table that’s closed with an endforeach at the end of the code block

Then there’s a nested foreach loop for the pdf uploads that says look for the pdf upload path in each of the test3 records and display the path. This loop is closed at the end of the pdf code.

There’s a 3rd nested foreach loop to look for image uploads and display them as images. This loop is closed at the end of the image display code.

These loops are extracted from the full code in the CMS Admin code generator. As long as you know what type of uploads you are working with, you don’t have to use all of the “if” tests in the code. This makes your page much cleaner and easier to understand.

You can test the result at http://www.thecmsbcookbook.com/test3.php


Code
<?php header('Content-type: text/html; charset=utf-8'); ?> 
<?php 
 
  require_once "/path_to_your/cmsAdmin/lib/viewer_functions.php"; 
 
  list($test3Records, $test3MetaData) = getRecords(array( 
'tableName' => 'test3', 
)); 
 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
  <title>Display PDF Link as Thumbnail</title> 
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
   
 </head> 
<body> 
 
 
<?php foreach ($test3Records as $record): ?> 
<?php foreach ($record['pdf'] as $upload): ?> 
<a href="<?php echo $upload['urlPath'] ?>"> <?php endforeach ?> 
 
<?php foreach ($record['image'] as $upload): ?> 
 
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" />Click on the image to download the PDF</a> 
<?php endforeach ?><?php endforeach ?> 
</body> 
</html>

Best of luck with CMS Builder,

Jerry Kornbluth
The first CMS Builder reference book is now available on-line!
http://www.thecmsbcookbook.com


kcmedia
User

Jul 20, 2009, 1:42 AM

Post #6 of 14 (2915 views)
Shortcut
Re: [gkornbluth] Image linked to PDF document [In reply to] Can't Post
Hi Jerry

thanks for that with a little tweeking that worked perfect thank you very much.

Also thanks for the great cms cook book has been good, just got it last friday.

cheers

craig
Thanks

Craig
KC Media Solutions
www.kcmedia.biz


gkornbluth
Veteran

Jul 20, 2009, 4:38 AM

Post #7 of 14 (2911 views)
Shortcut
Re: [kcmedia] Image linked to PDF document [In reply to] Can't Post
Glad I was able to help.

Were the tweaks anything that you'd want to pass on for others?

Best,

Jerry


kcmedia
User

Jul 22, 2009, 1:17 AM

Post #8 of 14 (2890 views)
Shortcut
Re: [gkornbluth] Image linked to PDF document [In reply to] Can't Post
Hi Jerry

here is the code that we used.

<?php foreach ($downloadsRecords as $record): ?>
<?php foreach ($record['file'] as $upload): ?>
<a href="<?php echo $upload['urlPath'] ?>" target="_blank"> <?php endforeach ?>

<?php foreach ($record['link_image'] as $upload): ?>

<img src="<?php echo $upload['urlPath'] ?>" alt="" width="<?php echo $upload['Width'] ?>" height="<?php echo $upload['Height'] ?>" border="0" /></a></p>
<p align="left" class="bodycopy">
<?php endforeach ?>
<?php endforeach ?>
Thanks

Craig
KC Media Solutions
www.kcmedia.biz


GraphicLingoes
User

Oct 8, 2009, 6:02 PM

Post #9 of 14 (2521 views)
Shortcut
Re: [kcmedia] Image linked to PDF document [In reply to] Can't Post
Did you only use one image and one pdf per record while using this code? I tried to use it when you have more than one uploaded image and upload pdf per record in a multi record section and it embeds all of the links and images in one loop so only the last listed link is active.
Graphic Lingoes
www.graphiclingoes.com


Chris
Staff


Oct 11, 2009, 1:18 PM

Post #10 of 14 (2506 views)
Shortcut
Re: [GraphicLingoes] Image linked to PDF document [In reply to] Can't Post
Hi Graphic Lingoes,

If you want to link more than one uploaded file with uploaded images, you could use something like this:

Code
      <?php $count = min( sizeof($record['image_upload']), sizeof($record['pdf_upload']) ); ?> 
      <?php if ($count > 0): ?> 
        <?php foreach(range(0, $count - 1) as $index): ?> 
          <?php $image_upload = $record['image_upload'][$index]; ?> 
          <?php $pdf_upload   = $record['pdf_upload'][$index]; ?> 
          <a href="<?php echo $pdf_upload['urlPath'] ?>"> 
            <img src="<?php echo $image_upload['urlPath'] ?>" width="<?php echo $image_upload['width'] ?>" height="<?php echo $image_upload['height'] ?>" alt='' /> 
          </a> 
        <?php endforeach ?> 
      <? endif ?>

I hope this helps! Please let me know if you have any questions.
Chris


GraphicLingoes
User

Oct 12, 2009, 9:09 AM

Post #11 of 14 (2498 views)
Shortcut
Re: [chris] Image linked to PDF document [In reply to] Can't Post
Thanks Chris, what would the viewer look like in Admin to make this work?
Graphic Lingoes
www.graphiclingoes.com


GraphicLingoes
User

Oct 12, 2009, 4:25 PM

Post #12 of 14 (2490 views)
Shortcut
Re: [GraphicLingoes] Image linked to PDF document [In reply to] Can't Post
Chris you are the man! Your solution worked like a charm. Disregard my question about what should the viewer look like. The original viewer I set up worked just fine. For anyone else that may read this here was my challenge and thanks to Chris' solution the resolution is below that:



CHALLENGE:

My client wanted to be able to upload multiple pdf documents for each record in a multi-record section. Easy enough with the upload feature that the CMS builder supplies. The challenging part was they also wanted to be able to upload an image for each separate pdf document on each multi-record in the section. So when you click on the image the corresponding pdf document would launch.


RESOLUTION:

Create a multi-record viewer with two upload features one with a table name of image_upload and another one with a table name of pdf_upload. Generate the code using the code generator as you normally would then add Chris' solution to the body of your page where you want the images to show up that link to the pdfs:

<?php $count = min( sizeof($record['image_upload']), sizeof($record['pdf_upload']) ); ?>
<?php if ($count > 0): ?>
<?php foreach(range(0, $count - 1) as $index): ?>
<?php $image_upload = $record['image_upload'][$index]; ?>
<?php $pdf_upload = $record['pdf_upload'][$index]; ?>
<a href="<?php echo $pdf_upload['urlPath'] ?>">
<img src="<?php echo $image_upload['urlPath'] ?>" width="<?php echo $image_upload['width'] ?>" height="<?php echo $image_upload['height'] ?>" alt='' /> </a>
<?php endforeach ?>
<? endif ?>

Again, thanks Chris, this really helped me out.

Mike (GraphicLingoes)
Graphic Lingoes
www.graphiclingoes.com


Chris
Staff


Oct 13, 2009, 11:04 AM

Post #13 of 14 (2468 views)
Shortcut
Re: [GraphicLingoes] Image linked to PDF document [In reply to] Can't Post
No problem. Glad to help! :)
Chris


equinox69
User

Oct 17, 2009, 6:08 PM

Post #14 of 14 (2432 views)
Shortcut
Re: [kcmedia] Image linked to PDF document [In reply to] Can't Post
A suggestion to clarify this challenge, especially for not-as-techie users as myself would be the following.

Modify the default instructions for the uploader to state that thumbnails will only be created when graphic files are uploaded (png, gif and jpg) and that thumbnails will not be created when video, flash or pdf files are uploaded. If the user wants thumbnails for videos and/or pdf files then they need to create a separate image for those or a link to a standard button for them, or something similar.

A little bit of clarification there would help a lot of users, especially newer ones just getting used to this great product.