Possible Feature Request?/Neatline Exhibit

[mcarring]

We would like to have a feature in Neatline Exhibit (pop-ups on the timeline) which could zoom out to a larger version of the images in the exhibit like the images at http://images.library.amnh.org/digital/items/show/311 The image when clicked zooms out to a larger version. Are there any ideas on producing such an effect at the moment in Neatline Exhibit?

[tamielbr]

We've done something similar here, using lightbox. If this is what you're interested in we'd be glad to share our implementation. http://mapa.cultcampinas.org/fullscreen/mapa

[mcarring]

Yes, this looks like what we would like to do. Can you send the code and other details of the implementation?

[tamielbr]

Sure, i've copied @gabrielfedel who worked on this and he should post soon.

[gabrielfedel]

Hey @mcarring, we used lightbox to do this (http://lokeshdhakar.com/projects/lightbox2/)

We put the lightbox.css on plugins/Neatline/views/shared/css and the jquery-1.10.2.min.js and lightbox-2.6.min.js on plugins/Neatline/views/shared/javascripts

And on plugins/Neatline/views/shared/exhibits/item.php we add something like this: echo file_markup(get_current_record('file'),array('linkAttributes' => array('data-lightbox' => 'setimages', 'title' => $label_pic )));

where $label_pic is a label for picture =)

if you have more questions let me know

[mcarring]

The structure of the Neatline files appears to be different than earlier versions I uploaded lighbox.css and it is not appearing when I view source in the main Neatline page. Does the item.php file need to be adjusted or is there some other file that needs to be adjusted? See my Neatline file structure

[erochest]

You'll need to tell Omeka that you want it to load those files. You can do that inside the Neatline source here for the public page and here for the editor.

[mcarring]

Thanks,

Thanks for the locations for the .js files. Where do I put the lightbox.css file?

Mary

[mcarring]

I put the js files in the location suggested in Assets.php adn got an Omeka encountered an error message stating that queue_js_file('dist/jquery-1.11.0.min.js'); could not be found but this file is in the same location as the dist/neatline-public file on the server. Since Omeka encountered an error, it did not display any of the Neatline timelines. Once I reverted to the original code, the error disappeared and Timelines could be displayed again. Any ideas?

/**

• Include static files for the exhibit edit form. */ function nl_queueEditForm() { queue_css_file('dist/exhibit-form'); queue_js_file('dist/ckeditor/ckeditor'); queue_js_file('dist/edit-form'); }

/**

• Include static files for the exhibit. *

• @param NeatlineExhibit The exhibit. */ function nl_queueNeatlinePublic($exhibit) {

  nl_queueGoogleMapsApi();

  queue_css_file('dist/neatline-public'); queue_js_file('dist/neatline-public'); queue_js_file('dist/jquery-1.11.0.min.js'); queue_js_file('dist/lightbox.min.js');

  fire_plugin_hook('neatline_public_static', array( 'exhibit' => $exhibit ));

}

/**

• Include static files for the editor. *

• @param NeatlineExhibit The exhibit. */ function nl_queueNeatlineEditor($exhibit) {

  nl_queueGoogleMapsApi();

  queue_css_file('dist/neatline-editor'); queue_js_file('dist/neatline-editor'); queue_js_file('dist/ckeditor/ckeditor'); queue_js_file('dist/jquery-1.11.0.min.js'); queue_js_file('dist/lightbox.min.js');

  fire_plugin_hook('neatline_editor_static', array( 'exhibit' => $exhibit ));

}

[erochest]

Try including the file names without the .js extensions. Also, jquery should be loaded --- both Omeka and Neatline use it --- so you may not need to include it.

The CSS can be put in a similar location. Look at the line that begins queue_css_file for an example.

[davidmcclure]

Hey @mcarring,

Instead of making code changes to the Neatline core (which will be overwritten when you upgrade the plugin), I'd recommend putting these files in a custom theme for the exhibit. Here's a big post that goes into lots of detail about how to do this, but the gist of it is this:

