Support » Plugin: Very Simple Event List » Using a custom snippet for widget and event list

  • kirschdaniel

    (@kirschdaniel)


    I love this plugin. It’s simple and does it’s job. One thing that I really would love to see is an option to use my own HTML code for an event to have full control. There need to be predefined variables that could be included into the snippet. The snippet will then be used for each event.

    The result might look like this:

    <div class="event">
      <h4 class="event-title">{vselTitleWithLink}</h4>
      <div class="event-content">
        <p class="event-date">{vselStartAndEndDate}</p>
        <p class="event-time">{vselTime}</p>
        <p class="event-location">{vselLocation}</p>
      </div>
      <a class="event-link button" href="{vselLink}">More...</a>
    </div>

    Thanks for VSEL!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Guido

    (@guido07111975)

    Hi,

    So the HTML is your own and the variables such as vselLocation and vselLink are standalone functions you could output everywhere on your site, when VSCF is activated?

    Guido

    Hi Guido,
    thanks for your answer and interest! Yes, exactly. I (plugin user) write the snippet. Your plugin parses it and replaces every occurence of {VARIABLE_NAME} with the defined variable value. At least, that’s one typicall approach used by other WP plugins.
    VSEL offers the list of variables that can be used in the snippet. They might or might not start with “vsel”.

    The variables could be:

    startDate
    endDate
    startAndEndDate
    time
    location
    link
    image
    imageWithLink
    title
    titleWithLink
    categories
    categoriesWithLink
    description
    summary
    moreInfoText
    linkMoreInfo
    moreInfoTextWithLink
    openMoreInfoInNewWindow

    To be able to control the displayed events, the allready implemented attributes might be to use as a HTML data attribute. eg:

    <div data-vsel="posts_per_page:5;event_cat:'first-category, second-category'">
      <div class="event">
        ...
      </div>
    </div>

    Or using single attributes:

    <div data-vsel-posts_per_page="5" data-vsel-event_cat="first-category, second-category">
      <div class="event">
        ...
      </div>
    </div>

    You may even add some logic like:

    <p data-vsel-if="no_events==true">Sorry, no events this time</p>
    <div data-vsel-if="no_events==false">
     Here are the upcomming events
    </div>

    Or maybe easier: provide it as a variable I may then controll via CSS

    <div class="{vselEventsClass}">
      <p class="no">Sorry, no events this time</p>
      <p class="yes">Here are the upcomming events...</p>
    </div>

    Where vselEventsClass is either “events”, when at least one event is given or “no-events” when no event is available.

    In my CSS I could then use selectors like this:

    .no-events > .yes, .events > .no {
      display: none;
    }

    Of course, the vsel settings like “don’t show the date” are not relevant when using a HTML snippet as this is then responsible for the informationen it wants to provide.

    Cheers
    Daniel

    Plugin Author Guido

    (@guido07111975)

    Hi Daniel,

    I will definitely consider including this because I like the idea. To use it outside the plugin I must create a function for each variable or a shortcode. Guess a function is a cleaner and more common way.

    An alternative is creating a custom plugin that contains all functions described above, in case including this in VSEL itself causes a problem/conflict.

    Am currently busy working on another plugin, but will look into this later this week.

    Guido

    Guido,
    I’m happy to read that you like the idea.

    I would define the snippet directly on the VSEL settings page. (Or an additional vessel snippet page.) IMHO this would make it easier for you to deal with it and I only have a little shortcode in my text.

    In the first step, one single snippet is enough, but being able to add more snippets might be a cool feature. Each snippet might then be used using a shortcode and an id.

    [vsel id="23"]

    The shortcode might be displayed directly beside the snippet. Or – more readable – I can give my snippet a name and use this instead:

    [vsel snippet="myevents"] or [vsel name="myevents"]

    Good luck with your other plugin. What is it about?

    Cheers
    Daniel

    Me again,
    would be cool to be able to provide at least two snippets. One to be used for the widget in a sidebar and one on the list of events. And to make it complete, the third snippet could be the single event page.

    Plugin Author Guido

    (@guido07111975)

    Hi Daniel,

    Have thought about this again but it might not be as simple as we think.. to display a list with events they should be inside a loop. So every new meta function as described before (date, time, location, etc) will only work if it’s operating inside this loop. So your custom HTML snippet will only work if there’s also an operator that contains this loop. And this loop should be having an unique ID/prefix otherwise it might conflict with other loops on your site. Any thoughts about this?

    You’re not able to make the changes you want using custom CSS via the CSS page in the Customizer? Current event list only contains very little styling, just enough to make it look nice.

    Guido

    Good morning Guido,
    I’m very happy to see you interested in your users suggestions and I have a huge respect for your effort. If the implementation is far more work than expected, it would probably be much easier to maybe add some additional HTML and classes and just style the thing using CSS. So in other words: Keep it simple.

    I’m totally new to WP-Plugin programming so my ideas might be harder to implement than I think.

    After taking a deeper look at the widget and your code, here is how I would try to implement it:

    – A snippet consists of two parts. The html code and a name. It can be defined on the plugins setting page.
    – It can be included using a shortcode. Additional attributes might be given in the shortcode – comparable to your current implementation.

    [vsel-snippet name="mysnippet" posts_per_page="5"]

    Some Pseudocode to illustrate the idea:

    snippet = getSnippet($snippet['name']);
    if (snippet)
      loop
        properties = getSingleEventProperties() // include 'vsel-meta.php';
        output = replaceSnippetVariablesWithEventProperties(properties ) // include 'vsel-snippet.php';
      endloop
    endif

    Some suggestions
    In vsel-widget-meta.php instead of using an individual variable for each data, I would use a hash. This would make it much easier to simply replace strings from the snippet.

    So instead of

    $widget_start_date = get_post_meta( get_the_ID(), 'event-start-date', true );
    $widget_end_date = get_post_meta( get_the_ID(), 'event-date', true );
    $widget_time = get_post_meta( get_the_ID(), 'event-time', true ); 

    You might use this:

    $props = ['event-start-date', 'event-date', 'event-time'];
    $id = get_the_ID();
    $vselProps = [];
    foreach ($props as $prop => $val) {
      $vselProps[] = get_post_meta( $id, $val, true );
    }

    Add additional properties

    $vselProps['event-title-with-link'] = '<a href="'. get_permalink() .'" rel="bookmark" title="'. get_the_title() .'">'. get_the_title() .'</a>';

    And in your snippet script you might then search for the {…} patterns and replace them.

    Here is a small proof of concept I just wrote:

    <?php
    
    $snippet = '<div class="event">
      <h4 class="event-title">Start: {start-date}</h4>
      <div class="event-content">
        <p class="event-date">End: {end-date}</p>
        <p class="event-time">Time: {time}</p>
        <p class="event-location">At: {location}</p>
      </div>
    </div>';
    
    $props = ['event-start-date' => 'Today', 'event-end-date' => 'Tomorrow', 'event-time' => '12:00-14:00', 'event-location' => "home"];
    $vselProps = [];
    foreach ($props as $prop => $val) {
      // remove the "event-" part just to keep it simple in the snippet
      $propWithoutEventPrefix = preg_replace("/^event-/", "", $prop);
      $vselProps[$propWithoutEventPrefix] = $val;
    }
    
    // replace all occurences in the snippet
    echo preg_replace_callback(
      "/{(.+)?}/",
      function ($foundPattern) {
        global $vselProps;
        return $vselProps[$foundPattern[1]];
      },
      $snippet
    );
    
    ?>

    Cheers
    Daniel

    Plugin Author Guido

    (@guido07111975)

    Hi Daniel,

    And ik becomes more and more complex every time 😉

    Between you and me, I’m not a very experienced programmer and that’s why my plugins have a very solid and easy to understand code structure. And I want to keep it that way. It seems that in order to do this properly I need a partial rewrite of my plugin and this is too much for me. And I don’t like to include third party scripts, without fully understanding it, so that’s why I want to build it myself. But it’s not as easy as I thought before..

    As mentioned before, a good alternative would be a custom plugin with it’s own shortcode that contains the event list how you want it. You can retrieve all meta options directly from the database and use your own custom loop.

    Guido

    Guido,
    I like your straight point of view and am totally fine with your answer.

    Finally your plugin and this discussion helped me a lot to understand the practical nature of WP plugins.

    Have a good day
    Daniel

    Plugin Author Guido

    (@guido07111975)

    Hi Daniel,

    I thought it was possible without making heavy changes to my plugin, but when I take a closer look my new conclusion is it’s a lot of work and not easy to do 🙁 It’s a partial rewrite of my plugin, for sure.

    All the elements of the list itself (title, date, time, etc) are included in file vsel-list and vsel-widget-list. So I was thinking about including all these elements in one function and putting all elements in an array. Then you can hook into this function afterwards and change array order. But it’s just too much work for me right now.

    Guido

    creativemanner

    (@creativemanner)

    What about overwriting the template files by sourcing those from theme/vse folder like Tribe event plugin?

    Plugin Author Guido

    (@guido07111975)

    Hi there,

    Maybe I will add this in a future release, because for that I should make some major changes too. Might have to change file structure even.

    And to be honest, I like the layout of my plugin as it is now; it’s very simple and using some custom CSS you can change it’s appearance completely.

    Guido

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.