Divide Exhibit Into Sections 'Mod'

LeslieOA / 2009-09-22 20:48:44   

Hey everyone.

I didn't get the opportunity to respond to the original thread before it went south, so I created this one instead (hope it's appreciated).

First, a few disclaimers: -

* This is NOT a plugin (it's a hack)
* FTP, MySQL (e.g. phpMyAdmin), CSS, JavaScript, PHP and XHTML knowledge is required

If you're not comfortable accessing and/or editing any of the above, then I wouldn't advise following this guide (your site WILL explode, the Internet will collapse and baby kittens will die... Seriously).

This hack increases the amount of text you can use for image titles and captions in exhibits (screenshot), allowing you to "divide" an exhibit.

Before starting, please backup your sites MySQL database and FTP/SSH Indexhibit files...

------------------------------------------------------------------------------------------------------------------------------------------------------

1. MySQL database edits

Log into your Indexhibit installations MySQL database (e.g. phpMyAdmin).

Open the table 'ndxz_media'.
You'll need to edit the type values for 'media_title' and 'media_caption' (screenshot).

By default, 'media_title' is 'varchar(255)' and 'media_caption' is 'tinytext'.
Change them both to 'LONGTEXT' (screenshot). Save your changes.

------------------------------------------------------------------------------------------------------------------------------------------------------

2a. Indexhibit configuration files

Now, log into your FTP (or local LAMP/WAMP server).

Open '/ndxz-studio/module/exhibits/index.php' with your favourite text/code editor.
We'll be changing lines 508-510 (screenshot). Comment out/remove lines 508, 509 and 510 and replace with the following: -

  1. $rs['media_title'], "id='media_title' maxlength='2048'", 'text');
  2. $body .= "<label>Image Caption</label>";
  3. $body .= "<textarea name='media_caption' id='media_caption'>" . $rs['media_caption'] . "</textarea>";

Save and upload your changes. Now your edit exhibits image editing section should look like this.

------------------------------------------------------------------------------------------------------------------------------------------------------

2b. Edit Indexhibit configs 'ndxz.exhibit-edit.js'

Now open '/ndxz-studio/asset/js/ndxz.exhibit-edit.js'.
Change line 48 to: -

  1. var caption = encodeURIComponent( $('textarea#media_caption').val() );

Save and upload your change.

------------------------------------------------------------------------------------------------------------------------------------------------------

2c. Edit Indexhibit configs 'style.css'

This last step is only cosmetic (for those of you who can manually resize your textareas, you can stop here).

Open '/ndxz-studio/asset/css/style.css' and add the following CSS styles to the bottom of this file: -

  1. #media_title, #media_caption { width: 500px; }
  2. #media_caption { height: 200px;}
  3.  

Save and upload your changes.

------------------------------------------------------------------------------------------------------------------------------------------------------

3. Win at life!

...well, maybe not life ;-).

You should find you now have the ability "divide" your
exhibit (screenshot).

Switch to the "No Thumbs W Captions" exhibition format for a clearer example of how you can use this
(this temporary live demo may also help).

Now would be a good time to create a new exhibition format (e.g. remove content, add JS/jQuery show/hide/slide effects).
Study the pre-packaged exhibit formats by visiting /ndxz-studio/site/plugin via FTP/SSH.

------------------------------------------------------------------------------------------------------------------------------------------------------

I'll keep an eye on this thread and respond only to relevant questions posted by people who have read the forum rules.

Comments, corrections and queries are more then welcome :-)

If any of the above (and hopefully, the following) has helped you in any way, support this project.
It just makes sense.

Peace and love.


Edit (24/09/2009): - Changed updated 'media_title' and 'media_caption' values from BLOG to LONGTEXT

Vaska A / 2009-09-22 20:59:43   

It's just text...why change them to BLOB? Maybe longtext would be better?

This 'hack' will be compatible in the future...although you may end up needing to make adjustments in exhibit formats. But the database contents will still be usable.

It's a quality hack...

;)

arsondpi / 2009-09-22 21:19:29   

..hmm! √úber nice. Thank you sir.

pisosse / 2009-09-23 09:14:31   

