MaxiGallery: Front end user created galleries

From MODx Wiki

Jump to: navigation, search


Contents

[edit]

Purpose

This WIKI describes how to use MaxiGallery along with the NewsManager snippet to allow for front-end web-user created galleries. The steps described below are what worked for my site, so I can't guarantee that they will work for yours. I am using MODx 0.9.5 on a PHP 4.4.4 with mySQL 4.1.21 for the site. Other important version information is listed at the bottom of this posting as it relates to what snippets and versions they are.

[edit]

Important Notes

  • The site that I created has web-users that are assigned as members of the 'Editor' Web User Group, and these users are the only ones that are allowed to see the editing pages, create the pages, and edit them. This is accomplished by placing the NewsManager snippet into a page, and having it restricted to the 'Editor' Web User Group.
  • The use of a TV (template variable) to allow for the Rich Text Editing for the content portion of the NewsManager snippet. This requires modification of the default template code in the NewsManager snippet, called 'Gallerycomments' detailed below, or by creating your own form as a chunk, and then using it later.
  • Creating or duplicating your template so that the new pages that are created from the NewsManager snippet that go into the "Gallery" are created with the correct call for the chunk created above.
  • The webusers should be able to modify each others galleries. I have not tested this feature yet, but I am able to modify the content and picture items in galleries created by another user.
  • See MaxiGallery and NewsManager snippets for details on specific usage.
  • So as to not confuse you and to make it modifiable for inclusion in your code, the code fragments listed below that make reference to other pages, snippets, etc. in places where an [~id~] would normally be used, that will be referenced like this: 
    [!Ditto? &tpl=`DittoTpl` &startID=`[~56~]` &summarize=`all` &sortBy=`createdon` &sortDir=`desc`!]
  • In order to reference how the example site is laid out, here is a list of the id numbers from my site that will allow you to match up the coding:
    • Gallery Creator [56],
    • Gallery Manager [55] child of the Gallery Creator,
    • Gallery [19] main container for new galleries.
[edit]

Create the Web Users and pages needed

[edit]

Create the Web User

First, go to Security -> Web Permissions -> Create a new User Group. Call this new group 'Editors'.

Secondly, go to the Document Groups tab and create a new document group called 'Editors'.

Now go to the Web Permissions -> User/Document group links and select to add the Editors Web User Group to the Document groups this user group has access to: (Select Editors) This will create the binding for the pages that we will be creating to allow for 'Editor' access only, and as we create the pages below, you can then assign the new pages to this 'Editors' permission group.

NOTES:

  • If you already have Web Users created, then assign them to the group of 'Editors' for this to work. Otherwise, you will need to create new Web Users.
  • You can assign the pages to the appropriate group when you create them. I have mine as being assigned to the 'Editors' group (see more below).
[edit]

Create the documents needed

Create the pages needed in the MODx document tree for our snippet calls, etc. The example pages below are given unique IDs that only work in this scenario, Change the ID values to fit your case.

[edit]

Create the Gallery Page

  • Create a new document under the root of the site called 'Gallery' (ID=19).
    • General Tab setting:
      • Title, etc. anything you want,
      • Template: your main template,
      • Show in Menu: checked,
    • Page Settings Tab:
      • Container: checked (this will hold all newly created galleries),
      • Rich Text: checked,
      • Published: checked,
      • Searchable: checked,
      • Empty cache: checked.
    • Content: 
[!Ditto? &tpl=`DittoTpl` &startID=`[*id*]` &summarize=`all` &sortBy=`createdon` &sortDir=`desc`!]

The Ditto snippet is used here in order to show the results of the newly created galleries on a single page. This also allows the user to see all of the galleries in summary form and decide which one they want to view more of. The &tpl=`Dittotpl` is described below.

The Access Permissions are set to Public on this page.

[edit]

Create the Gallery Creator Page

  • Create a new document called 'Gallery Creator'. (ID=56)
    • General Tab:
      • You can fill in the title, etc. with what you want, but here are the other settings:
      • Template: Use your main template, mine is called 'global_main',
      • Menu Title: Gallery Creator,
      • Show in Menu: checked,
      • Document Parent: root
    • Page Settings Tab:
      • Container: checked (this will house the snippet call for the other portion of the NewsManager snippet).
      • Rich Text: checked,
      • Cacheable: UNCHECKED!
      • Other settings as you desire, but mine are checked for published, searchable, and empty cache.
    • Content: You can place any content here, such as directions, etc. This is also where you place the first snippet call for the NewsManager snippet, as shown: 
      [!NewsEditor? &folder=`19` &clearcache=`1` &template=`global_gallery` &formtpl=`gallerycomments` &rtcontent=`tvGalleryContent`!]

The NewsEditor portion creates the new gallery page. The &folder=`n` is the folder that is created above for the Gallery container document (mine is 19). The template, formtpl and rtcontent will be detailed below.

You will also need to put a link on this page that will direct the user to the 'Gallery Manager' [ID=55] page (detailed below) like this: 

<a href='[~55~]'>Edit your galleries here</a>

Where '55' is the page id for the Gallery Manager created below (yours may be different).

IMPORTANT! Be sure to assign this page to the Access Permissions -> Editor role at the bottom and then save the document!

Now, create another new document as a child to the Gallery Creator [56] page, since it is a container. This page will contain the other portion of the NewsManager snippet that will allow for the editing portion of the page.

[edit]

Create the Gallery Manager Page

  • Create the new document as a child of the above page, call it 'Gallery Manager' and remember the id (55 in this case).
    • General Tab:
      • Same as above, but do not check it to show in the menu.
      • Make sure that it is showing with the document parent of the 'Gallery Creator' page.
    • Page Settings Tab:
      • Container: unchecked,
      • Rich Text: checked,
      • Published: checked,
      • Empty cache: checked.
      • All other boxes are unchecked.
    • Content: Same as above as far as what you want to put on it, but with the following snippet call:
      [!NewsManager? &folder=`19` &editformid=`56` &template=`global_main` &clearcache=`1`!]

IMPORTANT! The &editformid=`n` HAS to point to the Gallery Creator page (ID=56 in this case) for this to work.

You should also put a link someplace here that links back to the Gallery Creator [56] page (the one created above), like this: 

<a href='[~56~]'>Create your galleries here</a>

IMPORTANT! Be sure to assign this page to the Access Permissions -> Editor role at the bottom and then save the document!

[edit]

Create the Template

If you are using a template for your site, just duplicate it with one modification. Since the NewsManager snippet is creating a new document via the webuser, it needs to know which template to use for the new 'Gallery' items. So, create a new template or duplicate your main one. My main one is called 'Global_main' and the new one is 'Global_gallery'.

In the Global_gallery template, replace 
[*content*]
with 
{{gallerymain}}

This is the chunk that will be created in the next section that will display the Gallery, and its contents will be detailed below.

NOTE: I'm not sure if this is the easiest or most efficient way to do this, as I said, I'm newer to MODx and am still learning about templates, etc. If there is a better way, please post it and let us all learn it, just be sure to make sure that any edits are clearly defined here so as to not confuse anyone!

[edit]

Create the Code!

Now we can start getting into some code. Here we will create the TV that is needed, chunks, and modify snippet code to get it to work.

[edit]

Create the TV (template variable)

Go to Manage Resources -> Template Variables -> New Template Variable.

  • Variable Name: GalleryContent
  • Input Type: Rich Text
  • Input Option Values: @CHUNK gallerycomments
  • Widget: RichText
  • Parameters: Width and Height you can set on your own to your liking, mine are 450px X 300px respectively.
  • Editor: TinyMCE
  • Template Access: Your main template and the Gallery created Template.
  • Access Permissions: Editors

Save the TV!

