Adding CSS Hook for Default Background Image by Category

I can’t believe you replied 6 days ago! I was checking but only see it now… Thank you for your quick response.

By configure the post image for each post you mean selecting an image each time?

I was hoping to use the CSS hook to set a background image which, in the event of a small image being chosen for display, would show behind the small image. If it helps to illustrate my point, I was planning to use a simple gradient as the background.

Again, thank you for your response, I’m so sorry I’m so late.

Thank you again for getting back to me. I will check out the suggestions you’ve given. I would still like to try a little longer to create the CSS hook.

If I can get the first category for each post in frontpageSlideshow($content,$force_display=false,$options=array()) in frontpage-slideshow.php to the foreach ($fsentries as $id=>$entry) in frontpageSlideshow_TPL($fsentries) in the template file, would I be barking up the wrong tree to put the categories into a jQuery array which could then be used in fsChangeSlide2() to add a class to the fs-slide div like you do with the class fs-current?

Again, my jQuery/javascript skills are not good so I’m very sorry if this doesn’t make sense. I assure you I am not looking for lessons, just an indication of if this sounds feasible to you, or if you see obvious flaws in my logic. And thank you again for responding so quickly.

Thank you! I will give it a try and hopefully learn something even if I can’t pull it off. And perhaps a future update of the plugin will see a more elegant execution of this idea 🙂 It’s a great plugin and I appreciate you taking the time for continued support to the forums.

Thank you for your help with this issue, I finally had some time to devote today and got it working. I realize now how wrong it was of me to ask if I should put the values into a jQuery array… it needed to be javascript of course.

So, for anyone who is interested, here are the bits of code I modified to make this happen.

In frontpage-slideshow.php:

function frontpageSlideshow($content,$force_display=false,$options=array()) {
	...
	$fscategories = join(',',$options['values']['fs_cats']);
        ...
	$fsposts = get_posts('category='.$fscategories.'&orderby='.$options['values']['fs_orderby'].'&numberposts='.$options['values']['fs_slides'].'&order='.$options['values']['fs_order']);
	$fsentries = array();
	foreach ($fsposts as $fspost) {
	// format informations
	$title = get_post_meta($fspost->ID,'fs-title',true);
            $cats = get_the_category($fspost->ID);
            $cat = $cats[0]->slug;
		...
	// put infos into an array

	$fsentries[] = array('title' => $title.' ', 'image' => $image, 'comment' => $comment.' ', 'button-comment' => $buttoncomment.' ', 'link' => $link, 'cat' => $cat);
		}

In my template.php:

$fscat = array();
function frontpageSlideshow_TPL($fsentries) {
	global $fscat;
// this is the HTML part
	$fscontent = '<!-- Template: ANA -->
<div id="fs-main">
	<div id="fs-slide">
		...
	</div>
	<ul>';

	foreach ($fsentries as $id=>$entry) {
		$fscat[$id] = $entry['cat'];
		...
	}
	$fscontent .= '	</ul>
</div>';
	return $fscontent;
}

function frontpageSlideshow_JS($options,$fslast) {
	global $fscat;
	// this is the Javascript part.
	ob_start();
?>
var fscats = ['<?php echo implode("', '",$fscat); ?>'];
var fslast = <?php echo $fslast?>;
...
}

function fsChangeSlide2() {

	...

	jQuery("#fs-entry-"+fsid).addClass('fs-current');

    if (fscats[fsid] != '') {
    	jQuery("#fs-slide").addClass('fs-'+fscats[fsid]);}

	frontpageSlideshow();
}
function fsDoSlide() {
	...
	if (fsid>-1) jQuery("#fs-entry-"+fsid).removeClass("fs-current");
    if (fsid>-1) jQuery("#fs-slide").removeClass('fs-'+fscats[fsid]);
	...
}

Then you just assign your CSS to use the class fs-your-category-slug (e.g. .fs-event, .fs-newsletter) for your background image. If anyone has suggestions to improve this, please let me know. And thank you to jeff_ for making and supporting this excellent plugin.

I was feeling lucky today so I went in just to see if I could fix the multiple categories issue and sure enough, piece of cake.

In order for this to send a list or categories rather than just the first, I needed to change this (in frontpage-slideshow.php):

$cats = get_the_category($fspost->ID);
            $cat = $cats[0]->slug;

To this:

$cats = get_the_category($fspost->ID);
			$categories = "";
			foreach ($cats as $cat) {
				$categories .= "fs-" . $cat->slug . " ";
			}

And this:

$fsentries[] = array('title' => $title.' ', 'image' => $image, 'comment' => $comment.' ', 'button-comment' => $buttoncomment.' ', 'link' => $link, 'cat' => $cat);

To this:

$fsentries[] = array('title' => $title.' ', 'image' => $image, 'comment' => $comment.' ', 'button-comment' => $buttoncomment.' ', 'link' => $link, 'cat' => $categories);
(Because I needed a new variable to hold the string of categories)

Then in my template file I needed to change this:

function fsChangeSlide2() {

	...

	jQuery("#fs-entry-"+fsid).addClass('fs-current');

    if (fscats[fsid] != '') {
    	jQuery("#fs-slide").addClass('fs-'+fscats[fsid]);}

	frontpageSlideshow();
}
function fsDoSlide() {
	...
	if (fsid>-1) jQuery("#fs-entry-"+fsid).removeClass("fs-current");
    if (fsid>-1) jQuery("#fs-slide").removeClass('fs-'+fscats[fsid]);
	...
}

To this:

function fsChangeSlide2() {

	...

	jQuery("#fs-entry-"+fsid).addClass('fs-current');

    if (fscats[fsid] != '') {
    	jQuery("#fs-slide").addClass(fscats[fsid]);}

	frontpageSlideshow();
}
function fsDoSlide() {
	...
	if (fsid>-1) jQuery("#fs-entry-"+fsid).removeClass("fs-current");
    if (fsid>-1) jQuery("#fs-slide").removeClass(fscats[fsid]);
	...
}

(Because I added the ‘fs-‘ prefix into the string variable I sent so it doesn’t need to be added here)

And now a nice list of categories formatted to work with the ‘class’ attribute is sent to front-page slideshow and you can have default backgrounds for posts of different categories. I add the ‘fs-‘ prefix in case you, like me, want to have a slightly different style for things in the slideshow and things of the same category in the body of your site.

Hopefully this helps someone, sorry I’m not a better teacher 🙁