WordPress.org

Ready to get started?Download WordPress

Forums

Post Tiles
Display Entire Image (2 posts)

  1. patchworkcloud
    Member
    Posted 1 year ago #

    This plug-in is great!

    What do I have to do to get the featured image to appear in its entirety? I would like to do this with responsive turned on. Centering the image and allowing its borders to adjust, like a plain-old responsive image, would be great alternatively or in addition. I'm comfortable manipulating php or taking on a technical challenge to make this work.

    Thanks!

    http://wordpress.org/extend/plugins/post-tiles/

  2. ethanhackett
    Member
    Plugin Author

    Posted 1 year ago #

    patchworkcloud it's a little tricky but if you're willing to poke around here's what i'd suggest. Open the post-tiles.php file and look at line 560. It should look something like this...

    if ($featured_images_key == "true") {
    		      if ( has_post_thumbnail()) {
    		      	  // Retrieve the featured image.
    			      $thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), array($featured_image_width,$featured_image_height));
    			      // Strip featured image down to the url.
    			      $url = $thumb['0'];
    			      $featured_style = "style='background: url(".$url.") 0 0;' class='featured-image ".$animation_style." ".$cat_var."'";
    		      } else {
    				  $featured_style = "class='".$cat_var."'";
    			  }
    	      }

    Basically it first checks to see if featured images are turned on from the settings page. Then if it is get the thumbnail.

    WordPress allows you to use an array to get the dimensions of the images so you can change the array(100,100) etc. Those values dynamically pulled from the settings page. So that's where you get the images and they get assigned to the background of the li. You can change that and put the image wherever you want. Then use some snazzy CSS and javascript to make it appear correctly.

    Somewhere around line 570 you should see where it starts to build the list items.

    $output .= "<li ".$featured_style." id='".$theID."'><a href='$temp_link' class='".$cat_var."' style='background-color: $cat_var_value; $featured_border'><h3>$temp_title </h3>$temp_excerpt</a></li>\n";

    Thats basically where all the puzzle pieces get assembled. I did my best to document each step along the way so read the comments to get an idea of what's happening.

    But responsive design can be very tricky especially if the images aren't all the same sizes.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic