WordPress.org

1. alamed7
   Member
   Posted 11 months ago #

   I'm using (and loving) FrontPage Slideshow 0.9.9.3.4. However, as I rarely have image associated with posts, it is looking pretty plain sometimes.

   I am trying to add a CSS class to the image container (fs-picture) or fs-slider which changes with each entry to reflect the category of the post displayed. I would then use this category class to add a default background image specific to that category.

   I've been messing around in template.php and frontpage-slideshow.php but I think I am in over my head with the jQuery, which I have not used. I believe my issue is in getting the category information to travel from frontpageSlideshow()in frontpage-slideshow.php to fsChangeSlide2() in template.php.

   Thank you for taking the time to read my request and for any suggestions you can offer. My page is AlamedaPDX.net. Please let me know if any of my code is required - so far it is the default.

2. jeff_
   Member
   Posted 11 months ago #

   Why not just configure the post image for each posts ? this way you could have the wanted effect withoud putting hands in code and loose your mind ?

3. alamed7
   Member
   Posted 11 months ago #

   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.

4. jeff_
   Member
   Posted 11 months ago #

   Ok I understand much better now… to do so, you will need to modify the plugin's code deeply…

   Suggestions :
   - change the slider's background image via the plugin's admin page
   - under the /wp-content/plugins/frontpage-slideshow/images folder, change the 'one_transparent_pixel.gif" to an image : this iamge will be displayed when the article got no image in it
   - (difficult require php skills) redirect the /wp-content/plugins/frontpage-slideshow/images/one_transparent_pixel.gif HTTP calls via .htaccess by using rewrite rule to a php script that display a random image
   - if the article body does not contend image (or a big enouth one) you van specify another image into the little formular inserted just below the editor in create/edit article page in admin page.

5. alamed7
   Member
   Posted 11 months ago #

   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.

6. jeff_
   Member
   Posted 11 months ago #

   You can do it this way, yep :) but if your skills are not so high, it could be a pain in a ass… but yep ideally, this is the way to do… and a good idea of improvement

7. alamed7
   Member
   Posted 11 months ago #

   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.

8. jeff_
   Member
   Posted 11 months ago #

   ITs the game of FOSS : give some code and some time to the community.

9. alamed7
   Member
   Posted 10 months ago #

   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.

10. alamed7
    Member
    Posted 9 months ago #

    Does anyone know if this functionality was added to the new Version 0.9.9.3.4 I'm being prompted to install?

11. jeff_
    Member
    Posted 9 months ago #

    I've not implemented it yet since it touches the default template and I wanted to have a stable version before to modify the defult template

    In a couple of weeks, I think there will be enough websites that uses the plugin to say it is ok to make a new release before the stable version 1.

    You'd better wait the version 1 to upgrade.

12. alamed7
    Member
    Posted 9 months ago #

    Thanks :) I would have been very surprised to see it implemented so soon. I will wait and hope that you are able to do this much neater than me.

    I've found that having multiple categories assigned to posts can produce different results in the plugin than in the rest of WP simply because I didn't send the whole list of categories - just the first. This is an improvement I hope to make but I haven't gotten to it yet. It might be worth considering if you do decide to include this.

13. alamed7
    Member
    Posted 9 months ago #

    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 :(

Reply

You must log in to post.