This TV allows for Rich Text Editing of the posting that will show up using the Ditto call. This also is a required field to be filled out by your users in order to avoid getting the "Content is a required field" error message.

[edit]

Create the 'DittoTpl'

Create the Ditto template chunk. This is called in the main 'Gallery' page by the Ditto snippet. I am showing you how mine is styled, you can style yours however you would like. 

  1. <div class="gallery_main">
  2. <h2>[+title+]</h2>
  3. <div class="imgleftfloat">
  4. [[MaxiGallerySolo? &galIDs=`[+id+]` &pics_to_show=`1` &type=`random` &open=`gallery_overview`]]
  5. </div>
  6. <p>[+summary+]</p>
  7. <p>[+link+]</p>
  8. </div>
[edit]

Create the 'gallerycomments' chunk

This chunk is used in the 'Gallery Creator' [56] page and serves as the &formtpl in order to show the creation portion for the new Gallery page. This also works with the TV that was created earlier and is taken from the NewsManager snippet and modified from that, so here is my code. Please feel free to modify the text descriptions (

tags) of the boxes as you see fit for your needs. 

  1. <form name="NewsEditor" method="post" action="[~[*id*]~]">
  2.       <input name="NewsEditorForm" type="hidden" value="on" />
  3.       <input name="editid" type="hidden" value="[+editid+]" />
  4.       Page title:<br /><input name="pagetitle" type="text" size="40" value="[+pagetitle+]" /><br />
  5. <p>Enter the Incident Date in the format:  March 25, 2006 <br />
  6.       <input name="longtitle" type="text" size="40" value="[+longtitle+]" /></p>
  7. <p>Enter a brief description of the incident:  (i.e.  Structure fire on Frogtown Road) <br />
  8.       <input name="description" type="text" size="40" value="[+description+]" /></p>
  9. <p>The summary is what will appear on the main site page and the main gallery page, just a brief summary will do.<br />
  10.       <textarea name="introtext" cols="50" rows="5">[+introtext+]</textarea></p>
  11. <p>This is the main content about the incident.<br />
  12.       [*GalleryContent*]</p>
  13. <br />
  14.       <input name="send" type="submit" value="Submit" />
  15.     </form>

Note the call for the TV: [*GalleryContent*]. This TV call is for the Rich Text Editor enabling people to add more than just plain old text. It also eliminated a problem with the generic 'content' box that would not hold the proper formatting that was inputted, such as paragraphs, etc.

This is also bound by the TV using the @CHUNK gallerycomments binding.

[edit]

Create the 'gallerymain' chunk

This chunk is used in the template that was created earlier. This shows the default layout on the individual gallery pages as they are created. 

  1. <div>
  2. <h1>[*pagetitle*] </h1>
  3. <h3>[*longtitle*]</h3>
  4. <p>
  5. [*content*]
  6. </p>
  7. [[MaxiGallery? &display=`embedded` &embedtype=`lightboxv2` &pics_in_a_row=`3` &max_thumb_size=`110` &max_pic_size=`400` &thumb_drop_shadow=`1` &manager_webgroups=`Editors`]]
  8. </div>

The [*content*] portion is pulling the content from the RTE that you used to create the page.

NOTE: The &manager_webgroups will allow the 'Manage Pictures' button to show up when users are editing and creating the gallery.

[edit]

Some final notes and work

This concludes the basics of creating the front-end editable gallery for your web-users.

  • With this setup, when 'Web Users' log in to the members-area, will have the 'Gallery Creator' link show up in the navbar. This is because they are assigned to the 'Editors' web users group, and when they log in, it recognizes them as such and adds it into the navbar via the 'Wayfinder' snippet. This is the only way that they can create and/or edit the galleries, since they are authorized Web Users.
  • This system uses the following snippets, available either in the default installation of MODx 0.9.5 or through the repository:
[edit]

Resources

Retrieved from "http://wiki.modxcms.com/index.php/MaxiGallery:_Front_end_user_created_galleries"
Personal tools