How do I add Tidypics Slideshow to Main Page

To make my site more engaging to visitors who have not yet joined, I would like to add a slideshow to the Main Page.

My site: http://brickcollections.com

Running Elgg 1.7.3, I have enabled the following relevant plugins: externalpages, custom_index, tidypics; and am using the webgalli_mothers_day theme.

Presumably I need to insert some php into this file:

/public_html/mod/custom_index/views/default/canvas/layouts/new_index.php

to put the slideshow where I want it, probably the right side column.

The view on this album page:

http://brickcollections.com/pg/photos/album/2727/front-page

is close to what I would like. That is, on the main page, a visitor would see a photo album and a prominent message or button, "Click here to see slideshow." The album referenced could be latest photos, random photos, or a specific album that the admin (me) selected.

A related question would be how to do this for each group, so that the default page for any group features a slideshow.

I am an Elgg newbie, am not a php programmer, but can install plugins and modify php code by following instructions and copying analagous chunks of code. At a gross level, I understand the Elgg files and its reliance on plugins.

My site is on a shared server, running GD (not Imagick), per this Tidypics Server Analysis:

PHP version 5.2.9
GD Enabled Elgg requires the GD extension to be loaded
IMagick PHP extension Disabled
exec() Enabled Required for ImageMagick command line
Memory Available to PHP 64MB Change memory_limit to increase
Memory Used to Load This Page 10.95 MB This is approximately the minimum per page
Max File Upload Size 10.00 MB Max size of an uploaded image
Max Post Size 10.00 MB Max post size = sum of images + html form
Max Input Time 300 s Time script waits for upload to finish
Max Execution Time 300 s Max time a script will run
GD imagejpeg Enabled
GD imagepng Enabled
GD imagegif Enabled
EXIF Enabled

 

