X3 Beta V0.10 [PANEL ONLY]
Posted: 19 May 2015, 05:33
X3 Beta v0.10 [PANEL ONLY] May 19
A massive update to the admin panel, almost achieving the X3 panel we always wanted to have. Many important features are included, making the admin panel ready to power the next generation of X3 coming our way. To make things easy, I want to emphasize that this release is PANEL ONLY.
Demo
https://demo.photo.gallery/panel/
Before getting started, I would also like to forward a big thanks to the Codstack (fb) team, without their enthusiastic contributions to the panel core, it would never have happened.
---
Those of you who already have the "secret link", can use the same link to download this latest release. To those who don't yet have the "secret link", send me a PM, and I will provide it.
---
How to update
Since this release is strictly panel-only, you can update by simply uploading the new panel folder, overwriting your existing folder. PS! You will need to update the new config.php also ... I recommend saving your old config.php locally, and simply updating the new one with your login/password (or DB details).
What's NOT included in this update?
Before I get started on the new features in this release, I thought it would be helpful to emphasize what features that have NOT been addressed yet. We are not quite satisfied with how page settings are applied, as it is still not very intuitive. This will need to get improved in a future release, as the feature is deeply tied in with how the website itself works.
---
UPDATES
Multiple Languages
The first thing you may notice when logging in to your panel, is a new languages dropdown-selector. This feature allows you to choose between English, German and French, and it will remember your selection.
Languages are perhaps 90% implemented, so there are a few non-translated items, and some translations (German, French) may be poorly translated (Google). You can edit a translation-file, by navigating to the folder filemanager_assets/lng/ and opening any of the PHP language file in a text editor. You can also create new languages, for example Spanish.php, by simply duplicating the English.php file and translating it. Warning! Although this feature is ready to be used, if you make your own custom translations, you will need to manually manage this when doing future updates (unless we merge your changes with the official branch). Also, the items in the language files need to be cleaned up, as there is a lot of unused stuff there that will be removed eventually.
New Menu
One of the first things you may see after login, is the brand new content MENU, designed from scratch for the new X3 panel.
Unlike the previous menu, this menu is "instant", and has a clear design for navigating a complex tree menu. It also comes with a new context-menu, that allows you to perform actions on the folder directly from the menu (like a desktop file manager).
- Single load (does not require multiple connections with the server to load branches any more).
- Branches expand/collapse instantly.
- New clear design, easily distinguish between expanding a branch and clicking a link.
- Expand/Collapse buttons to instantly toggle open/closed the entire branch.
- Remembers its own expansion-state when you refresh the browser.
- Fixed menu on scroll (unless menu is expanded taller than screen height).
- New context-menu, that allows you to perform actions on the folder directly from the menu!
New Content editor
There is a brand new markdown/html editor for the page "content", which has been separated from other page settings. The new editor is designed to easier allow extended custom content editing.
This editor previews in real-time your markdown code, and will also highlight certain html tags. No longer do you need to indent your content with two spaces, and you can freely write your content directly into this field.
- Markdown real-time preview
- Helper buttons (bold, italic, image, link)
- Insert X3-specific templates https://d.pr/i/14Vb5 (more templates will be available)
- Preview mode https://d.pr/i/1dwCn
- Fullscreen mode with fixed toolbar https://d.pr/i/13wm2
- Keyboard commands for bold, italic, link, image, save, preview, toggle and undo ...
Gallery View Modes and Features
We have added several new "gallery" list view modes, wrapped into a new design:
List mode
Small thumbs mode
Large thumbs mode
Edit (title/description) mode *
Improved selection manager
- Use the check/uncheck all button, or use ctrl-a/cmd-a to toggle select-all.
Improved quick-edit file in list
Realtime sorting by size, date or name
New ZIP selected files
Because of technical reasons, the resulting ZIP file will include the folder path relative from "content".
Add titles and descriptions for files
As noted earlier, there is a new mode to edit/add titles and descriptions for images (or other files).
- Titles and descriptions do not yet support html tags (for technical reasons).
- If you are renaming physical file names, they will loose any title/description assigned, because this is referenced in the page.yml file. Generally speaking, you should not be renaming files, at least not if you are applying titles and descriptions.
- Titles and descriptions in this view mode only apply for files, NOT folders.
- If you have used this feature earlier in the page.yml file, you will need to move all your titles and description to the bottom of the document, below a comment "# File Data"
New UPLOADER with image-resizer and previews
We have added a new uploader module, which allows you to resize images before they are uploaded.
- Drag images into the "dropzone" or click to upload.
- Drag an entire folder (some browser only, Chrome+)
- Preview mode. See images and file-size in the upload queue before you start the upload process.
- Validation after upload.
- Remembers resize options.
- Should overcome the max_uploads limitation on some servers (but not max filesize).
Preview images and image-size prior to starting the upload.
After upload, files are validated and previewed
* Important info about the image-resizer
We integrated the image-resizer because in most cases it is obligatory to resize your images to a web-friendly format prior to upload. Some of you already have your own workflow for custom control of quality vs filesize vs dimensions ... If so, you can simply disable the image-resizer. The image-resizer exists for those who are uploading large original images directly, which should be resized down. Why? (some might ask) ... Because original images are often several MB (way too large for web viewing), 3000 megapixels + (way too large for average web viewing), and should be sized down to a web-friendly format. We have set 1600px as default for the image-resizer, because it is a generous and sensible size for the largest X3 image, which should still look nice on most large screens and retina-devices at very acceptable file-sizes.
New POPUP lightbox
Added a new popup script, which is much more effective in previewing your images. It includes a ZOOM function, which allows you to review the quality of the image at full scale.
* Scaled down for demonstration purposes.
Cloudflare API
We have added Cloudflare API settings, which allows you to use Cloudflare's incredibly fast edge-caching also on X3 pages, while still in control of the caching mechanism. This requires using Cloudflare, as well as adding specific page-rules for caching X3 pages. This is reserved for "advanced users" who are over-averagely concerned with speed and performance.
TUTORIAL: https://forum.photo.gallery/viewtopic.p ... 429#p37429
Remembering states
To make things much more intuitive, the new panel uses html5 localstorage to "remember" states for many features. After navigating between pages or refreshing the page, it will remember the state of the current page.
- Remembers last visited settings page (on refresh).
- Remembers last visited manage-page (on refresh).
- Remembers last collapse/expand state of the main menu.
- Remember checked (selected) items for each folder.
- Remembers selected tab, "page" or "gallery".
- Remembers files "view mode" (list, thumbnails etc.)
- Remembers sorting of items.
* Memorized states are local to the browser you are using, and will not transfer if you start to use a different browser or different device.
Other
- Additional login security
- Auto-focus and "return" key support for modal windows (delete, rename etc.)
- Fixed custom/javascript/ page.yml bug
- Search is now Global
- New "View Page" link to preview current page.
- Fixed multiple users for DB-version.
A massive update to the admin panel, almost achieving the X3 panel we always wanted to have. Many important features are included, making the admin panel ready to power the next generation of X3 coming our way. To make things easy, I want to emphasize that this release is PANEL ONLY.
Demo
https://demo.photo.gallery/panel/
Before getting started, I would also like to forward a big thanks to the Codstack (fb) team, without their enthusiastic contributions to the panel core, it would never have happened.
---
Those of you who already have the "secret link", can use the same link to download this latest release. To those who don't yet have the "secret link", send me a PM, and I will provide it.
---
How to update
Since this release is strictly panel-only, you can update by simply uploading the new panel folder, overwriting your existing folder. PS! You will need to update the new config.php also ... I recommend saving your old config.php locally, and simply updating the new one with your login/password (or DB details).
What's NOT included in this update?
Before I get started on the new features in this release, I thought it would be helpful to emphasize what features that have NOT been addressed yet. We are not quite satisfied with how page settings are applied, as it is still not very intuitive. This will need to get improved in a future release, as the feature is deeply tied in with how the website itself works.
---
UPDATES
Multiple Languages
The first thing you may notice when logging in to your panel, is a new languages dropdown-selector. This feature allows you to choose between English, German and French, and it will remember your selection.
Languages are perhaps 90% implemented, so there are a few non-translated items, and some translations (German, French) may be poorly translated (Google). You can edit a translation-file, by navigating to the folder filemanager_assets/lng/ and opening any of the PHP language file in a text editor. You can also create new languages, for example Spanish.php, by simply duplicating the English.php file and translating it. Warning! Although this feature is ready to be used, if you make your own custom translations, you will need to manually manage this when doing future updates (unless we merge your changes with the official branch). Also, the items in the language files need to be cleaned up, as there is a lot of unused stuff there that will be removed eventually.
New Menu
One of the first things you may see after login, is the brand new content MENU, designed from scratch for the new X3 panel.
Unlike the previous menu, this menu is "instant", and has a clear design for navigating a complex tree menu. It also comes with a new context-menu, that allows you to perform actions on the folder directly from the menu (like a desktop file manager).
- Single load (does not require multiple connections with the server to load branches any more).
- Branches expand/collapse instantly.
- New clear design, easily distinguish between expanding a branch and clicking a link.
- Expand/Collapse buttons to instantly toggle open/closed the entire branch.
- Remembers its own expansion-state when you refresh the browser.
- Fixed menu on scroll (unless menu is expanded taller than screen height).
- New context-menu, that allows you to perform actions on the folder directly from the menu!
New Content editor
There is a brand new markdown/html editor for the page "content", which has been separated from other page settings. The new editor is designed to easier allow extended custom content editing.
This editor previews in real-time your markdown code, and will also highlight certain html tags. No longer do you need to indent your content with two spaces, and you can freely write your content directly into this field.
- Markdown real-time preview
- Helper buttons (bold, italic, image, link)
- Insert X3-specific templates https://d.pr/i/14Vb5 (more templates will be available)
- Preview mode https://d.pr/i/1dwCn
- Fullscreen mode with fixed toolbar https://d.pr/i/13wm2
- Keyboard commands for bold, italic, link, image, save, preview, toggle and undo ...
Gallery View Modes and Features
We have added several new "gallery" list view modes, wrapped into a new design:
List mode
Small thumbs mode
Large thumbs mode
Edit (title/description) mode *
Improved selection manager
- Use the check/uncheck all button, or use ctrl-a/cmd-a to toggle select-all.
Improved quick-edit file in list
Realtime sorting by size, date or name
New ZIP selected files
Because of technical reasons, the resulting ZIP file will include the folder path relative from "content".
Add titles and descriptions for files
As noted earlier, there is a new mode to edit/add titles and descriptions for images (or other files).
- Titles and descriptions do not yet support html tags (for technical reasons).
- If you are renaming physical file names, they will loose any title/description assigned, because this is referenced in the page.yml file. Generally speaking, you should not be renaming files, at least not if you are applying titles and descriptions.
- Titles and descriptions in this view mode only apply for files, NOT folders.
- If you have used this feature earlier in the page.yml file, you will need to move all your titles and description to the bottom of the document, below a comment "# File Data"
New UPLOADER with image-resizer and previews
We have added a new uploader module, which allows you to resize images before they are uploaded.
- Drag images into the "dropzone" or click to upload.
- Drag an entire folder (some browser only, Chrome+)
- Preview mode. See images and file-size in the upload queue before you start the upload process.
- Validation after upload.
- Remembers resize options.
- Should overcome the max_uploads limitation on some servers (but not max filesize).
Preview images and image-size prior to starting the upload.
After upload, files are validated and previewed
* Important info about the image-resizer
We integrated the image-resizer because in most cases it is obligatory to resize your images to a web-friendly format prior to upload. Some of you already have your own workflow for custom control of quality vs filesize vs dimensions ... If so, you can simply disable the image-resizer. The image-resizer exists for those who are uploading large original images directly, which should be resized down. Why? (some might ask) ... Because original images are often several MB (way too large for web viewing), 3000 megapixels + (way too large for average web viewing), and should be sized down to a web-friendly format. We have set 1600px as default for the image-resizer, because it is a generous and sensible size for the largest X3 image, which should still look nice on most large screens and retina-devices at very acceptable file-sizes.
New POPUP lightbox
Added a new popup script, which is much more effective in previewing your images. It includes a ZOOM function, which allows you to review the quality of the image at full scale.
* Scaled down for demonstration purposes.
Cloudflare API
We have added Cloudflare API settings, which allows you to use Cloudflare's incredibly fast edge-caching also on X3 pages, while still in control of the caching mechanism. This requires using Cloudflare, as well as adding specific page-rules for caching X3 pages. This is reserved for "advanced users" who are over-averagely concerned with speed and performance.
TUTORIAL: https://forum.photo.gallery/viewtopic.p ... 429#p37429
Remembering states
To make things much more intuitive, the new panel uses html5 localstorage to "remember" states for many features. After navigating between pages or refreshing the page, it will remember the state of the current page.
- Remembers last visited settings page (on refresh).
- Remembers last visited manage-page (on refresh).
- Remembers last collapse/expand state of the main menu.
- Remember checked (selected) items for each folder.
- Remembers selected tab, "page" or "gallery".
- Remembers files "view mode" (list, thumbnails etc.)
- Remembers sorting of items.
* Memorized states are local to the browser you are using, and will not transfer if you start to use a different browser or different device.
Other
- Additional login security
- Auto-focus and "return" key support for modal windows (delete, rename etc.)
- Fixed custom/javascript/ page.yml bug
- Search is now Global
- New "View Page" link to preview current page.
- Fixed multiple users for DB-version.