这个pastie包含了要查看的functions.php和home.php代码。作为参考，我的目标是使图片遵循此jsfiddle中的相同规则。
我的功能目标是从帖子中提取第一张图片，并将其放在我博客主页上的摘要上方。我已经能够从帖子中提取图像了，但是它没有跟随我在第60行中使用的响应类。是不是我在拉图像本身而不是URL？如何调整我的功能才能使其正常工作？在数据库连接和表单验证之外，我是一个完整的php初学者。
Please see jsfiddle and pastie for code
答案 0 :(得分：1)
改为使用Post_Thumbnails。
在你的functions.php中添加以下内容：
public class GridViewAdapter extends BaseAdapter implements Filterable {
//Imageloader to load images
private ImageLoader imageLoader;
private ItemFilter mFilter = new ItemFilter();
//Context
private Context context;
//Array List that would contain the urls and the titles for the images
private ArrayList<String> images;
private ArrayList<String> names;
public GridViewAdapter (Context context, ArrayList<String> images, ArrayList<String> names){
//Getting all the values
this.context = context;
this.images = images;
this.names = names;
}
@Override
public int getCount() {
return images.size();
}
@Override
public Object getItem(int position) {
return images.get(position);
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
//Creating a linear layout
LinearLayout linearLayout = new LinearLayout(context);
linearLayout.setOrientation(LinearLayout.VERTICAL);
//HttpsURLConnection.setFollowRedirects(true);
//NetworkImageView
NetworkImageView networkImageView = new NetworkImageView(context);
//NetworkImageView networkImageView = (NetworkImageView) convertView
// .findViewById(R.id.gridimage);
//Initializing ImageLoader
imageLoader = CustomVolleyRequest.getInstance(context).getImageLoader();
imageLoader.get(images.get(position), ImageLoader.getImageListener(networkImageView, R.drawable.ic_launcher, android.R.drawable.ic_dialog_alert));
//Setting the image url to load
networkImageView.setImageUrl(images.get(position),imageLoader);
//Creating a textview to show the title
TextView textView = new TextView(context);
textView.setText(names.get(position));
//Scaling the imageview
networkImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
networkImageView.setLayoutParams(new GridView.LayoutParams(300,300));
//Adding views to the layout
linearLayout.addView(textView);
linearLayout.addView(networkImageView);
//Returnint the layout
return linearLayout;
}
@Override
public Filter getFilter() {
// TODO Auto-generated method stub
return mFilter;
}
}
这将启用帖子和页面侧边栏中的特色图片元框。您需要为帖子设置此项。您可以将所需图像设置为精选图像，而不是将图像添加到帖子的内容中。
将您的home.php更新为以下内容：
add_theme_support( 'post-thumbnails' ); <?php get_header(); ?>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Blog</h1>
<ol class="breadcrumb">
<li><a href="###">Home</a>
</li>
<li class="active">Blog</li>
</ol>
</div>
</div>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="row">
<div class="col-md-1 text-center">
<p><?php the_time('l, F jS, Y'); ?></p>
</div>
<?php if ( has_post_thumbnail() ) : ?>
<div class="col-md-5">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive img-hover' ) ); ?>
</a>
</div>
<?php endif; ?>
<div class="col-md-6">
<h3>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<p>by <?php the_author_posts_link(); ?>
</p>
<p><?php the_excerpt(); ?></p>
<a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
</div>
</div>
<hr>
<?php endwhile; ?>
<div class="navigation"><p><?php posts_nav_link('','« Newer Posts','Older Posts »'); ?></p></div>
<?php else: ?>
<p><?php _e('Sorry, there are no posts.'); ?></p>
<?php endif; ?>
</div>
<?php get_footer(); ?>
检查当前has_post_thumbnail()是否有特色图片集。
$post输出图片标记。此函数采用大小作为第一个参数。我们将它设置得很大，因为它应该满足您的布局。
第二个参数是属性数组。我们可以使用此参数向图像添加其他类。