【问题标题】:Want to show image caotion or title above portfolio image想要在作品集图像上方显示图像标题或标题
【发布时间】:2015-07-17 09:34:22
【问题描述】:

对于最近开发的 wordpress 网站http://stc.co.in,我正在使用 Huge-IT 产品组合来展示各个部门的项目。单击项目时,会显示一个带有多个图像的弹出窗口。现在我想在通过 WordPress 上传图片时添加的大图片上方显示图片标题或标题。请指导如何实现这一目标。

提前致谢。

问候,桑杰

【问题讨论】:

    标签: wordpress popup title portfolio


    【解决方案1】:

    如果插件不能让你简单地用文本编辑器完成,你需要在 wordpress 中搜索你想要的特定部分并处理 php 文件。

    创建后,您可以在 html 部分中添加标题。

    【讨论】:

    • 谢谢安德鲁。我跟踪了 php 文件部分,但是如何获取图像标题并添加到其中? image_url != ';'){ ?> name; ?>" id="wd-cl-img" src="" /> name; ?>" id="wd-cl-img" src="images/noimage.jpg" />
    • @vrajesh 用一张很棒的大图回答了你……听从他的建议。希望你能解决你的问题
    【解决方案2】:

    您需要在插件文件中进行更改..

    跟随路径

    wordpress-sitename/wp-content/plugins/portfolio-gallery/Front_end/portfolio_front_end_view.php

    修改行:

       <ul id="huge_it_portfolio_popup_list_<?php echo $portfolioID; ?>">
        <?php
        foreach($images as $key=>$row)
        {
    
    
            $imgurl=explode(";",$row->image_url);
            array_pop($imgurl);
            $link = $row->sl_url;
            $descnohtml=strip_tags($row->description);
            $result = substr($descnohtml, 0, 50);
    
            ?>
            <li class="pupup-element" id="huge_it_portfolio_pupup_element_<?php echo $row->id; ?>">
    
                <div class="heading-navigation_<?php echo $portfolioID; ?>">
                    <a href="#close" class="close"></a>
                    <div style="clear:both;"></div>
                </div>
                <div class="popup-wrapper_<?php echo $portfolioID; ?>">
                    <div class="image-block_<?php echo $portfolioID; ?>">
                    <?php   if($paramssld["ht_view2_show_popup_title"]=='on'){?><h3 class="title"><?php echo $row->name; ?></h3><?php } ?>
                        <?php   if($row->image_url != ';'){ ?>
                        <img alt="<?php echo $row->name; ?>" id="wd-cl-img<?php echo $key; ?>" src="<?php echo $imgurl[0]; ?>" />
                        <?php       
                                            global $wpdb;
                                        $cimg_url = $imgurl[0];                             
                                        $attachment = $wpdb->get_results("SELECT ID FROM wp_posts WHERE guid='".$cimg_url."'",'ARRAY_A');                               
                                        $attachment_title = get_the_title($attachment[0]['ID']);
    
                        ?>
                        <div class="cls_img_ttl" id="main_img_ttl"><?php echo $attachment_title; ?></div>
                        <?php } else { ?>
                        <img alt="<?php echo $row->name; ?>" id="wd-cl-img<?php echo $key; ?>" src="images/noimage.jpg" />
                        <?php
                        } ?>                    
                    </div>
                    <div class="right-block">
                        <?php if($paramssld["ht_view2_show_popup_title"]=='on'){?><h3 class="title"><?php echo $row->name; ?></h3><?php } ?>
    
                        <?php if($paramssld["ht_view2_thumbs_position"]=='before' and $paramssld["ht_view2_show_thumbs"] == 'on'){?>
                        <div><ul class="thumbs-list_<?php echo $portfolioID; ?>">
                            <?php   
                                    global $wpdb;
                                    foreach($imgurl as $key=>$img){ 
                                        $cimg_url = $img;                               
                                        $attachment = $wpdb->get_results("SELECT ID FROM wp_posts WHERE guid='".$cimg_url."'",'ARRAY_A');                               
                                        $attachment_title = get_the_title($attachment[0]['ID']);
                            ?>
                                        <li><a href="<?php echo $row->sl_url; ?>" class="group1" data-ttl="<?php echo $attachment_title; ?>" >
                                        <img src="<?php echo $img; ?>">
                                        </a></li>
                                    <?php } ?>
                        </ul></div>
                        <?php } ?>
    
                        <?php if($paramssld["ht_view2_show_description"]=='on'){?><div class="description"><?php echo $row->description; ?></div><?php } ?>
    
                        <?php if($paramssld["ht_view2_thumbs_position"]=='after' and $paramssld["ht_view2_show_thumbs"] == 'on'){?>
                        <div><ul class="thumbs-list_<?php echo $portfolioID; ?>">
                            <?php   $imgurl=explode(";",$row->image_url);array_pop($imgurl);
                                    foreach($imgurl as $key=>$img){?>
                                        <li><a href="#" class="group1"><img src="<?php echo $img; ?>"></a></li>
                                    <?php } ?>
                        </ul></div>
                        <?php } ?>
    
                        <?php if($paramssld["ht_view2_show_popup_linkbutton"]=='on'){?>
                            <div class="button-block">
                            <a href="<?php echo $link; ?>"  <?php if ($row->link_target=="on"){echo 'target="_blank"';}?>><?php echo $paramssld["ht_view2_popup_linkbutton_text"]; ?></a>
                            </div>
                        <?php } ?>
                        <div style="clear:both;"></div>
                    </div>
                    <div style="clear:both;"></div>
                </div>
            </li>
            <?php
        }?>
    </ul>
    

    JS:

    jQuery('#huge_it_portfolio_popup_list_<?php echo $portfolioID; ?> .popup-wrapper_<?php echo $portfolioID; ?> .right-block ul.thumbs-list_<?php echo $portfolioID; ?> li a').click(function(){
            var width=jQuery(window).width();
            if(width<=767){
                jQuery('body').scrollTop(0);
            }
            jQuery(this).parent().parent().find('li.active').removeClass('active');
            jQuery(this).parent().addClass('active');
            var main_img_ttl =  jQuery(this).attr('data-ttl');      
            alert(main_img_ttl);
            jQuery(this).parents('.right-block').prev().find('.cls_img_ttl').html(main_img_ttl);
            jQuery(this).parents('.right-block').prev().find('img').attr('src',jQuery(this).find('img').attr('src'));
            return false;
        });
    

    你可以在这里下载文件:LINK

    【讨论】:

    • 谢谢 Vrajesh,$row->name 是项目标题,它已经显示在弹出窗口的右侧。我想显示通过媒体库上传图片时添加的每张图片的标题或标题。
    • 不是文件名,而是通过作品集插件上传图片时给出的4个文本框。即标题、标题、替代文本和描述。我想为每张图片显示特定的标题。希望你能理解。
    • 非常感谢 Vrajesh,我只需要它用于大图像,而不是缩略图。感谢您的帮助。
    • 你可以轻松搞定
    • 希望你得到你的解决方案..我已经更新了我的答案..这是我最后一次尝试:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-13
    • 2021-12-23
    相关资源
    最近更新 更多