will.hawthorne.dev

  • How to add alternative text (alt tag/alt text) to the featured image in Tribe Events Calendar’s REST API response.

    As of March 15th, 2022, the (WordPress plugin) Tribe Events Calendar’s REST API response for an event does not include the alt text for the featured image.

    Alt text is an important part of the image REST response, so here’s how to add it:

    add_filter('tribe_rest_event_featured_image', 'wch_add_alt_text_featured_image_tribe_rest_api', 10, 2);
function wch_add_alt_text_featured_image_tribe_rest_api($data, $post) {
    if($data['id'] && !array_key_exists('alt_text', $data)) {
        $data['alt_text'] = get_post_meta( $data['id'], '_wp_attachment_image_alt', true );
    }
  
    return $data;
}

    The filter being used is found in the Tribe Event Calendar’s Post_Repository.php file:

    \the-events-calendar\src\Tribe\REST\V1\Post_Repository.php

    •

    William

    •

  • Protected: Private

    This content is password protected. To view it please enter your password below:

    •

    William

    •

  • Solving an issue with Slick Carousel slides growing huge when inside a CSS Grid or Flexbox container, only on Firefox

    I had this issue today where when I went to test a new module inside Firefox, the slides themselves were 30k+ pixels in width. Luckily a quick google search led me to https://github.com/kenwheeler/slick/issues/982.

    The issue has something to do with the combination of Firefox’s Flexbox & Grid implementation, and something inside the Slick Carousel…somehow Firefox is getting confused about item widths in the carousel that’s inside Flexbox/CSS Grid. (Note: the linked issue was originally about Flexbox, but my issue was a slider inside a a CSS Grid column.)

    The first response with hundreds of reacts suggested:

    * {
  min-height: 0;
  min-width: 0;
}

    I tried those rules, but individually on each of the nodes leading down to the slide itself, instead of trying a blanket rule set for literally everything. It didn’t work.

    I scrolled further to find the answer that actually worked for me.

    .carousel {
  overflow: hidden;
  min-width: 100%;
  width: 0;
}

    I have no idea how a contradiction of 0 width and 100% min-width does anything. The overflow declaration didn’t really affect anything, at least for my use case.

    •

    William

    •