Posted in Posted inWordpress CodingPHP

Used on this site:
WordPress Custom “Hero Header” Modifications

August 18, 2023|  Permanent URL: https://michaelkupietz.com?p=2978
Used on this site: WordPress Custom “Hero Header” Modifications

This site uses the “Sinatra” free WordPress theme as its base. Sinatra includes a single “Hero Header” the row of 3 animated featured posts on the home page which changes background images as you mouse over post titles within it. I wanted this to be multi-row. The code natively contained an option to include up to 12 featured posts, which could easily be made to wrap around to new rows, but the problem was, the background of the entire section containing all rows changed when you moused over a post, not just the single row, and I wanted not just a row-by-row background, but I wanted potentially unlimited rows.

I moved the code that generates the rows into a function, and then called it repeatedly, once for each row I want. At some point I may make it automatically add as many rows as are required to display all posts, but as of this writing, every time I add one more post than there is room for, I edit the bottom of this file to add another row.

Here, then, is my updated version of Sinatra’s /template-parts/hero/hero-hover-slider.php:

<?php
/**
 * The template for displaying Hero Hover Slider.
 *
 * @package     Sinatra
 * @author      Sinatra Team <hello@sinatrawp.com>
 * @since       1.0.0
 */


    

$postsperrow = 3;

$sinatra_hero_categories = !empty($sinatra_hero_categories)
    ? implode(", ", $sinatra_hero_categories)
    : "";

// Setup Hero posts.

//function herorow($postsperpage,$offset,$order,$sinatra_hero_categories) {return '<h2>hi '.$offset.'</h2>';}


function count_total_post_media( $id ) {
        // from https://wordpress.stackexchange.com/questions/246055/count-total-number-of-images-in-post-and-echo-results-as-number
        $array = get_post_galleries( $id, false );
        $key = 0;
    $theOut=array();
      //  $src = 0;
        while ( $key < count( $array ) ){
          //  $src += count( $array[$key]['src'] );
            $theOut= array_merge($theOut,explode(',',$array[$key]['ids']));
            $key++;
        }
$newarray=array_column(get_children($id),'ID'); //get_children returns an array of obects, which has to be handled differently than ordinary arrays, because otherwise it wouldn't be PHP

/*DEBUGGING if(is_user_logged_in()) {echo "<!-- ".print_r($newarray)." -->";echo "<!-- ".get_post_thumbnail_id($id, "full")." -->"; }  */
       $keynew = 0;
      //  $srcnew = 0;
       $theOutnew=array();
        while ( $keynew < count( $newarray ) ){
          //  $src += count( $array[$keynew]['src'] );
            $theOutnew[]= $newarray[$keynew];
            $keynew++;
        }


$theFinalArray=array_unique(array_merge($theOut,$theOutnew));
if(has_post_thumbnail( $id )) {

if (($key = array_search(get_post_thumbnail_id($id) , $theFinalArray)) !== false) { unset($theFinalArray[$key]); } else { echo "<!-- ".array_search(get_the_post_thumbnail_url($id, "full") , $theFinalArray)." -->";}

}
    /* NOTE: Tested, this already doesn't detect LJ-divider because it's added by a shortcode */
$theFinalCount=count($theFinalArray); // was "$theFinalCount=count($theFinalArray)-$hasThumb;" at the end, but this appears to be leftover from something removed, $hasthumb isn't defined anywhere
//    if(is_user_logged_in()) {echo "<!-- ".print_r($theOut)." -->"; }
      //  return intval( $src );
    return intval( $theFinalCount );
    }



