Question

如何在模态中显示帖子的特色图像及其内容。

在类似问题的几个在线主题的帮助下，我尝试了这个：

<?php
    if ( has_post_thumbnail()) {
        echo '<a href="' . get_permalink($post->ID) . '" >';
            the_post_thumbnail('my_feature_image', array( 'class' => "someName" ));
        echo '</a>';
    }
?>

遗憾的是，所有帖子都会返回相同的精选图片。

在找到模态的同一header.php上，以下是（模态div之上）：

  //on the homepage... check for the post URL...
  //do we have a custom permalink incoming....
  $perma = false; if (isset($wp_query->query_vars['phpost_slug'])) #WHFIX 24/03/2015: 
  $perma = $wp_query->query_vars['phpost_slug'];
  if($perma){
  //we don't want to return a 404
  $wp_query->set( 'is_404', false );
  $phid = get_page_by_path($perma, OBJECT, 'post');
  $postvote = get_post_meta($phid->ID, 'epicredvote' ,true);
  $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $phid->ID ), 'single-post-thumbnail' );

  $pluginfeat = get_post_meta($phid->ID,'phog',true);
  $desc = get_post($phid->ID)->post_content;

指向网站的链接：https://goo.gl/30a3QQ [点击帖子的行打开模态。]

更新

我尝试删除锚标记以及类似这样的类，它仍然无效：

<?php
    if ( has_post_thumbnail()) {
            the_post_thumbnail();
    }
?>

Answer 1

您要更改的元素只是要填充的onclick处理程序的html线框，问题是，它没有在原始图像上包含图像，因此您需要添加该功能。像这样的东西应该工作（添加到你的页脚）

var eventTargets=document.querySelectorAll('.hunt-row');

[].forEach.call(eventTargets, function(t){
    t.addEventListener('click', function(){
        console.log('clicked');
        var img= this.querySelector('img').src;

        //bind new src to modal thumb, this is not ideal as there is only a class rather than a id...

        document.querySelector('.modal-thumb').src= img;

    }, false);
});

当然，我不确定它与其他点击处理程序有多好，您可能需要删除默认值并编写自己的以填充模型框onclick。

获取点击帖子的精选图片网址

1 个答案: