Skip to content

Instantly share code, notes, and snippets.

@carasmo
Last active September 29, 2019 17:19
Show Gist options
  • Save carasmo/1f00f6e7c60c46e60d66c5c9ce4ea602 to your computer and use it in GitHub Desktop.
Save carasmo/1f00f6e7c60c46e60d66c5c9ce4ea602 to your computer and use it in GitHub Desktop.
TThis has two sets of code. The first is the CSS is which is an example only. The next file is the random image php from a directory for Genesis (modifiable for any WordPress theme). Adjust as needed for your requirements. If this saved you time, and I'm sure it did, consider a donation via PayPal to me@christinacreativedesign.com
.my-hero-container {
position: relative;
height: 20vh;
min-height: 150px;
}
@media (min-width: 800px) {
.my-hero-container {
height: 45vh;
min-height: 250px;
max-height: 300px;
}
}
@media (min-width: 1000px) {
.my-hero-container {
height: 45vh;
min-height: 300px;
max-height: 350px;
}
}
@media (min-width: 1200px) {
.my-hero-container {
max-height: 400px;
}
}
<?php
// don't re-add
/**
* Get Random Images from directory
* Modifield from http://apexlogic.net/code-bank/php/random-background-images-with-css-and-php/
* $directory is where your png and jpgs are located, here they are in the assets/images/hero dir, change to your dir
*/
function christina_random_image_dir() {
$directory = get_stylesheet_directory() .'/assets/images/hero/'; //* set the directory where your .png and .jpgs are from the location of your child theme
$count = 0;
$images_array = array();
if ( $handle = opendir( $directory ) ) :
while (false !== ( $entry = readdir( $handle ) ) ) :
$path = $directory . $entry;
if( is_file( $path ) ) :
if( mime_content_type( $path ) == 'image/jpeg' || mime_content_type( $path ) == 'image/png' ) :
$images_array[$count]= $path;
$count = $count+1;
endif; //if image type is jpeg or png
endif; //file path exists
endwhile;
$random_image = mt_rand( 0,( $count-1 ) );
$val = $images_array[ $random_image ];
endif;
closedir( $handle );
return( $val );
}
/**
* Turn christina_random_image_dir() into absolute url
*/
function christina_random_image_url() {
$dir = get_stylesheet_directory();
$ab_dir = get_stylesheet_directory_uri();
$random_img_raw = christina_random_image_dir();
$random_url = str_replace( $dir, $ab_dir, $random_img_raw );
return esc_url( $random_url );
}
/////////////// Example Usage
add_action( 'genesis_before_content_sidebar_wrap','prefix_display_hero_container', 0 );
/**
* Add a div in the 'genesis_before_content_sidebar_wrap' hook
*/
function prefix_display_hero_container() {
echo '<div class="my-hero-container" aria-hidden="true"></div>';
}
add_action( 'wp_enqueue_scripts', 'prefix_example_random_bg_img_css' );
/**
* CSS output this adds the background-image CSS to the head of the doc
* The class of the div is '.my-hero-container' (change this) and it marries with the
* 'prefix_display_hero_container()' function's div
* Learn Genesis and html/css: https://knowthecode.io/
*/
function prefix_example_random_bg_img_css() {
$css = '.my-hero-container { background-image: url(' . christina_random_image_url() . '); }';
$css = str_replace( array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $css );
wp_add_inline_style( 'theme-style-handle', $css );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment