Forums

bogus

...despite a rollover?

Hey all. I've made this wordpress theme. when you click archive in the lower right corner a masonry thumbnail grid appears. Now i want the thumbnail containers to be clickable so they open the post they belog to. the code for my boxes is:

<?php if (have_posts()) : while (have_posts()) : the_post();
     if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
    <div class="box"><a href="#"><?php the_post_thumbnail('medium'); ?></a>
      <h3><?php the_title(); ?></h3>
      <h4><?php the_time('jS F Y'); ?></h4>
        <span class="rollover">
          <?php the_tags( '<div class="tags">', '', '</div>'); ?>
        </span>
   </div>

and the css for that area is:

#masonry .box img { 
  display: block; 
} 

#masonry .box .rollover {
  position:  absolute;
  top:  0px;
  left: 0px;
  display: block;
  width: 400px;
  height:  100%;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -moz-transition:    opacity 0.3s;
  -o-transition:      opacity 0.3s;
}

#masonry .box .rollover:hover {
  opacity:1;
}


#masonry .box .tags {
  position: absolute;
  width: 280px;
  top: 60px;
  left: 60px;
}

#masonry .box .tags a {
  font-family: Lato, Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px 4px 4px 4px;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-property: 0.2s;
  -o-transition-duration:: 0.2s;
  -o-transition-property: background-color;
  -moz-transition-duration: 0.2s;
  -moz-transition-property: background-color;
  border: medium none;
  font-size: 16px;
  margin: 2px;
  padding: 5px 12px 8px;
  text-decoration: none;
  color: #171717;
  float: left;
}

How will I get that to work? Is my HTML correct for that specific task?

bogus

Maybe i didn't come across properly with what my problem is. I'd just like to click a thumbnail anywhere except the tag buttons and open the post. Putting the span inside an a seems to be the wrong idea. :(

I'd still like to keep the hover effect i put so much work into, though.

chrisburton

@bogus Hey. Try this:

  <a href="<?php the_permalink(); ?>">
      <div class="box"><a href="#"><?php the_post_thumbnail('medium'); ?></a>
        <h3><?php the_title(); ?></h3>
        <h4><?php the_time('jS F Y'); ?></h4>
            <span class="rollover">
                <?php the_tags( '<div class="tags">', '', '</div>'); ?>
            </span>
      </div>
  </a>

Although you might want to rethink your code as it doesn't appear semantic.

bogus

hey chris. Thank you!

Mh it doesn't seem to work and it keeps masonry from working correctly. Isn't there some rule about not being allowed to put block elements into inline elements (i.e. a tags)?

what would be a good way to get it more semantic but not loosing the looks?

chrisburton

@bogus Post your code in http://codepen.io so we can take a look. Where is the inline element you're referring to?

bogus

Span class rollover, isn't it?

Will post the code asap!

bogus

okay, here is a quick mockup (pretty dirty, i'm at work) but it should show what I mean:

Codepen

chrisburton

@bogus Hey, do you have a live site that I can take a look at with the masonry in place?

chrisburton

Ok, I edited your code that relies on better semantics.

http://codepen.io/chrisburton/pen/hBdis

I commented out your CSS but I think you should start again with my approach.

bogus

yeah chris, take a look at my link in my first post. that is my current wordpress test install.

thanks for your help! it's well appreciated.

chrisburton

@bogus Oops, I forgot about that. Can you tell me what this outputs?

    <?php if (have_posts()) : while (have_posts()) : the_post();
     if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
<a class="something" href="<?php echo the_permalink(); ?>
    <div class="box"><?php the_post_thumbnail('medium'); ?>
      <h3><?php the_title(); ?></h3>
      <h4><?php the_time('jS F Y'); ?></h4>
        <span class="rollover">
          <?php the_tags( '<div class="tags">', '', '</div>'); ?>
        </span>
   </div>
</a>

bogus

actually the boxes that are then put in place by masonry.

chrisburton

@bogus I mean that I need to see the code that it outputs.

bogus

sure. it outputs this:

bogus

  <div id="masonry">

        <div class="box"><a href="#"><img width="300" height="187" src="http://tingeltangel.megavillain.org/wp-content/uploads/2012/12/splash-300x187.jpg" class="attachment-medium wp-post-image" alt="splash" /></a>
        <h3>Generative</h3>
        <h4>10th December 2012</h4>
          <span class="rollover">
            <div class="tags"><a href="http://tingeltangel.megavillain.org/?tag=didumm" rel="tag">didumm</a><a href="http://tingeltangel.megavillain.org/?tag=generative" rel="tag">Generative</a></div>        </span>
     </div>

      <div class="box"><a href="#"><img width="300" height="199" src="http://tingeltangel.megavillain.org/wp-content/uploads/2012/12/578770_449052365139320_2014276990_n-300x199.jpeg" class="attachment-medium wp-post-image" alt="578770_449052365139320_2014276990_n" /></a>
        <h3>Icecream</h3>
        <h4>10th December 2012</h4>
          <span class="rollover">
            <div class="tags"><a href="http://tingeltangel.megavillain.org/?tag=bums" rel="tag">bums</a><a href="http://tingeltangel.megavillain.org/?tag=fyi" rel="tag">FYI</a></div>        </span>
     </div>

      <div class="box"><a href="#"><img width="300" height="201" src="http://tingeltangel.megavillain.org/wp-content/uploads/2012/12/bg-300x201.jpeg" class="attachment-medium wp-post-image" alt="bg" /></a>
        <h3>Man of Steel</h3>
        <h4>10th December 2012</h4>
          <span class="rollover">
            <div class="tags"><a href="http://tingeltangel.megavillain.org/?tag=didumm" rel="tag">didumm</a><a href="http://tingeltangel.megavillain.org/?tag=dum" rel="tag">dum</a><a href="http://tingeltangel.megavillain.org/?tag=fidibum" rel="tag">fidibum</a></div>        </span>
     </div>

  </div>

bogus

hey,

gotta dig this topic out again.

Still i'm working on this website and I don't know how I would get the thumbnail containers clickable. I would like to have them linking to the post (via permalink) when you click them anywhere except the tag buttons obviously.

seems to be really tricky..

chrisburton

@bogus Instead of <div class="box">, you need to use <a href="<?php echo the_permalink(); ?>" class="box">

treehouse : what would you like to learn today?

Forums

Getting thumbnail containers clickable....