Image linked to PDF document

14 posts by 6 authors in: Forums > CMS Builder
Last Post: October 17, 2009   (RSS)

By KCMedia - July 14, 2009

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><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

Re: [kcmedia] Image linked to PDF document

By ross - July 15, 2009

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 - Consulting
consulting@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/

Re: [ross] Image linked to PDF document

By KCMedia - July 15, 2009 - edited: August 17, 2014

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 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

Re: [kcmedia] Image linked to PDF document

By ross - July 16, 2009

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 - Consulting
consulting@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/

Re: [kcmedia] Image linked to PDF document

By gkornbluth - July 18, 2009

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.

<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 www.thecmsbcookbook.com/test3.php


<?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!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Image linked to PDF document

By KCMedia - July 20, 2009

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

Re: [kcmedia] Image linked to PDF document

By gkornbluth - July 20, 2009

Glad I was able to help.

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

Best,

Jerry
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [kcmedia] Image linked to PDF document

By GraphicLingoes - October 8, 2009

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

Re: [GraphicLingoes] Image linked to PDF document

By Chris - October 11, 2009

Hi Graphic Lingoes,

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

<?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.
All the best,
Chris