source: extensions/takeatour/tpl/first_contact.tpl @ 27898

Last change on this file since 27898 was 27898, checked in by flop25, 6 years ago

first upload
working WIP
one tour available

File size: 18.5 KB
Line 
1{footer_script require='jquery.bootstrap-tour'}{literal}
2// Instance the tour
3var tour = new Tour({
4  name: "first_contact",
5  orphan: true,
6  onEnd: function (tour) {window.location = "admin.php?page=plugin-TakeATour&tour_ended=first_contact";},
7});
8{/literal}{if $TAT_restart}tour.restart();{/if}{literal}
9// Add your steps. Not too many, you don't really want to get your users sleepy
10tour.addSteps([
11  {
12    path: "{/literal}{$TAT_path}{literal}admin.php",
13    title: "{/literal}{'Welcome in your Piwigo gallery'|@translate}{literal}",
14    content: "{/literal}{'Let\'s start by adding pictures'|@translate}{literal}"
15  },
16  {
17    path: "{/literal}{$TAT_path}{literal}admin.php",
18    placement: "right",
19    element: ".icon-plus-circled",
20    reflex:true,
21    content: "{/literal}{'The link is here. Click Next to continue'|@translate}{literal}",
22  },
23  {
24    path: "{/literal}{$TAT_path}{literal}admin.php?page=photos_add",
25    placement: "bottom",
26    element: ".selected_tab",
27    title: "{/literal}{'Add Photo Page'|@translate}{literal}",
28    content: "{/literal}{'First tab to add photos from your browser, other tabs to add from a software, mobile or FTP'|@translate}{literal}",
29  },
30  {
31    path: "{/literal}{$TAT_path}{literal}admin.php?page=photos_add",
32    placement: "left",
33    element: "#albumSelection",
34    title: "{/literal}{'Lets add photo!'|@translate}{literal}",
35    content: "{/literal}{'First choose an album; create one if there is no album yet.'|@translate}{literal}"
36  },
37  {//5
38    path: "{/literal}{$TAT_path}{literal}admin.php?page=photos_add",
39    placement: "top",
40    element: "#uploadify",
41    content: "{/literal}{'Then click the button to select photos to send from your computer'|@translate}{literal}"
42  },
43  {
44    path: /admin\.php\?page=photos_add/,
45    redirect:function (tour) {tour.goTo(4);},
46    placement: "left",
47    element: "#fileQueue",
48    title: "{/literal}{''|@translate}{literal}",
49    content: "{/literal}{'You see that photos are being listed. Add at least 2 pictures and when you\'re ready click the button Start Upload'|@translate}{literal}"
50  },
51  {
52    path: /admin\.php\?page=photos_add/,
53    redirect:function (tour) {tour.goTo(4);},
54    placement: "top",
55    element: "#photosAddContent legend",
56    content: "{/literal}{'Here a summary of your uploaded pictures. See that Piwigo has generated itself the thumbnails. You can know add more photos with the link at the bottom, edit the properties of a picture by cliking on it, or click to manage all the uploaded pictures in the Batch Manager...'|@translate}{literal}",
57    onPrev:function (tour) {tour.goTo(4);}
58  },
59  {
60    path: /admin\.php\?page=photos_add/,
61    redirect:function (tour) {tour.goTo(4);},
62    placement: "bottom",
63    element: "#batchLink",
64    reflex:true,
65    content: "{/literal}{'Let\'s edit them! Click on the link. If you don\'t see it click Prev to add at least 2 photos.'|@translate}{literal}",
66    onPrev:function (tour) {tour.goTo(4);}
67  },
68  {
69    path: /admin\.php\?page=(photos_add|batch_manager&filter=prefilter-last_import|prefilter-caddie)/,
70    redirect:function (tour) {window.location = "admin.php?page=batch_manager&filter=prefilter-last_import";},
71    placement: "top",
72    element: "",
73    title: "{/literal}{'The Batch Manager'|@translate}{literal}",
74    content: "{/literal}{'You are know in the Batch Manager, where you can batch edit multiple pictures. Here the Caddy is set as a filter because we comes from the upload result page.'|@translate}{literal}"
75  },
76  {//10
77    path: /admin\.php\?page=batch_manager&filter=(prefilter-caddie|prefilter-last_import)/,
78    redirect:function (tour) {window.location = "admin.php?page=batch_manager&filter=prefilter-last_import";},
79    placement: "right",
80    element: ".icon-flag",
81    content: "{/literal}{'Here is the link to directly access to your caddy: that/s a tool for administrators to easily add pictures to a set in order to edit them in the Batch Manager. You can add photos to the caddy from the public picture page when logged as an admin, or using the action \"Add to caddy\" on the Batch Manager'|@translate}{literal}"
82  },
83  {
84    path: /admin\.php\?page=batch_manager&filter=(prefilter-caddie|prefilter-last_import)/,
85    redirect:function (tour) {window.location = "admin.php?page=batch_manager&filter=prefilter-last_import";},
86    placement: "left",
87    element: "#checkActions",
88    title: "{/literal}{'How to edit a photos'|@translate}{literal}",
89    content: "{/literal}{'So you can select from here one or more photos'|@translate}{literal}"
90  },
91  {
92    path: /admin\.php\?page=batch_manager&filter=(prefilter-caddie|prefilter-last_import)/,
93    redirect:function (tour) {window.location = "admin.php?page=batch_manager&filter=prefilter-last_import";},
94    placement: "top",
95    element: "#action",
96    content: "{/literal}{'then edit them using and action. But for instance, you can\'t -for now- batch edit descriptions since they are mostly unique'|@translate}{literal}"
97  },
98  {
99    path: /admin\.php\?page=batch_manager&filter=(prefilter-caddie|prefilter-last_import)/,
100    redirect:function (tour) {window.location = "admin.php?page=batch_manager&filter=prefilter-last_import";},
101    placement: "bottom",
102    element: "#tabsheet .normal_tab",
103    content: "{/literal}{'You can edit descriptions and more from the batch manager in unit mode. But for now, let\'s stay in the global mode'|@translate}{literal}"
104  },
105  {
106    path: /admin\.php\?page=batch_manager&filter=(prefilter-caddie|prefilter-last_import)/,
107    redirect:function (tour) {window.location = "admin.php?page=batch_manager&filter=prefilter-last_import";},
108    placement: "top",
109    element: "#TAT_FC_14",
110    reflex:true,
111    content: "{/literal}{'We will see now the edition page of one picture. That page is reachable from here but also from the public picture page when logged as an administrator. Click on Edit or go next'|@translate}{literal}",
112    onNext:function (tour) {window.location = "admin.php?page=photo-1";}
113  },
114  {//15
115    path: /admin\.php\?page=photo-/,
116    redirect:function (tour) {window.location = "admin.php?page=photo-1";},
117    placement: "bottom",
118    element: ".selected_tab",
119    title: "{/literal}{'The edition page of a picture'|@translate}{literal}",
120    content: "{/literal}{'On that page you can edit all the properties of a photo, for instance...'|@translate}{literal}"
121  },
122  {
123    path: /admin\.php\?page=photo-/,
124    redirect:function (tour) {window.location = "admin.php?page=photo-1";},
125    placement: "top",
126    element: "#TAT_FC_16",
127    content: "{/literal}{'here to add or remove the photo from albums. The link is virtual, no photos will be physcally moved ever.'|@translate}{literal}"
128  },
129  {
130    path: /admin\.php\?page=photo-/,
131    redirect:function (tour) {window.location = "admin.php?page=photo-1";},
132    placement: "top",
133    element: "#TAT_FC_17",
134    content: "{/literal}{'and here to set the photo as a picture representative of an album. So you can set as a representative of a public album, a photo in a private album, which is ideal to set custom thumbnails for albums but the user won\'t see those pictures inside those albums. Like setting a portrait of someone as representative, for an album which contains photos of nature; it would be weird to see that photo of the man/woman among trees or animals.'|@translate}{literal}"
135  },
136  {
137    path: /admin\.php\?page=photo-/,
138    redirect:function (tour) {window.location = "admin.php?page=photo-1";},
139    placement: "top",
140    title: "{/literal}{'Manage albums'|@translate}{literal}",
141    content: "{/literal}{'That previous example was just a small overview of tricks and how powerfull Piwigo is. So I\'ve told about private albums, but how can we manage albums? Click On album->Manage or hit Next'|@translate}{literal}"
142  },
143  {
144    path: "{/literal}{$TAT_path}{literal}admin.php?page=cat_list",
145    placement: "left",
146    element: "#content",
147    title: "{/literal}{'Manage Albums'|@translate}{literal}",
148    content: "{/literal}{'Here are listed all the \'top\' albums, the ones at the root of your gallery. If you see an album with a dashed backgroung, it\'s an real physical album from a FTP synchro, which can\'t be moved or deleted from here. The others albums are called virtual albums.'|@translate}{literal}",
149    onPrev: function (tour) {window.location = "admin.php?page=photo-1";},
150
151  },
152  {//20
153    path: "{/literal}{$TAT_path}{literal}admin.php?page=cat_list",
154    placement: "top",
155    element: "#categoryOrdering",
156    title: "{/literal}{'Manage Albums'|@translate}{literal}",
157    content: "{/literal}{'When your mouse is hover a album, links and information appear. When you drag and drop an album -a rounded block-, you will change its position and then you can save or cancel your manual order.'|@translate}{literal}"
158  },
159  {
160    path: "{/literal}{$TAT_path}{literal}admin.php?page=cat_list",
161    placement: "left",
162    element: "#tabsheet:first-child",
163    title: "{/literal}{'Other Tabs'|@translate}{literal}",
164    content: "{/literal}{'The next tab is a page where you can move any virtual album.<br>The permalink tab is to set a particular url for an album, for tecnhical reasons like to set a specific template or for just sending cool customized links.<br>But let\'s edit an album: click on Edit of a album'|@translate}{literal}"
165  },
166  {
167    path: /admin\.php\?page=album-/,
168    redirect:function (tour) {window.location = "admin.php?page=album-1";},
169    placement: "top",
170    element: ".selected_tab",
171    title: "{/literal}{'Album Edition Page'|@translate}{literal}",
172    content: "{/literal}{'Like for a picture, here you can edit the properties of an album'|@translate}{literal}"
173  },
174  {
175    path: /admin\.php\?page=album-/,
176    redirect:function (tour) {window.location = "admin.php?page=album-1";},
177    placement: "top",
178    element: "#TAT_FC_23",
179    content: "{/literal}{'Locking a album means only administrators will be able to see that album: it\'s usually used when an admin is managing the properties of an album or don\'t want to publish the album immediatly'|@translate}{literal}"
180  },
181  {
182    path: /admin\.php\?page=album-/,
183    redirect:function (tour) {window.location = "admin.php?page=album-1";},
184    placement: "bottom",
185    element: ".tabsheet",
186    content: "{/literal}{'Certainly, one of the most important page in the permission page of an album. Click on the permission tab or click next'|@translate}{literal}"
187  },
188  {//25
189    path: /admin\.php\?page=album-[0-9]+-permissions/,
190    redirect:function (tour) {window.location = "admin.php?page=album-1-permissions";},
191    placement: "left",
192    element: "#content",
193    title: "{/literal}{'Album Permission'|@translate}{literal}",
194    content: "{/literal}{'As you can read in the Help of your Piwigo -link at the top right-, album permissions are set by groups and users. You can directly set private/public multiple albums using the Administration » Albums » Properties page.'|@translate}{literal}"
195  },
196  {
197    placement: "top",
198    element: "#selectStatus",
199    content: "{/literal}{'Here you can set the current album as private, then grant access to users and groups. By default, permissions are not recursive for sub albums, but upper-albums will be granted with the same permission in order to let the granted users browse to the album.'|@translate}{literal}"
200  },
201  {
202    placement: "top",
203    element: "#selectStatus",
204    content: "{/literal}{'Important fact: the webmasters and administrators are not omniscient when browsing the public part, but they can access to every album and photos on the admin part.'|@translate}{literal}"
205  },
206  {
207    placement: "top",
208    element: "",
209    title: "{/literal}{'Configuration'|@translate}{literal}",
210    content: "{/literal}{'Now we will look at the options available to set Piwigo working your way. Click on Configuration->Options or just hit Next.'|@translate}{literal}"
211  },
212  {
213    path: "{/literal}{$TAT_path}{literal}admin.php?page=configuration",
214    placement: "top",
215    element: "",
216    title: "{/literal}{'Configuration->Options->General'|@translate}{literal}",
217    content: "{/literal}{'Here, on that first page, you will set the essential and basic configuration of your gallery.'|@translate}{literal}"
218  },
219  {//30
220    path: "{/literal}{$TAT_path}{literal}admin.php?page=configuration",
221    placement: "right",
222    element: "#gallery_title",
223    content: "{/literal}{'Let\'s start by changing the tittle'|@translate}{literal}"
224  },
225  {
226    path: "{/literal}{$TAT_path}{literal}admin.php?page=configuration",
227    placement: "right",
228    element: "#page_banner",
229    content: "{/literal}{'Then the banner, which will be displayed on top of every pages. As you can see, HTML tags are allowed here. You can also use the %gallery_title% tag to display the tittle you just typed above.'|@translate}{literal}"
230  },
231  {
232    path: "{/literal}{$TAT_path}{literal}admin.php?page=configuration",
233    reflex: true,
234    placement: "top",
235    element: ".formButtons input",
236    content: "{/literal}{'Now save you changes'|@translate}{literal}"
237  },
238  {
239    path: "{/literal}{$TAT_path}{literal}admin.php?page=configuration",
240    placement: "top",
241    title: "{/literal}{'Guest settings'|@translate}{literal}",
242    content: "{/literal}{'Just a final word about the options, the \'Guest settings\' page is to set the preferences of unregistered visitors. Each time Piwigo refers to \'guest\' that means unregistered visitors.<br>Let\'s continue about Configuration: click on Configuration->Themes or just hit Next.'|@translate}{literal}",
243    onPrev:function (tour) {tour.goTo(30);}
244  },
245  {
246    path: "{/literal}{$TAT_path}{literal}admin.php?page=themes",
247    placement: "top",
248    element: "",
249    title: "{/literal}{'Themes'|@translate}{literal}",
250    content: "{/literal}{'Themes are one of the three way to customize your Piwigo, with Plugins and Templates. Themes installed are listed here.<br>More than one theme can be enabled: users can change their theme by choosing one among the one enabled here, if the option \'Allow user customization\' is checked on the Option page.'|@translate}{literal}"
251  },
252  {//35
253    path: "{/literal}{$TAT_path}{literal}admin.php?page=themes",
254    placement: "top",
255    element: "#TAT_FC_35",
256    title: "{/literal}{'Themes'|@translate}{literal}",
257    content: "{/literal}{'Themes can also be set as Default, which means that\'s the theme for unregistred visitors (guests, you remember?) and any new registred user will be have this theme. But for any previously registred users, the theme won\'t change until you do it from the User Management page or you disable their theme: be carefull, you might disturb your users by changing their whole display.'|@translate}{literal}"
258  },
259  {
260    path: "{/literal}{$TAT_path}{literal}admin.php?page=themes",
261    placement: "top",
262    element: "",
263    title: "{/literal}{'Themes'|@translate}{literal}",
264    content: "{/literal}{'Themes have a system of dependency: that\'s why some theme can\'t be deleted (a parent theme can\'t be deleted if a child theme is enabled) or others can\'t be enabled (a child theme need its parent theme). For instance, when you put you\'re mouse over a Delete link, if the theme can\'t be deleted, a information bubble will explain you why.'|@translate}{literal}"
265  },
266  {
267    path: "{/literal}{$TAT_path}{literal}admin.php?page=themes",
268    placement: "right",
269    element: ".tabsheet",
270    title: "{/literal}{'Themes'|@translate}{literal}",
271    content: "{/literal}{'To install new themes, you can directly download them from the tab \'Add a theme\'. Only the themes marked as compatible with your version of Piwigo are showed.<br>Let\'s discover the plugins now! Click on Plugin->Manage'|@translate}{literal}"
272  },
273  {
274    path: "{/literal}{$TAT_path}{literal}admin.php?page=plugins",
275    placement: "left",
276    element: "",
277    title: "{/literal}{'Plugins'|@translate}{literal}",
278    content: "{/literal}{'Plugins are very easy ways to customize your Piwigo. They can do almost anything you can imagine from small text addition to complete features, like the Community plugin which allows non admistrators users to upload without entering to the administration part.'|@translate}{literal}"
279  },
280  {
281    path: "{/literal}{$TAT_path}{literal}admin.php?page=plugins",
282    placement: "left",
283    element: "#content",
284    title: "{/literal}{'Plugins'|@translate}{literal}",
285    content: "{/literal}{'On that first page, are listed the installed plugins. At the top, are listed the plugins activated, which are currently running. At the bottom, the plugins which are installed in the /plugins folder, but disabled. Deleting a plugin means that any trace of the plugin will be removed (files, options etc). For most of the plugins, disabling will keep the data registered by the plugins.'|@translate}{literal}"
286  },
287  {
288    path: "{/literal}{$TAT_path}{literal}admin.php?page=plugins",
289    placement: "bottom",
290    element: "#TakeATour",
291    content: "{/literal}{'Here it\'s me! Don\'t disable me now, but you can see you can Disable or Restore an activated plugin.'|@translate}{literal}"
292  },
293  {
294    path: "{/literal}{$TAT_path}{literal}admin.php?page=plugins",
295    placement: "right",
296    element: ".tabsheet",
297    content: "{/literal}{'You can see on the last tab all the plugins available for your version of Piwigo. Hundred of plugins are there!'|@translate}{literal}"
298  },
299  {
300    path: "{/literal}{$TAT_path}{literal}admin.php?page=languages",
301    title: "{/literal}{'Languages'|@translate}{literal}",
302    content: "{/literal}{'Piwigo is multilingual. By default, the language displayed by Piwigo change according to the language of the browser of the visitor. If the language of the visitor is not availble, the language set by default is used.'|@translate}{literal}"
303  },
304  {
305    path: "{/literal}{$TAT_path}{literal}admin.php?page=plugin-TakeATour",
306    placement: "top",
307    element: "",
308    title: "{/literal}{'It\'s been a great time'|@translate}{literal}",
309    content: "{/literal}{'This tour was quite long, but we only have seen a small part of how powerfull Piwigo is. Everything has a end, this overview is finished.<br>You can discover much deeper the features of Piwigo by taking an other tour or reading our documentation, on the piwigo.org website'|@translate}{literal}"
310  }
311]);
312
313// Initialize the tour
314tour.init();
315
316// Start the tour
317tour.start();
318
319jQuery( "input[class='submit']" ).click(function() {
320  if (tour.getCurrentStep()==5)
321  {
322    tour.goTo(6);
323  }
324});
325{/literal}{/footer_script}
Note: See TracBrowser for help on using the repository browser.