UDT to easily insert resized clickable images (floated) with caption into pages.

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Wishbone
Power Poster
Power Poster
Posts: 1369
Joined: Tue Dec 23, 2008 8:39 pm

UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Wishbone »

All my clients seem to hate to resize images and create smaller versions to display and larger versions to view when clicked. Not to mention placing them in tinyMCE, and selecting the right style to float it left or right and set the margins.. Now they want to make it clickable, and add captions.. There's no way the average client will be able to do that consistently.

I created a UDT that will do all this. Example: http://www.thefcff.com/news/6/61/Rumble ... oseland-48

Usage of the UDT (how it appears in tinyMCE):

Code: Select all

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis sollicitudin leo,
ut vehicula ante laoreet sit amet. Sed luctus nisi eget dolor ornare eget semper nisl rhoncus.

{image file="2010/glena.jpg" title="Glena Avila" side="left"}

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Pretty self explanatory. The path to the file is relative to where ever you set it in the UDT. The user uploads the file (full-size, right off the camera if they like), to the the directory.. In my case it's /uploads/images/news/2010/glena.jpg. I set my relative path root to be /uploads/images/news

Here's the UDT (named image)

Code: Select all

// Settings

$small_size = 200;
$large_size = 640;
$path = 'uploads/images/news';

// Get Params

$image = $path . '/' . $params['file'];
$title = $params['title'];
$side= $params['side'];

// Get Name of small file (*_sm.jpg)

preg_match('/^(.*)(\..*)$/', $image, $matches);
$small_image = $matches[1] . '_sm.jpg';

// If the small file already exists, we're done with the heavy processing.

if (!file_exists($small_image)) {
  list($width, $height) = getimagesize($image);

// Get new sizes

  $img = imagecreatefromjpeg($image);
  $imgratio=$width/$height;
  if ($imgratio > 1) {
    $large_width = $large_size;
    $large_height = $large_size / $imgratio;
    $small_width = $small_size;
    $small_height = $small_size / $imgratio;
  } else {
    $large_height = $large_size;
    $large_width = $large_size * $imgratio;
    $small_height = $small_size;
    $small_width = $small_size * $imgratio;
  }

// Generate small image

  $resized_img = imagecreatetruecolor($small_width, $small_height);
  imagecopyresampled($resized_img, $img, 0, 0, 0, 0, $small_width, $small_height, $width, $height);
  imagejpeg($resized_img, $small_image);

// If large image is larger than $large_size, resize that as well
 
  if ($width > $large_size || $height > $large_size) {
    $resized_img = imagecreatetruecolor($large_width, $large_height);
    imagecopyresampled($resized_img, $img, 0, 0, 0, 0, $large_width, $large_height, $width, $height);
    imagejpeg($resized_img, $image);
  }
}

// echo the html

echo("<div class=\"news_image_$side\">\n");
echo("<a href=\"$image\" title=\"$title\" rel=\"lightbox[news]\">\n");
echo("<img src=\"$small_image\" alt=\"$title\" title=\"$title\" /><br />\n");
echo("</a>\n");
if ($title) {
  echo("<span class=\"news_image_title\">$title</span><br />\n");
}
echo("<span class=\"news_image_c2e\">(click to enlarge)</span>\n");
echo("</div>\n");
This UDT also integrates the image with lightbox when clicked, if you have it loaded. If not, when clicked, it will display the image alone.. You can change it to do whatever you like.

In a nutshell, the code sets the desired small and large maximum dimensions, and the relative path, then checks for the existence of the small file. If not, it resizes the large file to the small file, then resizes the large file to the max dimensions if it exceeds it

If the small file already exists, it doesn't do any real processing, and just displays the file, in a div (you set the float in CSS), with a caption.

There are four CSS classes that this uses:

news_image_left, news_image_right, news_image_title, and news_image_c2e (c2e="click to enlarge")

Here's how I set the styles:

Code: Select all

.news_image_left, .news_image_right {
  margin-bottom: 10px;
  text-align: center;

/* I didn't like that the image was a bit higher than the text,
    so I moved it down 3px. */

  position: relative;
  top: 3px;
}

.news_image_left {
  float: left;
  margin-right: 10px;
}

.news_image_right {
  float: right;
  margin-left: 10px;
}

.news_image_title, .news_image_c2e {
  font-size: 11px;
}

.news_image_title {
  font-style: italic;
}
That's it! There isn't any error checking, and it only works with jpg.. I tried to keep it lightweight.. I hope you like it!

Wayne
Last edited by Wishbone on Tue Jan 12, 2010 4:07 am, edited 1 time in total.
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Gregor »

Wayne,

Lovely UDT, something I've been looking for. Installed it and got it nearly working. The image, after clicking, opens in the same window without opening the lightbox. In my template I pointed to the location where I have the lightbox.js file.
http://www.uisge-beatha.eu/news/143/30/Natte-ruimte-wordt-warm.html

Any ideas?

Gregor
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Gregor »

Thanks Mark,

To me it seems rel=lightbox is there, tried two options, one with and one without [news]

Code: Select all

echo("<div class=\"news_image_$side\">\n");
echo("<a href=\"$image\" title=\"$title\" rel=\"lightbox[news]\">\n");
echo("<img src=\"$small_image\" alt=\"$title\" title=\"$title\" /><br />\n");
echo("</a>\n");
if ($title) {
  echo("<span class=\"news_image_title\">$title</span><br />\n");
}
echo("<span class=\"news_image_c2e\">(klik voor grote foto)</span>\n");
echo("</div>\n");

Code: Select all

echo("<div class=\"news_image_$side\">\n");
echo("<a href=\"$image\" title=\"$title\" rel=\"lightbox\">\n");
echo("<img src=\"$small_image\" alt=\"$title\" title=\"$title\" /><br />\n");
echo("</a>\n");
if ($title) {
  echo("<span class=\"news_image_title\">$title</span><br />\n");
}
echo("<span class=\"news_image_c2e\">(klik voor grote foto)</span>\n");
echo("</div>\n");
Or is this not the way? It works on the example from wishbone
Wishbone
Power Poster
Power Poster
Posts: 1369
Joined: Tue Dec 23, 2008 8:39 pm

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Wishbone »

Lightbox requires scriptaculous and jquery, which I don't see in your template. Here is how it is in mine:

Code: Select all

<__script__ type="text/javascript" src="javascript/prototype.js"></__script> 
<__script__ type="text/javascript" src="javascript/scriptaculous.js?load=effects,builder"></__script> 
<__script__ type="text/javascript" src="javascript/lightbox.js"></__script> 
When I load your site, I see a javascript error:

Code: Select all

Line 17:
Char 1:
Error: jquery is undefined
I use rel="lightbox[news]" for grouping purposes... This makes it so that all of these on your page will be linked and you can click on "next". You can group it anyway you want.. It's just a string identifier.
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Gregor »

I added the js files to the folder:

Code: Select all

<!-- nodig voor image UDT -->
<__script__ type="text/javascript" src="/uploads/Javascripts/prototype.js"></__script> 
<__script__ type="text/javascript" src="/uploads/Javascripts/scriptaculous.js?load=effects,builder"></__script> 
<__script__ type="text/javascript" src="/uploads/Javascripts/lightbox.js"></__script> 
IHMO they are loaded too. I also added jquery to the templates to load, however still the same no nice lightbox coming up.

Any ideas to help?

Thanks in advance!
Wishbone
Power Poster
Power Poster
Posts: 1369
Joined: Tue Dec 23, 2008 8:39 pm

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Wishbone »

I still see a javascript error, but not the same one.. The lightbox documentation says that you should load the javascript files in a particular order, of which yours is not... Try changing the order that they are loaded to the order mine is.

When I get these issues, I like to simplify... Create a test template and a test page using this template. In that template, just put the minimum needed for lightbox, and a picture to click on.. Could even use their example... Then start adding stuff back in until it stops working.
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Gregor »

Thanks for the suggestion. I looked at the orther of the js-files, they seems to be the same as on your site. I created a test page:
http://www.uisge-beatha.eu/index.php?page=test

Code: Select all

{literal}
<!-- nodig voor image UDT -->
<__script__ type="text/javascript" src="/uploads/Javascripts/prototype.js"></__script> 
<__script__ type="text/javascript" src="/uploads/Javascripts/scriptaculous.js?load=effects,builder"></__script> 
<__script__ type="text/javascript" src="/uploads/Javascripts/lightbox.js"></__script> 

<__script__ type="text/javascript" src="/uploads/Javascripts/jquery.js"></__script>
<__script__ type="text/javascript" src="/uploads/Javascripts/cycle.js"></__script>
I changed the place of the jquery, however that does not make any difference.

The errors I see, refer to Google ads. Do you see the same?

I think it is my lack of knowledge of js that I'm not able to solve this problem.

Gregor
Wishbone
Power Poster
Power Poster
Posts: 1369
Joined: Tue Dec 23, 2008 8:39 pm

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Wishbone »

I would suggest stripping your test template down to the very basics.



{stylesheet}
javascript stuff






Did you include the lightbox style information that they include in their demo?

