Jump to content
louisstephens

"Take down" Image after Time Expires

Recommended Posts

So I have an odd feature to tackle. I want to include an image in the template (aka a header), but want to implement a function to set a time in the future. Once the time was met, the image will automatically come down (if possible switch to another image, but that is not something Ill worry about now). 

Now, I set up an image field "timed_image", and I set up the date/time field "select_timed_expire". I also know how to echo the information on the page, but where I am finding issue is actually how to implement this. I could use javascript and pass the date/time to it, but from there I am quite lost on how to implement this.

Has anyone done something like this before?

Share this post


Link to post
Share on other sites

Something like this?

$now = date("Y-m-d h:i:s");
$expires = $page->select_timed_expire // assuming you set output format for this field to the same as $now.

if ($now < $expires){
      echo "<img src='{$page->timed_image->url}'/>";

} else {
     // do something else or nothing.
}
  • Like 2

Share this post


Link to post
Share on other sites

Same solution as Reno, but I'd compare the timestamps and not date strings :)

$now = time();
$expires = strtotime($page->select_timed_expire); // If you have a date string as output format

  • Like 2

Share this post


Link to post
Share on other sites

Wanze's way is the cleanest. I tend to do date strings for these kinds of things because sometimes I want to expire things on the day, or on a specific hour — rarely at the exact second.

Share this post


Link to post
Share on other sites

If you want to cycle to the next image after the expiration, you can use a multi-image field and show the first image until the expiration date, and then move on to the second image.

$now = date("Y-m-d h:i:s");
$expires = $page->select_timed_expire // assuming you set output format for this field to the same as $now.
$url = $page->timed_image->first()->url; // default to first image

// if it's past the expiration, get the 2nd image. 0 based index, so 1 is 2nd image.
if ($now > $expires) $url = $page->timed_image->eq(1)->url; 

echo "<img src='$url'/>"; 

Share this post


Link to post
Share on other sites

I had just found out about using first();. but had a quick question. Most of the pages will have the default single image as the header, but once in awhile I will need to run a different image in its' place (set to expire). Will the above example cause an issue on the pages that only have the one image and nothing before it in the array?

Share this post


Link to post
Share on other sites

You would just need to check if there is an expiration set, if there isn't, then just stick with the first image. If there is an expiration set, then check the dates and respond accordingly.

untested, written in browser.

$url = $page->timed_image->first()->url; // default to first image, make sure your image field is set to multiple.
$expires = $page->select_timed_expire // assuming you set output format for this field to the same as $now.

if ($expires){
    if (date("Y-m-d h:i:s") > $expires){
        $url = $page->timed_image->eq(1)->url; // if it's past the expiration, get the 2nd image.
    }
}

echo "<img src='$url'/>"; 
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Roberts R
      Hello.
      I never though about it before but when I insert image into CKeditor field I don't get ALT tag filled from image that has it. Do I have to do it manualy for inserted image or Im doing something wrong?
       
    • By Orkun
      Hi Guys
      I needed to add extended functionalities for the InputfieldDatetime Module (module is from processwire version 2.7.3) because of a Request of Customer.
      So I duplicated the module and placed it under /site/modules/.
      I have added 3 new Settings to the InputfieldDatetime Module.
      1. Day Restriction - Restrict different days based on weekdays selection (e.g. saturday, sunday) - WORKING

       
      2. Time Slots - Define Time slots based on custom Integer Value (max is 60 for 1 hour) - WORKING

       
      3. Time Range Rules per Weekday - Define a minTime and MaxTime per Weekday (e.g. Opening Hours of a Restaurant) - NOT WORKING PROPERLY

       
      The Problem
      Time Slots and Day Restriction working fine so far. But the Time Range Rules per Weekday doesn't work right.
      What should happen is, that when you click on a date, it should update the minTime and maxTime of the Time Select.
      But the change on the select only happens if you select a date 2 times or when you select a date 1 time and then close the datepicker and reopen it again.
      The time select doesn't get change when you select a date 1 time and don't close the picker.
      Here is the whole extended InputfieldDatetime Module.
      The Files that I have changed:
      InputfieldDatetime.module InputfieldDatetime.js jquery-ui-timepicker-addon.js (https://trentrichardson.com/examples/timepicker/) - updated it to the newest version, because minTime and maxTime Option was only available in the new version  
      Thats the Part of the JS that is not working correctly:
      if(datetimerules && datetimerules.length){ options.onSelect = function(date, inst) { var day = $(this).datetimepicker("getDate").getDay(); day = day.toString(); var mintime = $(this).attr('data-weekday'+day+'-mintime'); var maxtime = $(this).attr('data-weekday'+day+'-maxtime'); console.log("weekday: "+day); console.log("minTime: "+mintime); console.log("maxTime: "+maxtime); var optionsAll = $(this).datetimepicker( "option", "all" ); optionsAll.minTime = mintime; optionsAll.maxTime = maxtime; $(this).datetimepicker('destroy'); $(this).datetimepicker(optionsAll); $(this).datetimepicker('refresh'); //$.datepicker._selectDate($(this).attr("id"),date); //$.datepicker._base_getDateDatepicker(); // var inst = $.datepicker._getInst($(this)); // $.datepicker._updateDatepicker(inst); /*$(this).datetimepicker('destroy'); InputfieldDatetimeDatepicker($(this), mintime, maxtime); $(this).datetimepicker('refresh'); */ // $(this).datetimepicker('option', {minTime: mintime, maxTime: maxtime}); } } Can you have a look and find out what the Problem is?
      InputfieldDatetime.zip
       
      Kind Regards
      Orkun
    • By Mithlesh
      Changing it to null
    • By Mithlesh
      Hi, I have one URL - writerrelocations.com/contact-now/

      I have one issue where my header Image is appearing again after the contact form, for your reference:



      I have checked my processwire template section where have not added any Image field besides Header Image, attaching the same for the reference:




      PLEASE help me to get rid of the image below contact form

      Waiting for the swift response!

      Thanks
       
×
×
  • Create New...