1. In the Omeka theme for the site (Seasons, Thanks Roy - whichever you're using), create a directory at [omeka-theme]/neatline/exhibits/themes/[exhibit-slug], where exhibit-slug is the "URL Slug" for the exhibit you're working on. (This can be edited in the "Exhibit Settings" form for the exhibit.)
2. In that directory, create two files - style.css and script.js. Paste the lightbox CSS into style.css, and the actual Javascript library into script.js. If you need to, you can also put any sort of initialization code at the end of script.js (not sure how lightbox works).

And that should be it - Neatline will automatically detect the presence of the exhibit theme and load the two files.

-David

[mcarring]

Just to clarify the pathway I'm using for the files on the server.

/omeka/plugins/Neatline/views/shared/javascripts/dist

[mcarring]

David,

Thanks for your post Putting the files into a custom theme would be much better than making changes to the Neatline core especially if core gets overwritten!

[davidmcclure]

Let me know if it works, @mcarring.

[mcarring]

David,

The solution referred to below worked. The css file and the javascript file are loading. I will have to customize a show.php and an item.php to get the lightbox working. I'll post back if I get this working. I'll be working on it next Monday, July 21st.

David McClure Wrote: Instead of making code changes to the Neatline core (which will be overwritten when you upgrade the plugin), I'd recommend putting these files in a custom theme for the exhibit. Here's a big post that goes into lots of detail about how to do this, but the gist of it is this:

In the Omeka theme for the site (Seasons, Thanks Roy - whichever you're using), create a directory at [omeka-theme]/neatline/exhibits/themes/[exhibit-slug], where exhibit-slug is the "URL Slug" for the exhibit you're working on. (This can be edited in the "Exhibit Settings" form for the exhibit.)

In that directory, create two files - style.css and script.js. Paste the lightbox CSS into style.css, and the actual Javascript library into script.js. If you need to, you can also put any sort of initialization code at the end of script.js (not sure how lightbox works).

And that should be it - Neatline will automatically detect the presence of the exhibit theme and load the two files.

-David

[waynegraham]

Accidentally deleted a post here...

David,

I used the following code at the top of the item.php file which was moved to the location you suggested at/omeka/themes/berlin/neatline/exhibits/themes/timeline

image-1 This inputs the code at the top of the Omeka item See diagram. We need lightbox to work in the event space as indicated in the graphic.

Two issues? How to put the code in the correct event space and how to get lightbox working correctly

[mcarring]

Hello,

Has anyone got any more comments on this issue? I cannot get the code to work. One major issue is that CKEditor strips

tags. I can include

tags in the item.php file Is there any php for using the images in the file item.php at the location of omeka/themes/berlin/neatline/exhibits/themes/timeline or as David suggested [omeka-theme]/neatline/exhibits/themes/[exhibit-slug], where exhibit-slug is the "URL Slug" for the exhibit

waynegraham commented 10 years ago

I'm not sure Omeka exposes the CKEditor options, but look at the HTML filtering in the Admin panel (Settings, Security, HTML Filtering). Audio doesn't appear to be enabled by default.

mcarring commented 10 years ago

Wayne, With the div element allowed in the Admin panel (Settings, Security, HTML Filtering, the CKEditor still strips the div tag

waynegraham commented 10 years ago

@mcarring you may need to bump that part to the Omeka forums...

mcarring commented 10 years ago

Wayne,

Thanks!

tarsierspectral commented 10 years ago

Did you get this figured out? I am trying to do the same thing.

davidmcclure commented 10 years ago

Hi folks,

This actually is a Neatline problem, not an Omeka problem - the CKEditor instances on the exhibit and record forms don't apply the Omeka tag whitelist. And, the default tag filtering in CKEditor is way too restrictive, and it's easy to accidentally scrub out custom markup that was previously saved. It's possible to trick CKEditor into allowing arbitrary markup by entering it into the "Source," mode, and then closing the editor or saving the exhibit without toggling back to the default HTML preview mode. Then, though, if you open up the same record in the future, CKEditor will immediately filter the HTML and remove the tags that had previously been saved. If you don't notice this, and save the record, you can lose work. This happened on a project I worked on recently, and it's a nasty problem.

@waynegraham, on the develop brach, I currently have tag filtering completely disabled on the record forms, although I believe it's still enabled in the exhibit form. I think we should probably just disable it across the board, or wire it up with the Omeka tag whitelist.

tarsierspectral commented 10 years ago

Is there another way to accomplish what was asked for in the original post?

tarsierspectral commented 10 years ago

@tamielbr, I got it working but how do you get multiple images into Lightbox? Are they coming from Omeka?

tamielbr commented 10 years ago

@tarsierspectral Yes, they do come from a query in Omeka.

tarsierspectral commented 10 years ago

@tamielbr thanks got that working!

tamielbr commented 10 years ago

@tarsierspectral Cheers! @gabrielfedel said he'd pop in later in the week and help as well. When you have your site up, it would be great if you could share a link. I think we need more examples of Neatine at work ;)

tarsierspectral commented 10 years ago

@tamielbr I got it all working except that I can't figure out how to get the regular thumbnails and not the square ones. I will share once I have it done

tarsierspectral commented 10 years ago

@tamielbr How do you get the thumbnails aligned side by side on this site http://mapa.cultcampinas.org/fullscreen/roteiro-centro? Mine are showing one after the other

mcarring commented 10 years ago

Hello,

I haven't worked on this project for a while but am starting again next week. I could not get the Lightbox feature working but I was able to increase the image size without distortion by changing the CSS style of the pop-up.

mcarring commented 10 years ago

How about using another editor such as TinyMCe at http://www.tinymce.com/ Has Netaline tested other HTML editors.

waynegraham commented 10 years ago

@mcarring is there something in TinyMCe that you want that's not in CKeditor?

tarsierspectral commented 9 years ago

I am trying to figure out how to add bootstrap modal to my site. Would you have any tips on how to do that? I am unable to make the modal pop up on page load. With the modal code, I only get the modal and nothing else (no Neatline exhibit loads).
Any help would be greatly appreciated.

tamielbr commented 9 years ago

Thanks for sharing, looks great. I have not worked with bootstrap, but i would be interested to know if you get it to work. I noticed this Omeka+Bootstrap theme, which might be useful https://github.com/Daniel-KM/omeka-bootstrap

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[waynegraham]

I'm not sure Omeka exposes the CKEditor options, but look at the HTML filtering in the Admin panel (Settings, Security, HTML Filtering). Audio doesn't appear to be enabled by default.

[mcarring]

Wayne, With the div element allowed in the Admin panel (Settings, Security, HTML Filtering, the CKEditor still strips the div tag

[waynegraham]

@mcarring you may need to bump that part to the Omeka forums...

[mcarring]

Wayne,

Thanks!

[tarsierspectral]

Did you get this figured out? I am trying to do the same thing.

[davidmcclure]

Hi folks,

This actually is a Neatline problem, not an Omeka problem - the CKEditor instances on the exhibit and record forms don't apply the Omeka tag whitelist. And, the default tag filtering in CKEditor is way too restrictive, and it's easy to accidentally scrub out custom markup that was previously saved. It's possible to trick CKEditor into allowing arbitrary markup by entering it into the "Source," mode, and then closing the editor or saving the exhibit without toggling back to the default HTML preview mode. Then, though, if you open up the same record in the future, CKEditor will immediately filter the HTML and remove the tags that had previously been saved. If you don't notice this, and save the record, you can lose work. This happened on a project I worked on recently, and it's a nasty problem.

@waynegraham, on the develop brach, I currently have tag filtering completely disabled on the record forms, although I believe it's still enabled in the exhibit form. I think we should probably just disable it across the board, or wire it up with the Omeka tag whitelist.

[tarsierspectral]

Is there another way to accomplish what was asked for in the original post?

[tarsierspectral]

@tamielbr, I got it working but how do you get multiple images into Lightbox? Are they coming from Omeka?

[tamielbr]

@tarsierspectral Yes, they do come from a query in Omeka.

[tarsierspectral]

@tamielbr thanks got that working!

[tamielbr]

@tarsierspectral Cheers! @gabrielfedel said he'd pop in later in the week and help as well. When you have your site up, it would be great if you could share a link. I think we need more examples of Neatine at work ;)

[tarsierspectral]

@tamielbr I got it all working except that I can't figure out how to get the regular thumbnails and not the square ones. I will share once I have it done

[tarsierspectral]

@tamielbr How do you get the thumbnails aligned side by side on this site http://mapa.cultcampinas.org/fullscreen/roteiro-centro? Mine are showing one after the other

[mcarring]

Hello,

I haven't worked on this project for a while but am starting again next week. I could not get the Lightbox feature working but I was able to increase the image size without distortion by changing the CSS style of the pop-up.

[mcarring]

How about using another editor such as TinyMCe at http://www.tinymce.com/ Has Netaline tested other HTML editors.

[waynegraham]

@mcarring is there something in TinyMCe that you want that's not in CKeditor?

[tarsierspectral]

I am trying to figure out how to add bootstrap modal to my site. Would you have any tips on how to do that? I am unable to make the modal pop up on page load. With the modal code, I only get the modal and nothing else (no Neatline exhibit loads).
Any help would be greatly appreciated.

[tamielbr]

Thanks for sharing, looks great. I have not worked with bootstrap, but i would be interested to know if you get it to work. I noticed this Omeka+Bootstrap theme, which might be useful https://github.com/Daniel-KM/omeka-bootstrap