You might want to start off with the lightbox demo html/stylesheet in a subfolder, not in CMSms. Once that works, convert it into a CMSms template. If that works, add the rest of your site.
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Gregor »

Thanks for this tip! I discovered an error in one of the js-files, because after copying the files from http://www.lokeshdhakar.com/projects/lightbox2/#download I also copied the js-files. Its working now :-)

The result can be viewed here http://www.uisge-beatha.eu/news/142/30/Bouw-overloop.html

I noticed on the server that there are new, small, images created. Since I upload my picture using cmsms I have thumb-file f.i. "thumb_Overloop-1.jpg"
Do you have a suggestion on how to change the UDT to first check if there is a thumb-file, if so, use that one, if not, create a _sm -file?

Thanks again for you help!
Gregor
Last edited by Gregor on Sat Jan 30, 2010 7:39 am, edited 1 time in total.
Wishbone
Power Poster
Power Poster
Posts: 1369
Joined: Tue Dec 23, 2008 8:39 pm

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Wishbone »

Looks Great!
Gregor wrote: I noticed on the server that there are new, small, images created. Since I upload my picture using cmsms I have thumb-file f.i. "thumb_Overloop-1.jpg"
Do you have a suggestion on how to change the UDT to first check if there is a thumb-file, if so, use that one, if not, create a _sm -file?
As long as all your thumbnails have the same naming convention, "thumb_", then you can change

Code: Select all

$small_image = $matches[1] . '_sm.jpg';
to

Code: Select all

$small_image = 'thumb_' . $matches[1] . '.jpg';
The code already checks to see if it exists, and uses it, or it creates the file. It will also resize the large image if it is too large. The first two variables in the UDT determine the sizes.
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Gregor »

Thanks for the compliment.

I think in your suggested code something goes wrong (I put some 'echo ' statements in the UDT to see where):

Code: Select all

// Settings

$small_size = 150;
$large_size = 640;
$path = 'uploads/images';

// Get Params

$image = $path . '/' . $params['file'];
echo 'image = ' . $image;
$title = $params['title'];
echo 'title= ' . $title;
$side= $params['side'];
echo 'side = ' .  $side;
// Get Name of small file (*_sm.jpg)

preg_match('/^(.*)(\..*)$/', $image, $matches);
//$small_image = $matches[1] . '_sm.jpg';
$small_image = 'thumb_' . $matches[1] . '.jpg';
echo 'image = ' . $image;
echo 'matches = ' . $matches;
echo 'small_image = ' . $small_image;

// If the small file already exists, we're done with the heavy processing.
Looking at the homepage:
image = uploads/images/uisge-beatha-front.jpg
title= Uisge Beatha onder zeil op de Oosterscheldeside = left
image = uploads/images/uisge-beatha-front.jpg
matches = Array
small_image = thumb_uploads/images/uisge-beatha-front.jpg
Warning: imagejpeg() [function.imagejpeg]: Unable to open 'thumb_uploads/images/uisge-beatha-front.jpg' for writing: Bestand of map bestaat niet in /home/efacti/public_html/uisge-beatha.eu/lib/content.functions.php(771) : eval()'d code on line 49
It places the thumb_ in front of the folder name instead of the file name. This statement, I think, causes the error:

Code: Select all

preg_match('/^(.*)(\..*)$/', $image, $matches);
I tried to figure out the expression, but....

Gregor
Wishbone
Power Poster
Power Poster
Posts: 1369
Joined: Tue Dec 23, 2008 8:39 pm

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Wishbone »

Sorry... I was being a bit lazy when I suggested that, not realizing that $small_image would have the path. In this case, we don't even need the preg_match. Try:

$small_image = dirname($image) . '/thumb_' . basename($image);

This should work. Haven't tested it out, but it will be close.
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Gregor »

This does do the trick :-) Thanks for helping to sort it out!!

Gregor
cyberman

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by cyberman »

Thanx for your trick.
wishbone wrote: Here's the UDT (named image)
But another name would be better - CMSms default install comes with a tag named image  ;) ...
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: UDT to easily insert resized clickable images (floated) with caption into pages.

Post by Gregor »

I made a minor change to check if there are thumb-files. If not, create the _sm-file otherwise use the thumb file

Code: Select all

if (!file_exists(dirname($image) . '/thumb_' . basename($image))) {

  preg_match('/^(.*)(\..*)$/', $image, $matches);
  $small_image = $matches[1] . '_sm.jpg';
  } else {

  // if thumb_ exists
  $small_image = dirname($image) . '/thumb_' . basename($image);
  }
Gregor
Locked

Return to “Tips and Tricks”