[Elgg 1.5-1.12 & 2.X & 3.X: Tidypics] v2.0.1

Release Notes

  • Adding coalense parameter to resizing command of ImageMagick convert command to get animated gifs correctly resized,
  • Replacing usage of eregi_replace() function (deprecated in php 5.3 and removed in php 7.0) with preg_replace(),
  • Only process image orientation correction for images of formats jpeg and pjpeg to avoid error due to missing exif information for other formats that don't support exif,
  • Register tidypics_batch entity subtype for search (but do not return any tidypics_batch content in a search) because only registered subtypes can be selected in activity page content filter menu,
  • Finnish translations for the basic features added,
  • Correctly load and use Markdown lib of Elgg v2 on plugin settings page tabs,
  • Fixed access to "Photos you're tagged in" page to work again on Elgg 2.X.
  • @Michele - i have just expanded the images on my site's tidypics pages - following your suggestion. see here: https://www.ureka.org/photos/siteimagesall

    you can do this using only CSS, by setting the width of the images (and their HTML containers too) to 100%. the other issue is that the page you linked to has 'lazy loading' of images, so that you don't need to wait for all the images to be downloaded before viewing some of them. i have enabled this on my site too using the Jquery plugin called 'lazysizes' from github.

  • right ok. to do that you will need to use a javascript function like 'masonry' to proportion the images in a way that fits them nicely together. i looked at doing that years ago but never got to perfecting it.

  • part of the issue is that tidypics stores the small versions of the images cropped to a square, so to create the effect you want, you would need to use the large versions of the images for the previews, which may use a lot of data when loading gallery pages. the only way around that, without changing tidypics, is to reduce the size of the large images via the tidypics admin pages, so that they are an appropriate preview size and then also change the 'full' view of tidypics images by overriding the relevant tidypics view in your theme plugin to show the 'master' version of the file instead of the 'large' one. this would work, but has the disadvantage that master images can be very large, potentially.

  • the other part of the google gallery effect that is very nice is to put the full view in a lightbox overlay instead of loading another page. that would be a great improvement. iionly intended to use a jquery gallery plugin to take care of all these aspects, but i think that the google approach is just as good, if not better/more appropriate for a social network galley scenario.

  • has anyone got 'masonry' to work in elgg? i just had another go at testing it and the issue is that when i call the masonry function via my own JS file (taking into consideration all the necessary requiring that requireJS needs) - i always see the same console message that masonry is not defined.

  • for future reference, masonry and isotope can be loaded in elgg using the alternative approach shown here (the default approach fails): https://github.com/metafizzy/isotope/issues/1125

  • iionly was thinking of replacing the cooliris gallery that you are referring to as it is old code and doesn't integrate perfectly into modern browsers. newer gallery code exists that is better. however, what i am pointing to is the idea of removing all 3rd party gallery apps and instead just changing the way tidypics works so that it has the same kind of features built in by default. this has the advantage of allowing commenting to be fluidly integrated into the popup boxes for images and generally allowing the theming to be kept simple. all it requires is the creation of a new ajax view to display parts of the view that is currently being used in tidypics as the 'full view' of the image (along with the comments), that can popup in a lightbox when an image is clicked in a list of images (whether in an album or elsewhere in elgg. basically, this is how G+ works. it would be quite simple to add a timer function to the lightbox to create a slideshow effect too.

  • n.b. i have been using 'isotope' (which contains 'masonry' too) here, to see if i can create the effect you wanted from google, where the images are all the same height and fit nicely horizontally onto the page. so far i haven't been able to do it though. the problem is that isotope/masonry doesn't resize/crop images intelligently, it just places them in a grid in pre-determined ways. there must be a more advanced script somewhere that will calculate the sizes of the images and put them in rows in a 'justified' way (similar to how text is spaced out on a page when the 'justified' mode is used for the paragraph).. i will keep looking.

  • aha, i found a jquery plugin that creates the effect. the effect is called 'justified image gallery' (in general) - https://miromannino.github.io/Justified-Gallery/

  • i've just got this working on my test site, here: https://test.ureka.org/photos/siteimagesall

    it looks more or less correct, but some images are sometimes stretched out incorrectly. i have opened an issue with the coder of the justify code on github.

  • ok yes, i have just got some basic lightbox support going on my local test site here. i was looking through the options for the colorbox lightbox system that elgg uses and i might be able to use it's own options to make a slideshow system for elgg quite easily.

  • at the moment i am just experimenting locally, the community / coders here seem to be fairly quiet recently.

  • Sorry for not responding sooner. Unfortunately, I'm currently down with some cold or flu or something like that - really annoying when it's so hot outside - and therefore I can't do any Elgg stuff right now. I guess I will take it easy at least for this week (maybe even relaxing another week) before I will start doing any Elgg stuff again.

    I've not followed all your postings closely but only read them briefly. Some remarks:

    • thumbnail sizes and CSS are connected somehow, i.e. you can make changes in the Tidypics pages layout but then you might also need to adjust the thumbnail sizes and vice versa.
    • currently 3 thumbnail sizes are used. The two smaller sizes resize the image to squares. The largest thumbnail size only downscales images (with keeping the width/height ratio the same).

    Usage of the largest thumbnail size in the album gallery lists / image lists might result in some issues therefore:

    • if you want to list the images in the gallery with the same width some images WILL be streched as the large thumbnails don't have the same width to be begin with,
    • it might be kind of a bandwidth killer as the large thumbnails are significantly larger than the other two thumbnail sizes (even if you don't display them in fullsize the full size image file must be downloaded),
    • usage of larger image sizes in the galleries views might be problematic for mobile devices.

    Some people might want to use larger images sizes but not all. If you increase the thumbnail sizes to your likings you would also need to adjust the CSS code accordingly. The current layout fits Elgg's default theme and I'm not really eager to change that (a possible optional second layout might be another thing though).

    What I might be able to provide are additional plugin settings for thumbnail creation to allow for creation of square / non-square resizing also for the two smaller thumbnail sizes. This would be "use at own risk options" though.

    I can't say anything about the other scripts mentioned by you as I couldn't check them out yet. Just to clarify: I want to change the slideshow script (replacing of the PicLens script) - when I have the time. I had no other plans about changing / adding other scripts so far.

  • ok, no problem - rest is more important than websites ;)

    it would be helpful to add the ability to choose to have square or non-square images produced when resizing the tidypics thumbnails. there is a feature in the script i have used that allows us to choose which image will be rendered depending on the size of the screen/device - so the small ones could be rendered for mobile devices and larger ones for desktops etc.


  • fyi, this is another nice jquery script that creates an area that can be used to display gallery images easily: http://mad-genius.github.io/mg-space/

  • i now have the lightbox popup for images working on my test site (only on the 'all image page'). the lightbox has been made responsive too. i haven't yet got the commenting and navigation arrows to operate via ajax yet, but that's the next task. once the lightbox is finished, i will look at integrating the animated gallery image display for appropriate pages, then test it all on my site and then think about adding a pull request to tidypics (allowing for feedback).

  • @ura I think you have some issues with lightboxes on your test site resulting in the already implemented lightbox popups of Tidypics not working as they should. If you view a single image (full page view of the image) and then click on the image there should be a lightbox popup with the original unresized image in it. On your site the image opens on a new page instead. My guess is that you either don't have the latest version of Tidypics installed on your test site (or not the latest version of Elgg core) or that another 3rd party plugin is causing the problem.

    My suggestion: first try to get Tidypics fully working as it is before adding any new features. The lightbox popup has no navigation elements to browse through the images but I would say it should be much easier to add these elements to the existing implementation instead of adding a new implementation.

    Also, I'm not sure if clicking on a thumbnail in the gallery view of an album should open the image in a lightbox instead of forwarding the full view of this image. The forwarding to the full view is the usual way it works on Elgg for all kind of content after all.

  • i have over-ridden most views by now in my site's theme, so yes it's probably the case that some are not up to date with the current versions of the plugins i am using. i am intending to go through my site and improve all the tidypics views once i finish the gallery/lightbox views.

    the popup lightbox view for images i am using is just an ajax view that i took from the full view in tidypics, adapted to make sense in a lightbox. so the comments are on the right side, as they are in G+. i think this approach is far more user friendly than the basic idea of having images only available on their own pages - but ultimately it can be a choice for each admin to make. i don't need to integrate the changes into tidypics but i know that some people will want them. it could just be an admin option to choose which method will be used on the site.

  • i have now got the ajax commenting and basic ajax navigation for albums working in the lightbox - you can see on my test page :)

  • yes, i have only changed the 'all photos' page on my test site presently. i intend to add the animated gallery box script to the lightboxes so that the full gallery of icons can be viewed from within the lightbox: http://mad-genius.github.io/mg-space/demo/slick.html

  • i have now got the slider in place in the lightbox that displays the other thumbnails from the gallery belonging to the image being viewed. it works very well, it's like a gallery plugin but without a gallery plugin!

  • for my own site i will probably leave those buttons off. at the moment, the code checks for the hype plugin called 'elgg_slider' and if it is present then the sliding gallery is used - whereas if it is not present then the usual navigation arrows are used. i could make this an admin configuration option instead - however, i haven't yet decided how best to package these changes.. they could either be their own plugin or a direct upgrade for tidypics.

  • @ura you might want to test out Tidypics with the latest commits from the github repo. I've added a new option to the thumbnail settings to allow for creation of square-cut / non-square-cut thumbnail images. Then it might be possible for you to use the "small" thumbnails instead of the "large" ones in the gallery pages and possibly also the image slider to save some bandwith.

  • great ok, i'll have a look at that tomorrow

  • thanks, that looks to work fine to me. unfortunately, there is a bug with the justify-gallery script that means that the function that chooses the most appropriate sized image to use is broken. i will look at fixing that soon.


  • Category: Photos and Images
  • License: GNU General Public License (GPL) version 2
  • Updated: 2020-9-1
  • Downloads: 136458
  • Recommendations: 245

Other Projects

View iionly's plugins