Quote from: JBCreative at Jul 31, 2008, 10:13 PM
MaxiGallery I have installed, and working, but don’t know java script well enough to add description fields to the images.
You don’t need to know javascript to add custom fields to MaxiGallery images. Or that’s not exactly true, it depends on the display style that you choose to use.
But to add a custom field in MaxiGallery is pretty simple:
1. First add &customFields=`testfield,anotherfield` to your snippet call to add two new fields.
2. Second, open up /assets/snippets/maxigallery/templates/managepicturetpl.html template and create new chunk with that content called "mg_managepicturetpl"
3. In that template, you see the definitions for the picture management field, eg. description field:
[+maxigallery.strings.description+]:
<textarea name="[+maxigallery.fieldnames.description+]" rows="4" cols="40" onKeyDown="document.editform.[+maxigallery.fieldnames.modified+].value=’yes’">[+maxigallery.picture.descr:htmlent+]</textarea>
Duplicate that for the two new fields that you did and place them to the template, for example after the description field. In the example below, I have hardcoded the field descriptions to the template. If you are building multi-language site, you could use the [+maxigallery.strings...+] array and add the translation for the string to the MaxiGallery language file:
My testfield:
<textarea name="[+maxigallery.fieldnames.testfield+]" rows="4" cols="40" onKeyDown="document.editform.[+maxigallery.fieldnames.modified+].value=’yes’">[+maxigallery.picture.testfield:htmlent+]</textarea>
My another field:
<textarea name="[+maxigallery.fieldnames.anotherfield+]" rows="4" cols="40" onKeyDown="document.editform.[+maxigallery.fieldnames.modified+].value=’yes’">[+maxigallery.picture.anotherfield:htmlent+]</textarea>
4. Now, make your MaxiGallery use this new custom template by adding following to your snippet call &managePictureTpl=`mg_managepicturetpl`
5. If you now go to the picture management, you see the two new custom fields that you created and can modify their content, but the content is not shown in the gallery view side yet. For that you need to create a custom templates to show your new fields. The new fields now has placeholders in &galleryPictureTpl and &pictureTpl what are [+maxigallery.picture.testfield+] and [+maxigallery.picture.anotherfield+], so they are just like all the other fields.
6. To get the new fields showing in normal picture view mode, open up /assets/snippets/maxigallery/templates/picturetpl.html file and create a new chunk with that content called "mg_picturetpl". If you are using embedded view mode, you can skip this and go straight to step 10.
7. In that template you see various places where [+maxigallery.picture.title+] or [+maxigallery.picture.description+] placeholders are used. To get your new fields showing also, add the [+maxigallery.picture.testfield+] and [+maxigallery.picture.anotherfield+] placeholders to relevant places. The title and description what are shown in the picture view page are in the bottom of the template. The top ones are for various different ways to show the big image. If you don’t have the big image enabled, you only need to modify the bottom of the template.
8. Now, make your MaxiGallery use this new custom template by adding following to your snippet call &pictureTpl=`mg_picturetpl`
9. If you now go to your gallery and view a single picture, you will see the content from your custom fields.
10. To get the new fields showing in embedded picture view mode and/or in gallery thumbnail view, open up /assets/snippets/maxigallery/templates/gallerypicturetpl.html file and create a new chunk with that content called "mg_gallerypicturetpl".
11. In that template you see various places where [+maxigallery.picture.title+] or [+maxigallery.picture.description+] placeholders are used. To get your new fields showing also, add the [+maxigallery.picture.testfield+] and [+maxigallery.picture.anotherfield+] placeholders to relevant places. There are sections for various different display styles (eg. [+maxigallery.embedtype:is=`smoothgallery`:then=`.... and [+maxigallery.embedtype:is=`slimbox`:then=`.... etc), so choose the correct place. If you do not know what would be the correct place, just add your new placeholders to every place where title and description is used. The title placeholder that is in the bottom of the template is the one that is shown in the thumnail view. So if you don’t want your new custom fields to show in the thumbnail view, do not put them in the bottom of the template.
That should be it. The only case when you need to know a little bit javascript is if you are using the
Picture and thumbnails on same page tutorial from the MaxiGallery wiki. In that case you can refer to
this thread.
☆ A M B ☆
