NAVIGATION
[[CP Content-Part]]
Differences
This shows you the differences between two versions of the page.
|
3rd-party-modules:sliderjs:sliderjs-docu:sliderjs-docu-cp [2013/11/13 00:58] Peter Bracher |
3rd-party-modules:sliderjs:sliderjs-docu:sliderjs-docu-cp [2018/06/03 18:08] (current) |
||
|---|---|---|---|
| Line 17: | Line 17: | ||
| The concept of choosing the images for the slider is to select all the images within one or more folders rather than single images from the filecenter as you're used to do in other PHPWCMS contentparts | The concept of choosing the images for the slider is to select all the images within one or more folders rather than single images from the filecenter as you're used to do in other PHPWCMS contentparts | ||
| - | You will only see public and your own private folders/images in the Plugin Content Part. PHPWCMS does in general not allow access to private folders from others, even as admin you won't see private folders/images of other BE-Users! | + | You will only see public and your own private folders/images in the Plugin Content Part. PHPWCMS does in general not allow BE access to private folders from others, even as admin you won't see private folders/images of other BE-Users!\\ |
| + | You can only add and edit active folders, inactive folders do appear but are not editable, inactive images do not appear.\\ | ||
| + | \\ | ||
| + | The slider plugin also behaves differently from PHPWCMS regarding the frontend!\\ | ||
| + | Normal PHPWCMS Content Parts always show all images in Frontend, regardless of the active/inactive/private/public status of the image in the PHPWCMS-file-center. In these Contentparts the image remains visible in Frontend even if you delete the image later on in the PHPWCMS-file-center.\\ | ||
| + | \\ | ||
| + | The SliderJS Plugin behaves differently:\\ | ||
| + | When rendering the images for the slider in Frontend, the plugin looks back to the PHPWCMS-file-center, if:\\ | ||
| + | * the image | ||
| + | * or the folder its in | ||
| + | * or all its parent folders | ||
| + | is active or not or deleted\\ | ||
| + | only when the image __and__ the folder __and__ all its parent folders are __active__, the image appears in the slider in Frontend! | ||
| + | \\ | ||
| + | A try to visualize this:\\ | ||
| + | {{:3rd-party-modules:sliderjs:sliderjs_screenshot023.jpg|}}{{:3rd-party-modules:sliderjs:sliderjs_screenshot024.jpg|}} | ||
| \\ | \\ | ||
| \\ | \\ | ||
| Line 23: | Line 38: | ||
| === Select Folders === | === Select Folders === | ||
| \\ | \\ | ||
| + | {{:3rd-party-modules:sliderjs:sliderjs_screenshot025.jpg|}}\\ | ||
| Select the folder(s) you want the images (all within this folder) to be added to the slider.\\ | Select the folder(s) you want the images (all within this folder) to be added to the slider.\\ | ||
| \\ | \\ | ||
| Line 29: | Line 45: | ||
| === Add Title + Description === | === Add Title + Description === | ||
| \\ | \\ | ||
| - | With click to the arrow on the left you can open/close the folder and get a preview of all the images.\\ | + | {{:3rd-party-modules:sliderjs:sliderjs_screenshot026.jpg|}}\\ |
| - | {{:3rd-party-modules:sliderjs:sliderjs_screenshot003.jpg|}}\\ | + | With click on the arrow on the left you can open/close the folder and get a preview of all the images.\\ |
| - | Here you can add a title and a description to each image. Depending on the slideshow the title will be added to the alt-attribute and the description to the title-attribute of the image, __the latter__ one will be used then as caption.\\ | + | Here you can add a title and a description to each image. __Depending on the slideshow__ the title will be added to the alt-attribute and the description to the title-attribute of the image or a special div, __the latter__ one will be used as caption.\\ |
| - | \\ | + | |
| - | {{:3rd-party-modules:sliderjs:sliderjs_screenshot011.jpg|}}\\ | + | |
| \\ | \\ | ||
| \\ | \\ | ||
| - | === HTML Caption === | + | === HTML Caption + CSS Class === |
| \\ | \\ | ||
| + | {{:3rd-party-modules:sliderjs:sliderjs_screenshot027.jpg|}}\\ | ||
| **Pro Version only:** Some Sliders accept html in the description. To facilitate html we added a WYSIWYG-Dialog where you can edit and format your html content. With click on OK in the dialog the html-code is added to the corresponding text-field and rendered as html in frontend.\\ | **Pro Version only:** Some Sliders accept html in the description. To facilitate html we added a WYSIWYG-Dialog where you can edit and format your html content. With click on OK in the dialog the html-code is added to the corresponding text-field and rendered as html in frontend.\\ | ||
| For sliders who do accept captions, but only plain text, all html-tags will be stripped out! These sliders show the caption only in ONE LINE, so all linebreacks will be ignored in frontend.\\ | For sliders who do accept captions, but only plain text, all html-tags will be stripped out! These sliders show the caption only in ONE LINE, so all linebreacks will be ignored in frontend.\\ | ||
| - | <note important>Title and description added to the images here remain attached to this contentpart __and not to the image itself__, ie. you will lose the contents when deleting the contentpart.</note> | + | To go even a step further, you can add to each caption a special CSS-Class and style the caption to whatever you like with CSS. See the sliders below to get an idea of how to access the captions container with CSS.\\ |
| \\ | \\ | ||
| \\ | \\ | ||
| === Implementation === | === Implementation === | ||
| - | \\ | ||
| - | |||
| \\ | \\ | ||
| | ^ captions^ html^ title^ description ^ | | ^ captions^ html^ title^ description ^ | ||
| Line 54: | Line 67: | ||
| ^ NIVO Slider | yes | yes | alt="[plain text only]" | <div>[html or plain text]</div> | | ^ NIVO Slider | yes | yes | alt="[plain text only]" | <div>[html or plain text]</div> | | ||
| ^ Camera Slideshow | yes | yes | | <div>[html or plain text]</div> | | ^ Camera Slideshow | yes | yes | | <div>[html or plain text]</div> | | ||
| + | \\ | ||
| + | <note important>Title and description added to the images here remain attached to this contentpart __and not to the image itself__, ie. you will lose the contents when deleting the contentpart.</note> | ||
| \\ | \\ | ||
| \\ | \\ | ||
