WordPress.org

Ready to get started?Download WordPress

Forums

Flexi Pages Widget
[resolved] Flexi Pages - Show page thumb possible ? (12 posts)

  1. riversatile
    Member
    Posted 1 year ago #

    Hi,

    This is addressed to a person that is familiar with PHP/Wordpress or to the 'Flexi Pages' plugin developper.

    I tested this plugin in case of I can find a way to show page thumbnail (instead of the page link), in plus the usefull options provided by Flexi Pages.

    I found this script :
    http://snipplr.com/view/45697/
    that allow me to list page thumbnail.

    I know modify/adjust this block of script, but I need to know where to put it in the file flexi-pages-widget.php to make it work.

    And if it's possible, it could be powerfull to implement the function 'get_the_post_thumbnail' in the Admin section of the widget !

    http://wordpress.org/extend/plugins/flexi-pages-widget/

  2. riversatile
    Member
    Posted 1 year ago #

    Here is the only thing I could do for the moment.
    But this displays the first post thumbnail for each page :-(
    See here : http://www.riversatile.fr/

    Someone has the solution ?

    function flexipages_list($page_array, $level = 0)
    	{
    		if(!$page_array)
    			return;
    
    		$pagelist = "";
    
    		foreach($page_array as $page) {
    
    			$date = "";
          $pagethumb = get_the_post_thumbnail( $value->ID, array(230,299), $attr = 'class=shopthumbnail' );
    			if(isset($page['date']) && $page['date']) $date = " ".$page['date'];
    
    			$pagelist .= str_repeat("\t", $level+1).'<li class="'.$page['class'].'">'.$pagethumb.''.$date;
    			if($page['children'])
    				$pagelist .= flexipages_list($page['children'], $level+1);
    			$pagelist.= "</li>\n";
    		}
    		if($pagelist)
    			$pagelist = str_repeat("\t", $level)."<ul>\n{$pagelist}".str_repeat("\t", $level)."</ul>";
    		return $pagelist;
    	}
  3. riversatile
    Member
    Posted 1 year ago #

    It's like if the line below don't know extract the page ID for each page, although foreach($page_array as $page) instruction is present.

    $pagethumb = get_the_post_thumbnail( $value->ID, array(230,299), $attr = 'class=shopthumbnail' );

    Please help !

  4. riversatile
    Member
    Posted 1 year ago #

    With a lot of search (thanks Google), I found the issue...

    The value $value->ID has to be replaced by $page['ID'] to extract correctly the ID of each page.

    $pagethumb = get_the_post_thumbnail($page['ID'], array(230,299), $attr = 'class=shopthumbnail');

    But I continue to improve this Thumb feature in Flexi Pages.
    If someone has some suggestion...

  5. riversatile
    Member
    Posted 1 year ago #

    DONE ! Now Flexi Pages supports page Thumbnail display ;)

    Here is the final portion of code to overwrite at line 83 of the file flexi-pages-widget.php (overwrite the whole function "flexipages_list" :

    function flexipages_list($page_array, $level = 0)
    	{
    		if(!$page_array)
    			return;
    
    		$pagelist = "";
    
    		foreach($page_array as $page) {
    
    			$date = "";
          $pagethumb = get_the_post_thumbnail($page['ID'], 'full', array('class' => 'attachment-thumbnail','title' => trim(strip_tags( $attachment->post_title )),));
    			if(isset($page['date']) && $page['date']) $date = " ".$page['date'];
    
    			$pagelist .= str_repeat("\t", $level+1).'<li class="'.$page['class'].'">'.$pagethumb.''.$date;
    			if($page['children'])
    				$pagelist .= flexipages_list($page['children'], $level+1);
    			$pagelist.= "</li>\n";
    		}
    		if($pagelist)
    			$pagelist = str_repeat("\t", $level)."<ul>\n{$pagelist}".str_repeat("\t", $level)."</ul>";
    		return $pagelist;
    	}
  6. migswd
    Member
    Posted 1 year ago #

    Thanks great info.
    Just another version if someone like me wants to display page thumbnail + page title :

    function flexipages_list($page_array, $level = 0)
    	{
    		if(!$page_array)
    			return;
    
    		$pagelist = "";
    
    		foreach($page_array as $page) {
    
    			$date = "";
    			$pagethumb = get_the_post_thumbnail($page['ID'], 'full', array('class' => 'attachment-thumbnail','title' => trim(strip_tags( $attachment->post_title )),));	
    
    			if(isset($page['date']) && $page['date']) $date = " ".$page['date'];
    
    			$pagelist .= str_repeat("\t", $level+1).'<li class="'.$page['class'].'"><a href="'.$page['link'].'" title="'.$page['title'].'">'.$pagethumb.''.$page['title'].'</a>'.$date;
    			if($page['children'])
    				$pagelist .= flexipages_list($page['children'], $level+1);
    			$pagelist.= "\n";
    		}
    		if($pagelist)
    			$pagelist = str_repeat("\t", $level)."
    <ul>\n{$pagelist}".str_repeat("\t", $level)."</ul>
    ";
    		return $pagelist;
    	}
  7. bmackenny
    Member
    Posted 1 year ago #

    Can riversatile or migswd tell me how I could add some CSS to the Flexi Pages Widget? I want to have the widget display the page thumbnails and the titles in a three column grid. I just can't seem to find the right style to add to my theme's style.css

    I really wish that the widget came with it's own stylesheet. Can I add one for it? Just not sure how to make this happen. When I add migswd's code to the wdiget's php it does display the pages thumbnails but they are at FULL size. I'd like for them to display at my theme's thumbnail setting.

    Can anyone help?

  8. riversatile
    Member
    Posted 1 year ago #

    Hi bmackenny,

    I am familiar with CSS, but not enough to create columns.

    But to display post thumbnail with the thumbnail sized image, you will find help in the WordPress Codex : get_the_post_thumbnail : https://codex.wordpress.org/Function_Reference/get_the_post_thumbnail

    As you can see in the get_the_post_thumbnail WordPress reference, you have to replace "full" by "thumbnail" in the line :

    $pagethumb = get_the_post_thumbnail($page['ID'], 'full', array('class' => 'attachment-thumbnail','title' => trim(strip_tags( $attachment->post_title )),));

    Do like this :

    $pagethumb = get_the_post_thumbnail($page['ID'], 'thumbnail', array('class' => 'attachment-thumbnail','title' => trim(strip_tags( $attachment->post_title )),));

    Cheers !

  9. bmackenny
    Member
    Posted 1 year ago #

    Hi Riversatile!

    Thank you so much for pointing that out to me. After replacing 'full' with 'thumbnail' I did get the script to call up the thumbnail for the pages instead of the full sized image. However, I am still baffled on how to style the widget. I cannot find a CSS definition that properly calls to the flexipages widget. I have read so many articles on people trying different things. Nothing seems to work when I write it into my theme's style.css. Do you know how I could add a call-to in the flexi-pages-widget.php so that I can create a separate style.css in the flexi page widget directory? Or do you know what style definition I need to use to call to it. You can view the position I am working on here: http://s119736768.onlinehome.us

  10. bmackenny
    Member
    Posted 1 year ago #

    If I could find a way to properly call to this style set I could display the widget how I want:

    ul.flexipages_widget {
    	margin: 0;
    	margin: 0 0 24px 0;
    	padding: 0 0 27px 0;
    }
    
    	ul.flexipages_widget li {
    		display: -moz-inline-box;
    		display: inline-block;
    		*zoom: 1;
    		*display: inline;
    		vertical-align: top;
    		width: 300px;
    		margin: 0 0 0 16px;
    		padding: 0;
    	}
    
    	ul.flexipages_widget li:first-child {
    		margin: 0;
    	}
    
    		ul.flexipages_widget li .featured-thumbnail {
    			margin: 0 0 28px 0;
    		}
    
    		ul.flexipages_widget li strong {
    			display: inline-block;
    			padding: 4px 38px 8px 0;
    			vertical-align: top;
    			word-spacing: 2px;
    			line-height: 18px;
    			font-size: 12px;
    			text-transform: uppercase;
    		}
    
    			ul.flexipages_widget li strong a {
    				text-decoration: none;
    			}
  11. bmackenny
    Member
    Posted 1 year ago #

    It looks like I need to add some php scrip definitions in the the php file somewhere to define the class 'flexipages_widget' but I am not familiar enough with php scripting to do this. Any suggestions? I think it should go somewhere in this section of code BUT where?

    function flexipages_list($page_array, $level = 0)
    	{
    		if(!$page_array)
    			return;
    
    		$pagelist = "";
    
    		foreach($page_array as $page) {
    
    			$date = "";
    			$pagethumb = get_the_post_thumbnail($page['ID'], 'thumbnail', array('class' => 'attachment-thumbnail','title' => trim(strip_tags( $attachment->post_title )),));	
    
    			if(isset($page['date']) && $page['date']) $date = " ".$page['date'];
    
    			$pagelist .= str_repeat("\t", $level+1).'<li class="'.$page['class'].'"><a href="'.$page['link'].'" title="'.$page['title'].'">'.$pagethumb.''.$page['title'].'</a>'.$date;
    			if($page['children'])
    				$pagelist .= flexipages_list($page['children'], $level+1);
    			$pagelist.= "\n";
    		}
    		if($pagelist)
    			$pagelist = str_repeat("\t", $level)."
    <ul>\n{$pagelist}".str_repeat("\t", $level)."</ul>
    ";
    		return $pagelist;
    	}
  12. bmackenny
    Member
    Posted 1 year ago #

    Ok. I have fixed it. I used Firebug to see that the Flexi Pages Widget was generating a unique <div> for this content. I am not sure how or why...I don't know enough about PHP to know this. But, after inspected the contents of the wdiget's output on my web page, I found that it was enclosed in a <div> called 'flexipages-2'. After that, I just wrote the following code into my theme's style.css:

    #flexipages-2 {
    }
    
    #flexipages-2 ul {
    	margin: 0;
    	margin: 0 0 24px 0;
    	padding: 0 0 27px 0;
    }
    
    	#flexipages-2 ul li {
    		display: -moz-inline-box;
    		display: inline-block;
    		*zoom: 1;
    		*display: inline;
    		vertical-align: top;
    		width: 300px;
    		margin: 0 0 0 16px;
    		padding: 0;
    	}
    
    	#flexipages-2 ul li a {
    	font-family: 'Voltaire',sans-serif !important;
    	font-size:24px;
    	text-transform:uppercase;
    	color:#002E56;}
    
    	#flexipages-2 ul li a img {
    	padding: 0 0 10px 0;
    	}
    
    	#flexipages-2 ul li a:hover {
    	color:#E31B23;
    	}
    
    	#flexipages-2 ul li:first-child {
    		margin: 0;
    	}

    I hope this helps someone out. Of course, your css might look different from mine as I have written this to best suite my site's overall design. But the main point is that the widget PHP generates a unique div on the website's output. I inserted a separate instance of the widget on the same page and the output div 'flexipages-3' was created. I would still like to see better control over the CSS of this widget in the future. Either the FAQ needs to be updated to inform the user of this unique div generation OR the widget should include its own style.css so that users can better control the widget. Thanks for your help Riversatile!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic