e_vera

Hi Ben, and thanks a lot for your answer!
I’ve fiddled around and I just cannot get the hover effect to work.
I’ve uploaded all the necessary files to the server, linked to them in the content-post-grid.php file.

I’ve tried changing the code so that the img comes first and tried adding a link to the post according to this sample:

 <div id="effect-5" class="effects clearfix">
            <div class="img">
                <img src="link to featured image" alt="">
                <div class="overlay">
                    <a href="link to post ID" class="expand">+</a>
                    <a class="close-overlay hidden">x</a>
                </div>
            </div>
  </div>

All this results in is the featured images with a + and a x below them and no link actually ON them.

This is what my vanilla file looks like:

<?php global $post, $pinnacle, $postcolumn; 
            if(!empty($postcolumn)) {
              if($postcolumn == '3') {
                $image_width = 370; 
                $image_height = 246;
                $titletag = "h5";
              } else if($postcolumn == '2') {
                $image_width = 560;
                $image_height = 370;
                $titletag = "h4";
              } else {
                $image_width = 340;
                $image_height = 226;
                $titletag = "h5";
              }
            } else {
              $image_width = 340;
              $image_height = 226;
              $titletag = "h5";
            }
            if(isset($pinnacle['postexcerpt_hard_crop']) && $pinnacle['postexcerpt_hard_crop'] == 1) {
              $hardcrop = true;
            } else {
              $hardcrop = false;
            }
            if ( has_post_format( 'video' )) {
              $postsummery = get_post_meta( $post->ID, '_kad_video_post_summery', true );
              if(empty($postsummery) || $postsummery == 'default') {
                if(!empty($pinnacle['video_post_summery_default'])) {
                    $postsummery = $pinnacle['video_post_summery_default'];
                  } else {
                    $postsummery = 'video';
                }
              }
            } else if (has_post_format( 'gallery' )) {
              $postsummery = get_post_meta( $post->ID, '_kad_gallery_post_summery', true );
              if(empty($postsummery) || $postsummery == 'default') {
                if(!empty($pinnacle['gallery_post_summery_default'])) {
                    $postsummery = $pinnacle['gallery_post_summery_default'];
                } else {
                    $postsummery = 'slider_landscape';
                }
              }
            } elseif (has_post_format( 'image' )) {
              $postsummery = get_post_meta( $post->ID, '_kad_image_post_summery', true );
              if(empty($postsummery) || $postsummery == 'default') {
                if(!empty($pinnacle['image_post_summery_default'])) {
                    $postsummery = $pinnacle['image_post_summery_default'];
                } else {
                    $postsummery = 'img_portrait';
                }
              }
            } else {
              if(!empty($pinnacle['post_summery_default'])) {
                 $postsummery = $pinnacle['post_summery_default'];
              } else {
                 $postsummery = 'img_landscape';
              }
            }
            if($postsummery == 'img_landscape' && has_post_thumbnail( $post->ID ) || $postsummery == 'img_portrait' && has_post_thumbnail( $post->ID )) { ?>
                <div id="post-<?php the_ID(); ?>" class="blog_item postclass kad_blog_fade_in grid_item" itemscope="" itemtype="https://schema.org/BlogPosting">
                    <?php $image_id = get_post_thumbnail_id( $post->ID );
                          $image_url = wp_get_attachment_image_src($image_id, 'full' ); 
                          $thumbnailURL = $image_url[0];
                          if($hardcrop) {
                            $image = aq_resize($thumbnailURL, $image_width, $image_height, true, false);
                          } else {
                            $image = aq_resize($thumbnailURL, $image_width, null, false, false);
                          }
                          if(empty($image[0])) {$image = array($thumbnailURL,$image_width,$image_height);} ?>
                              <div class="imghoverclass img-margin-center">
                                <a href="<?php the_permalink()  ?>" title="<?php the_title(); ?>">
                                  <img src="<?php echo esc_url($image[0]); ?>" alt="<?php the_title(); ?>" width="<?php echo esc_attr($image[1]);?>" height="<?php echo esc_attr($image[2]);?>" <?php echo kt_get_srcset_output( $image[1], $image[2], $thumbnailURL, $image_id);?> itemprop="image" class="iconhover" style="display:block;">
                                </a> 
                              </div>
                              <?php $image = null; $thumbnailURL = null; ?>
            <?php } elseif($postsummery == 'slider_landscape' || $postsummery == 'slider_portrait' || $postsummery == 'gallery_grid') {?>
                <div id="post-<?php the_ID(); ?>" class="blog_item postclass kad_blog_fade_in grid_item" itemscope="" itemtype="https://schema.org/BlogPosting">
                          <div class="flexslider kt-flexslider loading" style="max-width:<?php echo esc_attr($image_width);?>px;" data-flex-speed="7000" data-flex-anim-speed="400" data-flex-animation="fade" data-flex-auto="true">
                            <ul class="slides">
                              <?php $image_gallery = get_post_meta( $post->ID, '_kad_image_gallery', true );
                                    if(!empty($image_gallery)) {
                                      $attachments = array_filter( explode( ',', $image_gallery ) );
                                      if ($attachments) {
                                          foreach ($attachments as $attachment) {
                                            $attachment_url = wp_get_attachment_url($attachment , 'full');
                                            $image = aq_resize($attachment_url, $image_width, $image_height, true);
                                            if(empty($image)) {$image = $attachment_url;} ?>
                                            <li>
                                                <a href="<?php the_permalink() ?>">
                                                    <img src="<?php echo esc_url($image); ?>" <?php echo 'width="'.esc_attr($image_width).'" height="'.esc_attr($image_height).'"';?> <?php echo kt_get_srcset_output( $image_width, $image_height, $attachment_url, $attachment);?> itemprop="image" class="" alt="<?php the_title(); ?>" />
                                                </a>
                                            </li>
                                          <?php }
                                      }
                                    } ?>                                 
                            </ul>
                          </div> <!--Flex Slides-->
            <?php } elseif($postsummery == 'video') {?>
                <div id="post-<?php the_ID(); ?>" class="blog_item postclass kad_blog_fade_in grid_item" itemscope="" itemtype="https://schema.org/BlogPosting">
                        <div class="videofit">
                            <?php echo get_post_meta( $post->ID, '_kad_post_video', true ); ?>
                        </div>
            <?php } else {?>
                <div id="post-<?php the_ID(); ?>" class="blog_item postclass kad_blog_fade_in grid_item" itemscope="" itemtype="https://schema.org/BlogPosting">
            <?php }?>
                </div> <!-- Blog Item -->

Okay, I’ve looked further and found the file ?? It’s templates/content-post-grid.php and I had to remove a few bits at the end.

Now all that’s missing is an image overlay similar to this one: https://callmenick.com/_development/image-overlay-hover-effects/index-5.html

Can anybody tell me how to achieve that, ideally using the div’s that already exist?

Hi Hannah!

I’m using the free theme, but I wouldn’t mind going through the code. I just need to know which file the segment is stored in.

Can’t post a link because the site is still in maintenance and for a friend, he doesn’t want anything to get out before it’s done… :/

Hi wp-newbee!
I don’t remember exactly which files were necessary for the changes to take place and which weren’t, but generally, you just have to replace every the_excerpt with the_content.

Here are the files I believe I changed:
wp-content/themes/cirrus/parts/blog-content.php
wp-content/themes/cirrus/index.php

You also need to change
wp-content/themes/cirrus/single.php
if you want the posts to be fully visible when viewing them singular and not on the frontpage.

I also recommend installing the plugin W3 Total Cache before you make those changes, so you can easily clear the page’s caches and actually see your results (oftentimes I wouldn’t see them right away although I cleared my browser’s cache).

Hope I could help!

Hi Miha, and thank you!
The index.php was fine, but I found the solution in another folder and another file (seems the frontpage content calls from that file). Thanks a lot!! ??