the troll don't know what to say....

...but NICE WORK CHAP!

cruz / 2009-09-23 13:23:01   

lovely ;) thank you leslie!

mrmister / 2009-10-14 17:24:56   

I wonder if we could add breakline/paragraph processing to the caption's text area, in the same way the main text area does.... So there would be no need for adding html to make new lines.

southafrica / 2009-10-15 20:32:54   

Firstly, thank you mate. This is awesome...

I have followed your instructions three times, creating a fresh install each time and when adding/editing Captions on my images I get returned 'null' each time.

I thought this was a database issue but the tables are definately set to LONGTEXT.

Any ideas?

Best,
Daniel

LeslieOA / 2009-10-15 23:24:46   

@mrmister
I think you can do this in your exhibition formats (I'm sure I've seen/hacked it).
Will consider trying this again. Let us know your progress :-)

@southafrica: - Link to where you've got this partially up and running?

As this is quite hacky, the only diagnostics I can think of are: -
* What exhibition format are you testing this with?
* Have you double checked you've updated 'ndxz.exhibit-edit.js' on step 2b?

Peace.

southafrica / 2009-10-16 18:51:58   

Hi Leslie,

I have not uploaded it. I'm testing it on MAMP with MYSQL 5 and PHP 5.

I've re-done it a few times and followed your instructions without error paying close attention to the text formatting. I still get a null value when I enter a caption under an image.

The exhibition format I'm testing is No Thumbs W Captions but even if I change it the Caption is still null. The Image Title works though which is interesting.

southafrica / 2009-10-16 18:53:46   

Leslie, I managed to fix it. There is a typo here:

$rs['media_title'], "id='media_title' maxlength='2048'", 'text');

should be:

$rs['media_title'], "id='media_title' maxlength='2048'", 'textarea');

southafrica / 2009-10-16 18:53:58   

Thanks again.

LeslieOA / 2009-10-16 19:18:26   

@southafrica: - No, that's no typo, unless you meant you made a typo ;-).

I assumed people would want to keep the media_title as a standard single line text box.
The <textarea> for the media_caption is created/hacked manually ($body) right after it.

Irrespective, glad it's worked for you...

...and now you mention it, my updated information on the last line reads 'BLOG' and not 'BLOB' :-/.
Would fix that now but reformatting the code in the post is a bit of a nightmare. Will attempt a little later.

Peace.

Rowan_L / 2009-10-18 01:09:52   

It looked like it was going very well,and I'd followed your instructions carefully, but I ended up with the same problem as Daniel/southafrica - a 'null' in the caption area.
And, his solution didn't work for me either (though I'm using a non-standard exhibit format called 'Linkcursiv Muller' which I'm happy with).
What did work (luckily because I'm completely new to this and wouldn't have a clue how else to fix it!) was changing *just* the js file according to the instructions that kaoz3000 gave here.:

in ndxz-studio/asset/js/ndxz.exhibit-edit.js delete the "input" in line 48:
var caption = encodeURIComponent( $('input#media_caption').val() );
to:
var caption = encodeURIComponent( $('#media_caption').val() );

Thanks to all - I was finding it incredibly restrictive being limited to just 35 characters, and am glad to find the fix was within my meagre abilities!

LeslieOA / 2009-10-18 01:51:15   

@Rowan_L: - Just the JS file? Cool!

@Vaska/'braintrust': - Could you confirm this as an addition/substitute? Saw kaoz3000'spost after I hacked this up but never tested it.

Good work peeps :-D

LeslieOA / 2009-10-24 11:10:31   

@ilferroud: - That's because there should be no need for a "work arounds". Just follow the guide through (even go over it twice if you need to).

Post a link to where you're testing this so I/we can help.
Peace.

ezeluppi / 2009-10-30 17:50:12   

Hello World :)
Could this code be adapted to make the main title of an exhibit longer? (it only allows 35 characters).
THANKS!!!!!!

ezeluppi / 2009-10-30 18:08:40   

I wanted to include a "NEW!" tag next to some elements in my list with an inline style.
Something like this:

