• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 22 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Tue Jan 12, 2010 3:54 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Dec 23, 2008 8:39 pm
Posts: 1369
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:
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:
// 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:
.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

_________________
http://facebook.com/wishbonef1
http://youtube.com/wishbonef1


Last edited by Wishbone on Tue Jan 12, 2010 4:07 am, edited 1 time in total.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Thu Jan 28, 2010 10:20 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1790
Location: The Netherlands
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Thu Jan 28, 2010 10:43 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1790
Location: The Netherlands
Thanks Mark,

To me it seems rel=lightbox is there, tried two options, one with and one without [news]
Code:
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:
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Thu Jan 28, 2010 11:32 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Dec 23, 2008 8:39 pm
Posts: 1369
Lightbox requires scriptaculous and jquery, which I don't see in your template. Here is how it is in mine:
Code:
<__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:
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.

_________________
http://facebook.com/wishbonef1
http://youtube.com/wishbonef1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Fri Jan 29, 2010 7:14 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1790
Location: The Netherlands
I added the js files to the folder:
Code:
<!-- 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!


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Fri Jan 29, 2010 3:41 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Dec 23, 2008 8:39 pm
Posts: 1369
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.

_________________
http://facebook.com/wishbonef1
http://youtube.com/wishbonef1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Fri Jan 29, 2010 6:09 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1790
Location: The Netherlands
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:
{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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Fri Jan 29, 2010 9:29 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Dec 23, 2008 8:39 pm
Posts: 1369
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.

_________________
http://facebook.com/wishbonef1
http://youtube.com/wishbonef1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Sat Jan 30, 2010 7:07 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1790
Location: The Netherlands
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.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Sat Jan 30, 2010 8:32 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Dec 23, 2008 8:39 pm
Posts: 1369
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:
$small_image = $matches[1] . '_sm.jpg';


to

Code:
$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.

_________________
http://facebook.com/wishbonef1
http://youtube.com/wishbonef1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Sun Jan 31, 2010 7:19 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1790
Location: The Netherlands
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:
// 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:
Quote:
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:
preg_match('/^(.*)(\..*)$/', $image, $matches);


I tried to figure out the expression, but....

Gregor


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Mon Feb 01, 2010 12:31 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Dec 23, 2008 8:39 pm
Posts: 1369
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.

_________________
http://facebook.com/wishbonef1
http://youtube.com/wishbonef1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Mon Feb 01, 2010 5:09 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1790
Location: The Netherlands
This does do the trick :-) Thanks for helping to sort it out!!

Gregor


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Mon Feb 01, 2010 11:55 am 
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  ;) ...


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: UDT to easily insert resized clickable images (floated) with caption into pages.
PostPosted: Mon Feb 01, 2010 12:59 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1790
Location: The Netherlands
I made a minor change to check if there are thumb-files. If not, create the _sm-file otherwise use the thumb file

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 22 posts ]  Go to page 1, 2  Next

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting