Tidypics - Storing Width and Height of an Image

In Tidypics resize.php use function getimagesize to get height and width of the uploaded picture.

How can I save height and width values in the database and recall them when I load a gallery?

In a Tidypics pluging I'm writing I need to write:

                <a href="<?php echo $vars['url'].'photos/thumbnail/'.$image_guid.'/large';?>" itemprop="contentUrl" data-author="owner" data-size="<?php echo $width."x".$height;?>" />
                <img src="<?php echo $vars['url'].'photos/thumbnail/'.$image_guid.'/large';?>" class="elgg-photo" itemprop="thumbnail" alt="<?php echo $desc;?>" />
                </a>

Thanks for help!

  • The basic step is to take advantage of the elgg entity creation event during the file upload and save the image width and height as metadata on the image entity created.

    @iionly can help you more on this.

  • @Team Webgalli thanks, starting from your highslide plugin I'm trying to create a Tidypics pluging using justified gallery and photoswipe, but I'm facing too many problems.

    Could I hire your support? I already purchased your Videos pluging to which I must finish add a uploading progress bar ...

  • Image height and width for the resized images are Tidypics plugin settings, i.e. all thumbnails are created with the same dimensions (as set in the plugin settings). You can get the array of thumbnail image sizes with

    $image_sizes = elgg_get_plugin_setting('image_sizes', 'tidypics');

    Within this array you'll find the following entries (here with default sizes):

    $image_sizes['large_image_width'] = $image_sizes['large_image_height'] = 600;
    $image_sizes['small_image_width'] = $image_sizes['small_image_height'] = 153;
    $image_sizes['tiny_image_width'] = $image_sizes['tiny_image_height'] = 60;

    So, if you want to get for example the width of the large thumbnail (which I would suggest to use in a slideshow) you can get it with

    $large_image_width = $image_sizes['large_image_width'];

    It works the same way for any other dimension.

    There's NO NEED to save the image dimensions separately for an image. The dimensions set in the plugin settings will get used when uploading an image to create the thumbnails.

  • Hi @iionly, thanks it sounds all clear now, but do you have any idea why with

    <?php
        $image_sizes = elgg_get_plugin_setting('image_sizes', 'tidypics');
        $large_image_width = $image_sizes['large_image_width'];
        echo $large_image_width;
    ?>x
    <?php
        $image_sizes = elgg_get_plugin_setting('image_sizes', 'tidypics');
        $large_image_height = $image_sizes['large_image_height'];
        echo $large_image_height;
    ?>

    I get "axa" ???

  • @stefano : sorry, I misundestood your question. If you are just looking for the thumbnail / displayed images width and height then you can use the plugin settings values. Because the images are cropped as per these values. I thought you were in need of image's original width and height.

    We wont recommend using the highslide plugin as a reference. It was developed for an older version of tidypics plugin.

     

  • Not sure what exactly you mean with "axa". Is that the output on screen? In this case the "x" could be from the "x" in the line

    ?>x

    How are you include this code? Has the Elgg engine been started before this code is executed? If not, calling Elgg API functions will fail and you can't expect an useful output (if any at all). You might want to add the line

    require 'engine/start.php';

    before the above code (you might need to adjust the path to engine/start.php if the script is not within the Elgg root directory).

  • thanks both and sorry if I was not clear from the begining.

    even if not the best, starting from highslide pluging from Team Wegalli I created a plugin using the complex but very nice photoswipe script (http://photoswipe.com) but I still have two issues:

    1. photoswipe needs to to predefine image size to be opened, dimensions are used for progressive loading, stretched placeholder, initial zoom-in transition, panning, zooming, caption positioning. For example the output should be

    data-size="600x420"

    I tried merging html and php in the following way but it's not working:

    <?php
        $image_sizes = elgg_get_plugin_setting('image_sizes', 'tidypics');
        $large_image_width = $image_sizes['large_image_width'];

        $image_sizes = elgg_get_plugin_setting('image_sizes', 'tidypics');
        $large_image_height = $image_sizes['large_image_height'];
    ?>

    <a href="<?php echo $vars['url'].'photos/thumbnail/'.$image_guid.'/large';?>" itemprop="contentUrl" data-author="owner" data-size="<?php echo $large_image_width."x".echo $large_image_height; ?>" />
    <img src="<?php echo $vars['url'].'photos/thumbnail/'.$image_guid.'/large';?>" class="elgg-photo" itemprop="thumbnail" alt="<?php echo $desc; ?>" />
    </a>

    so I tested writing only

    <?php echo $large_image_width."x".echo $large_image_height; ?>

    but the resulting output was

    axa

     

    2. the other issue is mentioned in a different post and it refers to the position of the photoswipe class according to the tags <ul> and <li>

  • Try it with

    $image_sizes = elgg_get_plugin_setting('image_sizes', 'tidypics');
    $image_sizes = unserialize($image_sizes);

    Then it should work to retrieve the sizes, e.g.

    $large_image_width = $image_sizes['large_image_width'];

    Regarding the other issue I don't know how to provide any help. It's beyond me to debug your code from the firebug output alone. As already said before several time, the highslide plugin might not be the best starting point for adding a slideshow as it is based on the Elgg 1.7 version of Tidypics and the code has changed considerably since then. A better starting point might be mod/tidypics/views/default/js/photos/tidypics.php where starting of the colorbox popup when clicking on the fullsize image link is implemented. It might work to simply replace the colorbox method with the corresponding method of the slideshow of your choice.

  • Thanks iionly, that works to retrive the size, but I realized now that this is not the right solution.

    The large size of the images retrive the default size of 600x600 px without taking care of the aspect ratio.

    Probably what Team Webgalli was proposing was the right way, also because now seems better to open the master image (as the original image file is also used when viewing the image in the lightbox popup).

    Could you please help me proposing a good way to save the original image dimensions separately and retrive them latter?

  • Is it even required to set the width and height for the slideshow to work? What happens if you omit this parameter? Wouldn't it display the image without resizing in this case?

    I think with using the original image instead of the large thumbnail it would get even worse if you would use the real image dimensions because the image size could vary immensely (worse to watch the slideshow) and some images might be even larger than the screen resolution. For the full view of a single image in Tidypics it's different because it's only a single image viewed and the max size is limited (via CSS) to 95% of screen size.

    If you still want to get the image size then check out:

    http://php.net/manual/en/function.getimagesize.php

    http://php.net/manual/en/function.imagesx.php

    http://php.net/manual/en/function.imagesy.php

    You would have to modify the image class accordingly for the dimensions to be saved for each image at upload time. But I won't go into details here (sorry but I simply don't have the time to explain every single step).