SECTION TITLE
Name of Project 4 [NEW!]
Name of Project 3
Name of Project 2
Name of Project 1

  1. To do this, i tried to include an inline style in the title, but as it only allows 35 characters i couldn't include this code
  2. < span style="font-weight:bold; color:#F00;">NEW! < /span>
  3. in that place.

Any solution???

jesshami / 2009-10-31 04:52:25   

Thank you Leslie! This is amazing.

tabarez / 2010-01-24 10:58:48   

hello I have a question:
I'd like to customize my main menu and put a line above some title sections (therefore not above all of them).

I thought If somehow I could allow a bit of html in the section title caption I could add something like
<img src="line.gif" width="40" height="1" />
</ br>name of the section

could your hack be also used for this purpose, even with some little changes?

richardn / 2010-02-04 02:31:17   

Hmm, I'm a beginner, so perhaps I shouldn't have tried this...

I thought I was following everything to the letter, but now when I try access ndxz-studio I get the following error message:

Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /var/www/vhosts/richardnicholson.com/httpdocs/indexhibit/ndxz-studio/module/exhibits/index.php on line 508

My test site

Any idea what I did wrong? (I tried twice, following the instructions very carefully, copying and pasting into TextWrangler, uploading with Transmit)

Richard

richardn / 2010-02-04 02:35:10   

Here are the 3 lines (508-510) in my edited index.php:

  1.             $rs['media_title'], "id='media_title' maxlength='2048'", 'text');
  2. ¬†¬†¬†¬†¬†¬†¬†¬†$body¬†.=¬†"<label>Image¬†Caption</label>"; 
  3.             $body .= "<textarea name='media_caption' id='media_caption'>" . $rs['media_caption'] . "</textarea>";
richardn / 2010-02-04 11:53:34   

Any ideas?

I briefly uploaded the original index.php just to sure I hadn't broken anything, and all is fine; I can access my back end. Tried once again to edit lines 508 to 510 of the file, and again get the 'T_CONSTANT_ENCAPSED_STRING' error when I try to access the backend. I've checked my database and media_title and media_caption have successfully been updated to 'longtext'.

richardn / 2010-02-04 12:14:53   

screengrab of my edited index.php in TextWrangler

richardn / 2010-02-04 15:57:37   

Worreid that my problem might have been due to other modifications I've made whilst testing out indexhibit, I just did a clean install of indexhibit (new database, new folder in root), and immediately followed Leslie's instructions at the top of this thread. Changed media_title and media_caption to LONGTEXT. Edited lines 508-510 of index.php by pasting in Leslie's code. Uploaded edited index.php. Same problem when I try to access /ndxz-studio:

Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /var/www/vhosts/richardnicholson.com/httpdocs/indexhibit2/ndxz-studio/module/exhibits/index.php on line 508

My site (clean install)

Please, can someone help? Leslie?

LeslieOA / 2010-02-04 17:30:27   

@richardn: - Heya. Could you create and populate an example gallery/exhibit so I can see the error live?

richardn / 2010-02-04 17:36:35   

Hi Leslie. The problem is that as soon as I complete your section 2a (i.e. FTP the modified index.php file), I can no longer get into my back end (/ndxz-studio) to make a new gallery/exhibit. I get the 'T_CONSTANT_ENCAPSED_STRING' error message instead.

LeslieOA / 2010-02-04 18:03:21   

Here's a copy of the edited index.php file. Same one used in the original posts demo.

Upload it in-place of your demo sites original. If this works fine then continue with the guide.
Please, let me know if you're still getting errors.

Peace.

richardn / 2010-02-04 18:16:58   

Hi Leslie. Many, many thanks. It works! I can now get into the backend. I'm looking at my file and your file, side-by-side in TextWrangler, and I can't see a difference - but there must be one somewhere. I'll now complete your guide and see if I can get it all up and running.

LeslieOA / 2010-02-04 18:28:27   

Excellent! Not a problem (and thanks for keeping me posted).

richardn / 2010-02-04 18:31:51   

Oh dear! I'm not quite there yet. I've completed your guide, and I've managed to input long titles and captions, but when I view the page, the caption is rendered as ':null'. Here's

