-1

I have a WordPress 'weather-cam' page. The page shows the most recent 10 photos of our webcam (for 3 webcams in total). The images are updated every 10 minutes by uploading them via FTP to a server. The images are numbered from image0.jpg to image9.jpg and are being updated in a cyclic fashion: eg image7.jpg is uploaded, 10 minutes later image8.jpg is uploaded, 10 minutes later image9.jpg is uploaded, 10 minutes later image0.jpg is uploaded etc.

I want to display the images in chronological order and with the time they were taken/uploaded mentioned under the photo.

An older version of the website (in Umbraco) was using .aspx (which, being a C# programmer, I fully understand) but I know absolutely nothing about .php. The old version would call a function that would return a list of strings with the filenames prefixed by ? and then the number of ticks since a start date. The website would then dynamically use that list to display the images in the correct order with the correct time and make sure no cached image was used.

Example of such a returned list (sample values): image0.jpg?12345678, image9.jpg?12345677, image8.jpg?12345676, image7.jpg?1234565 etc.

The ?12345678 would be converted back to the date and cause the browser to reload the image and not used cached ones.

How could I achieve the same thing using WordPress/php.

To show you what I mean:

old site = http://www.glidingcanterbury.org.nz/weather-cam.aspx new site = http://canterburyglidingclub.nz/weather-cam/

You'll notice that the new site has just a static display of the date and the images are not in chronological order (they just go from 9 down to 0).

I've though about writing some C# code that I would run on my own personal server which would return the sorted list and timestamps and then manually adjust a MyWeathercam.html file on my personal server (this would certainly work) but linking to that MyWeathercam.html in an makes it look all wrong and so does linking to the MyWeathercam.html instead of the page because it would totally ignore the installed theme.

Maybe my question could also be: how can I 'inline' code dynamically in a WordPress page? Or: how to dynamically (programmatically) update the contents of a WordPress page?

I hope this makes some sense. Any help is greatly appreciated.

Thanks.

  • in PHP you have the function filemtime (php.net/filemtime) to known the modification time of the file and then you can sort by time. Then you can make a shortcode to display all images in the good order – mmm Nov 11 '17 at 0:29
  • Most of this question if not all is pure PHP, no WordPress specific code or knowledge necessary. Remember though, we have a 1 question per question policy, your last bit about inlining code dynamically should be a separate question ( hint: shortcodes ) – Tom J Nowell Nov 11 '17 at 0:34
0

to generate the galerie, you can put this shortcode in the file functions.php of your theme (create a child theme if the theme can be updated)

add_shortcode("webcamPictures", function ($attr, $content, $tag) {

    $picturesByLine = 5;

    $directoryBase = realpath(__DIR__ . "/../../../images");
    $urlBase = home_url("/images");


    // reading pictures

    $picturesRaw = glob("$directoryBase/{$attr["type"]}*");

    $pictures = [];


    foreach ($picturesRaw as $p) {

        $pictures[] = [
            "filename" => basename($p),
            "mtime" => filemtime($p),
        ];

    }


    // sorting

    usort($pictures, function ($p1, $p2) {
        return $p2["mtime"] - $p1["mtime"];
    });


    // display

    $firstPicture = array_shift($pictures);
    $firstPictureURL = "$urlBase/{$firstPicture["filename"]}";

    $picturesEnd = count($pictures) - 1;


    ob_start();

    ?>
        <table class=" table table-hover"
            style="table-layout: fixed; border-collapse: separate; border-spacing: 30px;">
            <tbody>
                <tr>
                    <td style="bgcolor="#EAEAEA"><a
                        href="<?php echo esc_html($firstPictureURL);?>"><img
                            src="<?php echo esc_html($firstPictureURL);?>"></a>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class=" table table-hover"
            style="table-layout: fixed; border-collapse: separate; border-spacing: 30px;">
            <tbody>
                <tr>

                    <?php foreach ($pictures as $index => $p) {?>

                        <?php
                            $pictureURL = "$urlBase/{$p["filename"]}";
                        ?>

                        <td style="width: 20%;" bgcolor="#EAEAEA"><a
                            href="<?php echo esc_html($pictureURL);?>"><img
                                src="<?php echo esc_html($pictureURL);?>"></a>
                        </td>


                        <?php
                            if (    (0 === ($index + 1) % $picturesByLine)
                                &&  ($index !== $picturesEnd)
                            ) {
                        ?>
                            </tr><tr>
                        <?php }?>


                    <?php }?>

                </tr>

            </tbody>
        </table>


    <?php

    $content = ob_get_clean();


    return $content;

});

to use this shortcode, put this in your page content : [webcamPictures type="CGCHdCam1"]

  • That is absolutely fantastic! Thank you SO MUCH! I could never have written your code (not being familiar with php) but at least I can read this. I learned a lot from it. I managed to figure out how to get the date below the photos as well. – Syntax Error Nov 11 '17 at 14:09
  • Still a question though: for some reason the first picture has a border that's only visible on hover, the rest of the pictures have a static gray border. Why is there a difference between the two when the code for them is the same? I would like the first picture to also always have the gray box. Updated site can be seen on URL I posted above. Thanks!! – Syntax Error Nov 11 '17 at 14:34
  • Another question! Does the code you so kindly provided have to be in functions.php or could they reside in a non-theme-dependent place as well? – Syntax Error Nov 11 '17 at 15:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.