Thanks!

  • The easiest approach to this is probably going to be create an album, then copy the "View slideshow" link to the new_index view you mentioned.  You'll have to change part of the javascript that says "location.href" to the actual URL of the album with ?view=rss at the end.

    For groups, unless you want them to have the same slideshow it will be a bit more complicated...

    If I were implementing this, I'd create an RSS feed that accepted an album guid or a group guid and then displayed images randomly. You can point the slideshow app to this RSS feed from any page and get a random slideshow with images based on the parameters sent.  This would require some PHP programming, though...

  • Thanks Brett,

    I am extremely literal, so pls bear with me:

    javascript:PicLensLite.start({maxScale:0,feedUrl:location.href+'?view=rss'})

    and this:

    http://brickcollections.com/pg/photos/album/2727/front-page

    would give me:

    javascript:PicLensLite.start({maxScale:0,feedUrl:http://brickcollections.com/pg/photos/album/2727/front-page+'?view=rss'})

    Should I use a relative reference? e.g. /pg/photos/album/2727/front-page

    Do I insert just that code, exactly as shown, or does it go inside a php statement, or some other wrapper that should be obvious to the knowledgeable? :)

    (BTW, I don't have a test version of my site. So I have to do this stuff live. Normally, I am happy to tinker and try things. But having the site FUBARd for a few hours while I learn some basic obvious step sucks. Thus I want to get as close as possible to the actual changes I need to make.)

    Oh yes, the externalpages plugin was installed by default, and I still have it enabled. I guess I could disable externalpages, or this slideshow will go below it. Either might be okay. Or perhaps the relevant page of the externalpages plugin could be modified in the way you describe. Any guidance?

    Thanks again

     

  • Okay, I put it inside an <a href="...">View Slideshow</a> tag, and that helped. But still not working; tweaking it.

    Removed the + from trailing end of the URL. No change. ... Put it back.

    Looking for the php file in the Tidypics plugin that calls the PicLensLite javascript. This file

    /public_html/mod/tidypics/views/default/tidypics/js/slideshow.php contains this one line:

    <script type="text/javascript" src="<?php echo $vars['url']; ?>mod/tidypics/vendors/PicLensLite/piclens_optimized.js"></script>
    
  • Still struggling with inserting slideshow on main page

    My site: http://brickcollections.com

    Per Brett's guidance above,

    I inserted:

    <a href="javascript:PicLensLite.start({maxScale:0,feedUrl:http://brickcollections.com/pg/photos/album/2727/front-page+'?view=rss'})" >vs</a>

    into this file:

    /public_html/mod/custom_index/views/default/canvas/layouts/new_index.php

    But nothing happens when you click on the link. :(

    I wonder if the problem is that new_index.php has no idea where/what PicLensLite is ...

    Any guidance would be greatly appreciated. Thx,

    (The "vs" is just an inconspicuous placeholder, for "View Slideshow," until I get it working.)

  • The feedUrl is wrong. It should be something like:

    feedUrl:'http://brickcollections.com/pg/photos/album/2727/front-page?view=rss'

    The entire string needs to be quoted. Before it was a variable + a string.

  • Thanks, Cash.

    That looks better, and I can see now why it was an (obvious) error.  I revised the line to:

    <a href="javascript:PicLensLite.start({maxScale:0,feedUrl:'http://brickcollections.com/pg/photos/album/2727/front-page?view=rss'})" >vs</a>

    The bad news is that it still doesn't work. :(

    The new_index.php file is nowhere near the PicLensLite folder. Does that function need to be defined, or given a more complete reference?

  • Juipo

    Looking at the code and the source looks like Tidypics inserts a call for the JQuery in head meta:

    <script type="text/javascript" src="<?php echo $CONFIG->wwwroot . 'mod/tidypics/vendors/PicLensLite/piclens_optimized.js'; ?>"></script>

    try adding that to your header.php but it seems it's more complex as it is using .url in the link at the end "javascript:PicLensLite.start({maxScale:0,feedUrl:PicLensLite.indexFeeds()[0].url}) " which is url of the album so url has to be defined differently as you are on the homepage and not on album page. This will take some brains.

    Brett's suggestion seems more simpler.

  • Juipo, Cash, Brett,

    Thanks very much. It is working!

    To summarize (in one place for others):

    To the file /public_html/mod/custom_index/views/default/canvas/layouts/new_index.php

    I added this bit:

    <a href="javascript:PicLensLite.start({maxScale:0,feedUrl:'http://brickcollections.com/pg/photos/album/2727/front-page?view=rss'})" >View Slideshow</a>

    Which was analagous to a line on the the View Album page:

    http://brickcollections.com/pg/photos/album/2727/front-page

    (I should know the php file that makes that page, but I don't. Sorry. See Brett's comment above for what is replaced by what.)

    Then, per Juipo above, I added to

    /public_html/views/default/page_elements/header.php

    <script type="text/javascript" src="<?php echo $CONFIG->wwwroot . 'mod/tidypics/vendors/PicLensLite/piclens_optimized.js'; ?>"></script>

    It works, but I am beginning to see why we should do things with plugins & widgets, rather than monekying around with the Elgg Core and the Tidypics plugin itself. Next time I upgrade these, my View Slideshow on my main page goew away (and hopefully nothng worse happens).  And if I do 5 or 10 such changes ... it will be totally hopeless.

     

     

     

  • Final (I hope) update:

    I moved the slideshow to the external pages plugin. So the implementation described here, for custom index, is not what's on my site right now. But it definitely worked, as described above.

    Moving this to external pages plugin was a no-brainer; it was easier to format consistently, and (best of all) all the hard-coded stuff now resides in a plug-in, not in my random, under-the-hood revision. (Okay, the header is still modified to call the javascript function.)

  • Juipo

    Stephen, glad you got it working. I was trying to display slideshow automatically rather than have a link to display it when testing it on my server, that's why I said it will be more complex but you made it work for what you needed. ;-)