function herorow($postsperpage, $offset, $order, $sinatra_hero_categories)
{
    $sinatra_args = [
        "post_type" => "post",
        "post_status" => "publish",
        "order" => $order, //'ASC',
        "posts_per_page" => $postsperpage, //3 //sinatra_option( 'hero_hover_slider_post_number' ), // phpcs:ignore WordPress.WP.PostsPerPage.posts_per_page_posts_per_page
        "offset" => $offset,
        "ignore_sticky_posts" => true,
        "tax_query" => [
            // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query
            [
                "taxonomy" => "post_format",
                "field" => "slug",
                "terms" => ["post-format-quote"],
                "operator" => "NOT IN",
            ],
        ],
    ];

    $sinatra_hero_categories = sinatra_option("hero_hover_slider_category");

$atts=array($postsperpage, $offset, $order, $sinatra_hero_categories);
$data = getFunctionTransient(__FUNCTION__,    $atts); if ( $data != null) {return "<!-- transient ".__FUNCTION__." code for atts ". json_encode( $atts ) ." -->". $data;}

    if (!empty($sinatra_hero_categories)) {
        $sinatra_args["category_name"] = implode(
            ", ",
            $sinatra_hero_categories
        );
    }

    $sinatra_args = apply_filters(
        "sinatra_hero_hover_slider_query_args",
        $sinatra_args
    );

    $sinatra_posts = new WP_Query($sinatra_args);

    // No posts found.
    if (!$sinatra_posts->have_posts()) {
        return false;
    }

    $sinatra_hero_bgs_html = "";
    $sinatra_hero_items_html = "";

    $sinatra_hero_elements = (array) sinatra_option(
        "hero_hover_slider_elements"
    );
    $sinatra_hero_readmore =
        isset($sinatra_hero_elements["read_more"]) &&
        $sinatra_hero_elements["read_more"]
            ? " si-hero-readmore"
            : "";

    while ($sinatra_posts->have_posts()):
        $sinatra_posts->the_post();

        // Background images HTML markup.
        $sinatra_hero_bgs_html =
            
            
          // 1px included below to prompt the lazy loader to fetch the images. Silly, I know. For a while I used full size images with just 0.001 opacity but sometimes it ignored the opacity. 
           
            '<div class="hover-slide-bg" data-background="' .
            get_the_post_thumbnail_url(get_the_ID(), "full") .
            '">'  . '<img style="display:block;position:relative;top:0;width:1px !important;height:1px !important;left:0;z-index:999;opacity:0.01 !important" src="'. 
             get_the_post_thumbnail_url(get_the_ID(), "full") .'\" />' . '</div><!-- ' .get_the_ID(). ' turl '. get_the_post_thumbnail_url(get_the_ID(), "full").' -->' .
            $sinatra_hero_bgs_html; //reversing the order. Must be reversed below too.

        // Post items HTML markup.
        //    ob_start();

        ob_start();
        echo '<div class="col-xs-' .
            intdiv(12, $postsperpage) .
            " xmkwrapper hover-slider-item-wrapper";
        echo esc_attr($sinatra_hero_readmore);
        echo '"  data-background="';
        echo get_the_post_thumbnail_url(get_the_ID(), "full");
        echo '"><!-- #2 ' .get_the_ID(). ' turl '. get_the_post_thumbnail_url(get_the_ID(), "full").' -->

        <div class="hover-slide-item xmkparent-div">
            <div class="slide-inner xmkpost-div" style="--bg-url: url(';
        echo get_the_post_thumbnail_url();
        echo '"><!-- #3 ' .get_the_ID(). ' turl '. get_the_post_thumbnail_url(get_the_ID(), "full").' -->';

        if ( 
            isset($sinatra_hero_elements["category"]) &&
            $sinatra_hero_elements["category"]
        ) {
            echo '<div class="post-category">';
            sinatra_entry_meta_category(" ", false);
            echo " ";
            sinatra_entry_meta_genre(" ", false);
            echo "</div>";
        }
        if (get_the_title()) {
            echo "<h3>";

            $thepre = get_post_meta(get_the_ID(), "hero_pre", true);
            if ($thepre) {
                echo '<p style="font-size:.6em;padding:.25em 0;margin:0;width:100%;"><i>' .
                    $thepre .
                    "</i></p>";
            }
            echo '<a href="';
            echo esc_url(sinatra_entry_get_permalink());
            echo '">';

            /* was        
the_title();
...which includes echo() in executing. */

            $thistitle = get_the_title();
            $thiscategory = get_the_category(get_the_ID());

            $thiscategoryterm = ($thiscategory[0]->name)=='feature'?($thiscategory[1]->term_id):($thiscategory[0]->term_id);
        /*    BugFu::log("title ",false);
            BugFu::log($thistitle,false);
            BugFu::log("thiscat ",false);
            BugFu::log($thiscategory,false);
            BugFu::log("thiscategoryterm ",false);
            BugFu::log($thiscategoryterm,false); */
            
            $colonpos = strpos($thistitle, ":");
            if ($colonpos !== false) {
              
 $thistitle =  '<h6 '.($thepre?'style="display:none !important"':'').' class="titleprefix">' .
                        
                     substr_replace($thistitle, ":</h6>"."<div class=\"" . getClassOfCatOrParentCat($thiscategoryterm)."\"></div>", $colonpos, strlen(":"));
                    
               /*     str_replace(":", ":</h6>"."<div class=\"" . getClassOfCatOrParentCat(get_the_category(get_the_ID())[0]->term_id)."\"></div>", $thistitle);
*/
    
            } else {$thistitle= "<div class=\"" . getClassOfCatOrParentCat($thiscategoryterm)."\"></div>".$thistitle;} 
        //    echo "<!-- id ".get_the_ID()."  cat ".print_r(get_the_category(get_the_ID()))." -->";
             echo ($thistitle);
 $thepost = get_post_meta(get_the_ID(), "hero_post", true);
            if ($thepre) {
                echo '<p style="font-size:.5em;padding:.25em 0;margin:0;"><i>' .
                    $thepost .
                    "</i></p>";
            }
            /* end replacement */

            echo "</a>";
            $thepost = get_post_meta(get_the_ID(), "hero_post", true);
            if ($thepost) {
                echo '<p class="heropre" style="font-size:.6em;padding:.25em 0;margin:0;"><i>' .
                    $thepost .
                    "</i></p>";
            }
            echo "</h3>";
        }

        if (
            isset($sinatra_hero_elements["meta"]) &&
            $sinatra_hero_elements["meta"]
        ) {
            echo '    <div class="entry-meta">
                        <div class="entry-meta-elements">';
echo '<div class="herosummary">'.get_the_excerpt().'</div>';
            //sinatra_entry_meta_author();

          /*  sinatra_entry_meta_date([
                "show_modified" => false,
                "published_label" => "",
            ]); */

            if (function_exists("bac_post_word_count")) {
                echo '<span class="wordcount">';
                bac_post_word_count();
                echo " words</span>";
            }
            $theMediaCount =/* count(get_attached_media(get_the_ID())) + count(get_children(get_the_ID())) + */   count_total_post_media(get_the_ID()); // - count(get_post_galleries(get_the_ID(),false)) ; //length(get_attached_media()) + 
            
            if ($theMediaCount) {
//if(is_user_logged_in()) {echo "<!-- ".var_dump(get_children(get_the_ID())).". -->"; }
                
                echo '<span class="mediacount">';
                echo $theMediaCount;
                echo " media item";
                echo $theMediaCount == 1 ? "" : "s";
                echo "</span>";
            }

            echo '</div>
                    </div><!-- END .entry-meta -->';
        }

        if ($sinatra_hero_readmore) {

            echo '<a href="';
            echo esc_url(sinatra_entry_get_permalink());
            echo '" class="read-more si-btn btn-small btn-outline btn-uppercase" role="button"><span>';
            echo esc_html_e("Continue Reading", "sinatra");
            echo "</span></a>";
        }

        echo '</div><!-- END .slide-inner -->
        </div><!-- END .hover-slide-item -->
    </div><!-- END .hover-slider-item-wrapper -->';

        $sinatra_hero_items_html = ob_get_clean() . $sinatra_hero_items_html; //reverse the order because I feel like having it that way. Remember to fix the order of the background images too, above, if yu change it back.
    endwhile;

    // Restore original Post Data.
    wp_reset_postdata();

    // Hero container.
    $sinatra_hero_container = sinatra_option("hero_hover_slider_container");
    $sinatra_hero_container =
        "full-width" === $sinatra_hero_container
            ? "si-container si-container__wide"
            : "si-container";

    // Hero overlay.
    $sinatra_hero_overlay = absint(sinatra_option("hero_hover_slider_overlay"));

    $htmloutfinal =
        '<div class="si-hover-slider slider-overlay-' .
        esc_attr($sinatra_hero_overlay) .
        '" style="z-index:-' .
        $offset .
        '">
    <div class="hover-slider-backgrounds">' .
        wp_kses_post($sinatra_hero_bgs_html) .
        '</div><!-- END .hover-slider-items -->

    <div class="si-hero-container ' .
        esc_attr($sinatra_hero_container) .
        '">
        <div class="si-flex-row hover-slider-items">' .
        //wp_kses_post
        ($sinatra_hero_items_html) .
        '</div><!-- END .hover-slider-items -->
    </div>

    <div class="si-spinner visible">
        <div></div>
        <div></div>
    </div>
</div><!-- END .si-hover-slider -->';



setFunctionTransient(__FUNCTION__, $htmloutfinal ,$atts)    ;

return "<!-- orignal code for atts ". json_encode( $atts ) ." -->".$htmloutfinal;


}

echo herorow($postsperrow, 0, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 1, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 2, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 3, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 4, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 5, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 6, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 7, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 8, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 9, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 10, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 11, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 12, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 13, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 14, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 15, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 16, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 17, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 18, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 19, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 20, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 21, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 22, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 23, "ASC", $sinatra_hero_categories);
echo herorow($postsperrow, $postsperrow * 24, "ASC", $sinatra_hero_categories);




?>
Last updated on February 4, 2024