richardn / 2010-02-04 18:32:26   

Sorry. Here's the page

richardn / 2010-02-04 18:57:24   

Yes, all is not right. The backend has become buggy. I can't edit the thumbnails of that exhibit I just created (I click on 'edit' but nothing happen). And when I try to create a new exhibit, I can browse images, but when I click 'upload' no thumbnails appear.

Could I have broken something by putting too much text in the caption area? I inserted several fat paragraphs from a Lorem Ipsum generator.

richardn / 2010-02-04 21:29:17   

Well, 3 paragraphs would have been about 300 words / 2000 characters. Could that have broken things? Let me see if I can clean up my database. If it's not that, then I must be doing something wrong with TextWrangler when I edit the files - but I've been using TextWrangler up until now without problem.

richardn / 2010-02-04 22:17:51   

Deleted and re-created database, reinstalled indexhibit, followed instructions in this thread. Backend is still not working right (can't upload images, can't select image sizes etc). Hmm, I'm trying to do 2 installs on my single hosting account. Maybe that's not possible (I've set up separate databases for each install, and each install is in a different folder in my root folder). I think I'm making a royal mess. I'll delete this second install and try to fix up my original one.

richardn / 2010-02-04 22:57:28   

Deleted the second install / database. Back to my original install. Leslie's index.php allows me to input titles and captions longer than 35 characters, but when I view the exhibit the captions are rendered as 'null' (not huge captions, approx 100 characters). When I modify and upload the js and css files the backend goes weird. I'm no longer able to change exhibition format or move thumbnails. I had upgraded jQuery to fix a problem with expanding menus, so I've now downgraded in case that was the problem - but the problem persists. Leslie, any chance you could send the js and css files my way? My only thought now is I'm mangling the files with TextWrangler.

richardn / 2010-02-04 23:26:31   

I've made some progress with the test exhibit. If you look at the page I think it explains my steps. Changing line 48 of the javascript from your version to kaoz3000's version (as posted by Rowan), seems to fix things (but I need to test is some more). At the moment the backend is functioning correctly again, and the captions are being properly rendered (i.e. not 'null').

LeslieOA / 2010-02-04 23:34:17   

Hmmmm... just checked and there's nothing there (did you remove it all?).

TBH, I originally (and intentionally) neglected to include 'drop-in' files to prevent people who were new to PHP/XHTML/etc from borking their production sites. Not out of pseudo-elitist "dev-snobbery"; honest. O:,-(

richardn / 2010-02-04 23:39:07   

Hmm. Should be something at my most recent link. I deleted the exhibit (and whole indexhibit install), that I posted further up the thread.

richardn / 2010-02-05 03:31:29   

Leslie, it's probably not significant, but your index.php has an extra line of code. Line 292:

  1. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†if ($rs['status'] == 1) { $url = BASEURL . "/index.php?" . $rs['url']; $body .= div(href($url, $url, 'target="_blank"'), 'class="txt-left"'); }
LeslieOA / 2010-02-05 03:54:18   

Yup; a non-issue (it's for this thread). I only use that Indexhibit installation to help/test ideas for forum-folk.

Just seen your tests; glad things are working for you now.

Peace/good morning.

richardn / 2010-02-05 12:35:54   

Ah, I was wondering what that URL was doing there in the backend! Now I get it - nice.

richardn / 2010-02-09 13:29:26   

Hi Leslie, I thought I'd revisit this today, as I'm so close to having it working as I want. I now have the capability of adding lots of text (including HTML) into both the image title and image caption boxes. But the input boxes are at their default sizes which makes adding long text quite tricky. For some reason the edited CSS file is not restyling the boxes.
To recap:

  1. - I've changed my databases to LONGTEXT.
  2. - I've uploaded Leslie's index.php to /modules/exhibits
  3. - Instead of Leslie's js:
  4. var caption = encodeURIComponent( $('textarea#media_caption').val() );
  5. -I've used  Kaoz3000's suggestion:
  6. var caption = encodeURIComponent( $('#media_caption').val() );
  7. - And then finally I've edited /ndxz-studio/asset/css/style.css, per Leslie's suggestion.
  1. For some reason the CSS is having no effect. If I view the indexhibit backend with Firebug, the input boxes are being styled by line 43 of the CSS:
  2. input[type="text"], input[type="password"], select, textarea { width: 240px; display: block; }

Here's a screengrab from Firebug: screengrab firebug (note that Leslie's CSS is there, but without values.

And here's a screengrab of the CSS in TextWrangler: screengrab css

Any ideas? (I'm sure it's something simple.)

(I'm after two input boxes, both 500px wide, 200px high.)

richardn / 2010-02-09 13:33:10   

[Hmm, formatting went wrong. Repost without the code tags:]

Hi Leslie, I thought I'd revisit this today, as I'm so close to having it working as I want. I now have the capability of adding lots of text (including HTML) into both the image title and image caption boxes. But the input boxes are at their default sizes which makes adding long text quite tricky. For some reason the edited CSS file is not restyling the boxes.

To recap:

- I've changed my databases to LONGTEXT.
- I've uploaded Leslie's index.php to /modules/exhibits
- Instead of Leslie's js:

var caption = encodeURIComponent( $('textarea#media_caption').val() );

-I've used Kaoz3000's suggestion:

var caption = encodeURIComponent( $('#media_caption').val() );

- And then finally I've edited /ndxz-studio/asset/css/style.css, per Leslie's suggestion.

For some reason the CSS is having no effect. If I view the indexhibit backend with Firebug, the input boxes are being styled by line 43 of the CSS:

input[type="text"], input[type="password"], select, textarea { width: 240px; display: block; }

Here's a screengrab from Firebug: screengrab firebug (note that Leslie's CSS is there, but without values.

And here's a screengrab of the CSS in TextWrangler: screengrab css

Any ideas? (I'm sure it's something simple.)

(I'm after two input boxes, both 500px wide, 200px high.)

richardn / 2010-02-11 00:33:04   

No worries, I've figured it out, and now have two big text boxes for Image Title and Image Caption.

ukuko / 2010-02-12 19:10:55   

Richard, I'd be interested to know how you eventually solved your issues. After following the steps (and tripping up at all the same points as you) I'm currently stuck with editable longer titles and captions with the following issues:

Where the title is longer than the default the caption is rendered as 'null'

Exhibit editing is not working properly - can't edit thumbnails or change exhibit preferences.

richardn / 2010-02-13 17:39:47   

Ukoko - I'm away from my computer this weekend. I'll post the details tomorrow evening. R

richardn / 2010-02-14 19:57:56   

Ok Ukoko.

Back at my computer. Leslie's step 1 is good. After that it didn't work for me. Try this:

2a. Change lines 507-510 to:

        $body .= "Image Title";
        $body .= "" . $rs['media_title'] . "";
        $body .= "Image Caption";
        $body .= "" . $rs['media_caption'] . "";

richardn / 2010-02-14 20:06:39   

Hmm - can't get these code tags to work. I'll try again. (Delete the spaces after the '

richardn / 2010-02-14 20:08:08   

Grrrr

Hmm - can't get these code tags to work. I'll try again. (Delete the spaces after the '< ' signs.)

2a. Change lines 507-510 to:

(507) $body .= "< label>Image Title";
(508) $body .= "< textarea name='media_title' id='media_title'>" . $rs['media_title'] . "";
(509) $body .= "< label>Image Caption";
(510) $body .= "< textarea name='media_caption' id='media_caption'>" . $rs['media_caption'] . "";

2b. Change lines 47 and 48 to:

(47) var title = encodeURIComponent( $('#media_title').val() );
(48) var caption = encodeURIComponent( $('#media_caption').val() );

2c. Add these two lines to the end of the CSS file:

textarea#media_title { width: 500px; height: 100px; }
textarea#media_caption { width: 500px; height: 100px; }

That's it.

Let me know if it works for you.

R

richardn / 2010-02-15 14:45:46   

One last adjustment.

From line 256 of files.php in /ndxz-studio/module/exhibits delete:

title='$img[media_title]'

(As discussed in this thread)

This thread has been closed, thank you.