Multiple images for events

[pminf]

Is there a way to provide multiple images (custom field - file upload) for events? Our client likes to have a image gallery for each event and unfortunately I don't have an idea how to accomplish this in CiviEvent. I thought about a custom field group with repeatable records but those are only available for contacts.

[Coleman Watts]

Simplest way might be to just grab the embed code from your flickr/tumblr/picassa/etc gallery and paste it into the event description.

[petednz]

Now Coleman's idea sounds really smart. Here is my tedious recipe.

Add a custom field for the file, and another custom field to then put the path of the file (Why? Because Views doesn't currently play nicely with the file in my experiments)

Then in a View pull in the 'event image path' and 'exclude from display' - then add a Custom text field with something like <img src="[event_image_path_8]"> (which is name of the custom field as Views sees it)

then display the View Block on the Event page(s)

In your case it sounds like you would need multiple fields and then do as a carousel or such like.

Tedious eh ;-)

[pminf]

Using flickr/tumblr/picassa might be simple but it is not an option, because the images should not be stored on third party servers. We have a strict privacy policy, which might not allow this.

Pete's solution has an important downside: file upload fields or field sets aren't repeatable for events, so I have to create dozens of it to allow multiple images. Tedious, indeed :-P

[petednz]

another late night thought

but may not be possible yet - i forget sometimes where we have got to with drupal and civi linkages

create a node for each event - add all your images to that - then either, make a view to get the node showing on the event page, or get the event links showing on the node

really can't recall if this is possible - sorry - but civi entities may get you close - or we need a 'civi event reference field' similar to the 'civi contact reference field'

[Hershel]

If your images are on a third party server, then you could perhaps use the second half of Pete's first answer--have custom text fields to enter the URL of the images.

[pminf]

@hershel: Little misunderstanding here. Images should not be saved on third party servers, only on the CiviCRM server.

[Coleman Watts]

There are a bunch of Drupal image gallery / slideshow / carousel modules. I'd suggest you pick one that you like, and use it to output a block for display on the event info page.

[petednz]

re my earlier thoughts

images for each event are loaded on a node
you have one node per event
you have a field on the node that references the civi event id - ideally an autocomplete but not that hard to just find Event ID and stick it in manually (warning - special sauce required - IRC may be a good place to ask questions and I will flag to eileen if i see any since she cooks up most of our special brews)
you make the View / carousel using standard drupal techniques (notice - special sauce maybe required so we can suck the images in to a block on the correct Event info page but as far as I can think ahead, this could be do-able without any additions to civi-views code)

would be a good addition imo

[pminf]

OK, to sum up: There is no CiviCRM-way to upload multiple images for an event. I have to go with Drupal.

Thank you for brainstorming 

[Coleman Watts]

There is no CiviCRM-way to upload multiple images for an event.

Well, to be fair, there is... the event description field is rich-text, and you can upload as many images as you want to that field.
But it won't do fancy things like a slideshow/lightbox - you'd have to get help from Drupal for that.

[pminf]

That's a really good idea. So I will upload the images in CiviCRM and do the fancy things with Drupal or a CiviCRM Hook. I'm fine with that!

One last question: Is it possible to limit the rich text editor (ckeditor) buttons for a certain custom field? The user should only be able to upload images.

Edit: Figured out the ckeditor configuration by myself:

Code: [Select]

var editor = CKEDITOR.instances['custom_17_3'];
if (editor) { editor.destroy(true); }
CKEDITOR.replace( 'custom_17_3', {
  toolbar: [
    { name: 'image', items: [ 'Image' ] }
  ],
  filebrowserImageBrowseUrl: '/ckeditor/pictures',
  filebrowserImageUploadUrl: '/ckeditor/pictures'
});

[jcm55]

I ended up doing this in Drupal.  Created a new content type with multiple file fields, and a custom node.tpl / javascript that displays the files as a slideshow.  A view displayed as a block pulls in all the related events with links to the event registration form (totally bypassing the event info page).

Check out http://bactheatre.org/shows/JamesGiantPeach2014
Or one of the other shows if you are reading this sometime later after James has closed.

[Coleman Watts]

Nice work jcm55 - if I was in the Bay Area right now I'd be buying one of those tickets
My only suggestion is that there is a bit of jumpy-ness when the poster image loads (pushing the slideshow down as it loads) - giving that image a width and height attribute would solve that.

[sonicthoughts]

FYI - if you are trying to manage / render civicrm file fields /images or external images in drupal and want to apply image styles, I found this module handy: https://www.drupal.org/project/imagecache_external . It caches images locally and apples styles.