Creating a Gallery from Images uploaded in a Blog Post

[danxpar]

Hi,

First time posting, sorry if I mess this up. I hope I'm in the correct forum. Currently I'm running Cms Version: 2.1.2, more version details pasted at the end of the post.

I have done my best to go over the documentation.
I have also searched to see if this has been asked/answered before, but with no luck. I have the feeling I might be asking something out of the scope, or I have my search terms incorrect.

I have added Field Definitions to the CGBlog that will allow images to be added to a blog article. These images can be used in the Details page no problem.

My question is: Can I point {Gallery} to the blog post images and generate a Gallery from these images?

I have tried relative path to the Blog post, and I may have messed it up, but I cannot get it to work.

example:
{Gallery dir="uploads/images/Gallery/slideshow"} works
can
{Gallery dir="../../../../uploads/cgblog/id4"} work?

Thanks for your time. Sorry if this is a dud question.
Any info appreciated.

-Dan


----------------------------------------------
Cms Version: 2.1.2
Installed Modules:
AdminSearch: 1.0
CGBlog: 1.13.6
CGExtensions: 1.53.6
CGFeedback: 1.7.6
CGGoogleMaps2: 0.99.3
CGSimpleSmarty: 2.1
CGSmartImage: 1.21.3
CMSContentManager: 1.1
CMSMailer: 6.2.14
DesignManager: 1.1.1
FileManager: 1.5.2
FormBuilder: 0.8.1.4
Gallery: 2.1.5
JMFilePicker: 1.0
JQueryTools: 1.3.9
MicroTiny: 2.0.3
ModuleManager: 2.0.2
Navigator: 1.0.2
News: 2.50.4
Search: 1.50.2

Config Information:
php_memory_limit:
max_upload_size: 2000000
url_rewriting: none
page_extension:
query_var: page
auto_alias_content: true
locale:
set_names: true
timezone: Australia/Melbourne
permissive_smarty: false

Php Information:
phpversion: 5.6.19
md5_function: On (True)
json_function: On (True)
gd_version: 2
tempnam_function: On (True)
magic_quotes_runtime: Off (False)
E_ALL: 22527
E_STRICT: 0
E_DEPRECATED: 0
test_file_timedifference: No time difference found
test_db_timedifference: No time difference found
create_dir_and_file: 1
memory_limit: 128M
max_execution_time: 30
register_globals: Off (False)
output_buffering: 4096
disable_functions:
open_basedir:
test_remote_url: Success
file_uploads: On (True)
post_max_size: 200M
upload_max_filesize: 2M
session_save_path: C:\xampp\tmp (0777)
session_use_cookies: On (True)
xml_function: On (True)
xmlreader_class: On (True)
check_ini_set: On (True)
curl: On

Performance Information:
allow_browser_cache: Off (False)
browser_cache_expiry: 60
php_opcache: Off (False)
smarty_cache: Off (False)
smarty_compilecheck: Off (False)
smarty_cache_udt: Off (False)
auto_clear_cache_age: On (True)
Server Information:
Server Software: Apache/2.4.17 (Win32) OpenSSL/1.0.2d PHP/5.6.19
Server Api: apache2handler
Server Os: WINNT 6.2 On i586
Server Db Type: MySQL (mysqli)
Server Db Version: 10.1.10
Server Db Grants: Found a "GRANT ALL" statement that appears to be suitable

Permission Information:
tmp: C:\www\site\tmp (0777)
tmp_cache: C:\www\site\tmp\cache (0777)
templates_c: C:\www\site\tmp\templates_c (0777)
modules: C:\www\site\modules (0777)
uploads: C:\www\site\uploads (0777)
File Creation Mask (umask): C:\www\site\tmp\cache (0777)
config_file: 0444
----------------------------------------------

[velden]

No you can't. Gallery only looks in it's own directory and iirc it's explicitly does not allow the dots in file paths (security precautions).

You may want to elaborate on what you want to accomplish exactly?

[danxpar]

Hi velden,

I appreciate the reply, and the information.

I have a cgblog template that has a 4 Image Field Definitions that allows the poster to add images to a blog post.

I was wanting to add: Title / Content / 4 x Images all on the blog submit page. That is: without having to create a gallery or upload to a specific directory, for simplicity of management.

I was trying to display these 4 images as a gallery on the blog details page.

Appreciate your time.

-Dan

[velden]

Seems what you want is perfectly possible without another module.

A gallery usually is a combination of

• some images
• some javascript
• some html

The images are already uploaded with the blog article.
The javascript should/could be included in the page template or in the page specific metadata of the blog detail page.
The CGBlog detail template should take care of the html needed for the gallery of your choice.

Obviously you will have to connect the things together yourself.

My approach would be to create a stand alone html page (just on local computer) to setup a working example. If that's working I'd convert it to a working CGBlog template.

[danxpar]

Thanks velden,

I was able to get it working. here are my steps. I guarnte there will be a better way to do this. please recommend any changes that should be made.

- Download http://www.fancyapps.com/fancybox/
- Extract to upload folder: /uploads/fancyBox
- Create or Modify a Template: Layout -> Design Manager -> Templates -> (Template to add this feature)
- Add the appropriate javascript includes to the template. I added them at the end, just below the other scripts.
- Check path is correct on all the new entries: <__script__ type="text/javascript" src="{root_url}/uploads/fancybox/source/jquery.fancybox.js"></__script>
- Add the fancybox function here aswell.
eg:
<__script__ type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</__script>
- Submit
- Create some new Field Definitions: Content -> Calguys Blog Module -> Field Definitions
- Add name: image01
- Type, Image
- Tick Public, Submit
- Create as many as you like.

- Create blog post using the new template and add some images.

- Go to the Details Template page: Content -> Calguys Blog Module -> Details Template -> (template to add the gallery)

I still haven't tidied my code but the display the galley and check for empty fields.
You really just have to get the Field Definitions, and apply the Fancy Box class and Group:
eg:
<a class="fancybox" data-fancybox-group="gallery" href="{$entry->file_location}/{$entry->fields.image01->value}"> Link or Image here </a>
<a class="fancybox" data-fancybox-group="gallery" href="{$entry->file_location}/{$entry->fields.image02->value}"> Link or Image here </a>
<a class="fancybox" data-fancybox-group="gallery" href="{$entry->file_location}/{$entry->fields.image03->value}"> Link or Image here </a>

I'll post my code once I get it cleaned up, and optimised. Cake will be had, once this is done.

NOTE: fancybox requires a licence to use on corporate websites
NOTE: Please let me know if there is a better way, maybe using internal CMS MS javascripts.

Thanks for your help velden.