tableless cpmfetch / using div instead tableless cpmfetch / using div instead
 

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Main Menu

tableless cpmfetch / using div instead

Started by ds, March 15, 2008, 11:03:45 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

ds

Hi all,

I have modified cpmfetch to display in divs instead of tables and I thought I would share what I have done.
Any code I am providing worked for me on my site. I merely want to share with you how I did it. I will not be offering any support and use it at your own risk.

First off:

How do I use cpmfetch on my site?

I display the thumbnail of the last 4 modified albums from a specific category on a page. IE, I am using something along these lines:

$objCpm->cpm_viewLastUpdatedAlbumsFrom("cat=5:album=0",1,4, $options),

If you want to use the cpmfetch differently you will probably have to edit the code i posted.


Why modify cpmfetch to remove the tables?

The problem I had was that thumbnails are created to fit into a box of a certain size, so some thumbnails were different sizes, depending on the width of the image. So the display looked a little messy as thumbs were different sizes. I didn't want to distort the thumbs, so defining width & height was out of the question.

My solution:

Instead of creating a table that displays images using the <img > tags I wanted to use divs of a defined size and use the thumbs as a centered background on those divs, so they would all be the same size (cropped and centered so to speak).


What did I have to edit?

I only had to edit 2 files.

- cpmfetch.php
- mystylesheet.css


The Code:

The code produces something along these lines:

<div> <!-- surrounding div -->

<!-- begin loop for each image -->

<a href=""> <!-- link of image -->

<!-- the div containing the image as background -->
<div class="cpmfetch_img_div" style="background:url(HTTP://WWW.LINKTOTHUMBNAIL.COM/THUMB.JPG) center no-repeat;" ></div>

</a> <!-- close the link -->

<!-- end loop for each image -->

</div> <!-- end surrounding div -->





So you will have to edit your css and define a class ... something like:

.cpmfetch_img_div {
width: 120px;
height: 90px;
}


Remember, if you can also define a class for the outer div and style it here.



Now you need to change the cpmfetch.php file

Here is my whole cpmfetch file. Make sure you back yours up before overwriting it. Please see the attachment.



I hope this is somewhat helpful for anyone out there. :)

radmofo

Please give me some negative Karma. :)

ds

#2
Quote from: radmofo on March 26, 2008, 01:20:21 PM
Hey your cpmfetch.txt file is empty.

Oh sorry. SMF didn't like it.

[Replaced link with downloadable zip file in first post containing cpmfetch.txt]