div with a background picture

Question

Hi people!

Im creating a grid/tile layout for archive pages in wordpress. The post types are custom post types with custom fields, one of those fields contains the picture that should fill the background of the entire tile in the grid. That way, I get a nice grid. some more info:

Bootstrap framework
Tiles build upon responsive grid

off course, thats easy to do, but here is where I get stuck on how to approach this. I want five extra custom fields to be displayed over the image aka in front of the tile with the picture, those three fields are:

title (bottom of the tile)
scale (left top)
manufacturer (left top)
kit number (left top)
a country (right top)

I know how to get all this info in the archive page and stuff, but I don't know how to position them over the tile.

I started with a <figure></figure> approach and placed the title in the caption, but I don't know where to place the other four fields. Here what I got up until now:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

          <div class="col-xs-6 col-sm-4 col-md-3 gridPost">
            <div class="grid-item">
              <figure>
                <a href="<?php the_permalink(); ?>">
                  <img class="grid-img" src="<?php the_field('postGridImage'); ?>" alt="<?php the_title();?>">
                  <figcaption><h5><?php the_field('kitName'); ?></h5></figcaption>
                </a>
              </figure>
            </div>
          </div>

        <?php endwhile; else: ?>

          <div class="page-header">
            <h1>Oh no!</h1>
          </div>

          <p>No content is appearing for this page!</p>

        <?php endif; ?>

Here an image of one of the tiles:

https://www.dropbox.com/s/mpo6odg0oo0zb8j/Screenshot%202014-07-18%2018.22.48.png

the div should adjust it's height to the height of the image. The height of the image depends on the grid width.

I hope you guys understand me a bit as I told A lot. Would be great if anybody could help me out!

Thanks!

Answer 1 · 2014-07-26T19:55:23Z

July 26, 2014 7:55pm

For the people wondering if this has a solution, I used the 'position' css properties. play with 'position: relative' and 'position: absolute' properties in css after that you can use the 'top' 'bottom' 'left' and 'right' properties.

here is the css I used:

.col-xs-6.col-sm-4.col-md-3.gridPost {
    padding: 1%;
 }

 .grid-item {
    position: relative;
 }

 .grid-item,
 .grid-item h5,
 .country-flag,
 .label.label-info.scale,
 .label.label-info.manufacturer {
    transition-duration: .3s;
    -webkit-transition-duration: .3s;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(122,122,122,.5);
    -moz-box-shadow: 0px 0px 10px 1px rgba(122,122,122,.5);
    box-shadow: 0px 0px 10px 1px rgba(122,122,122,.5);
 }

 .grid-item:hover {
    -webkit-box-shadow: 0px 0px 10px 1px rgba(122,122,122,.9);
    -moz-box-shadow: 0px 0px 10px 1px rgba(122,122,122,.9);
    box-shadow: 0px 0px 10px 1px rgba(122,122,122,.9);
 }

 .grid-item:hover a {
    text-decoration: none!important;
 }

 .grid-item,
 .grid-img,
 .grid-item h5 {
    border-radius: 5px
 }

 .grid-item h5 {
    background-color: rgba(255,255,255,.5);
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: 500;
    text-shadow: 0px 0px 2px #000000;
    padding: 2%;
    margin: 0;
    position: absolute;
    bottom: 0;
 }

 .grid-img {
    width: 100%;
 }

 .country-flag {
    position: absolute;
    top: 0;
    left: 0;
    width: 15%;
    margin: 1%;
    border-radius: 1px;
    opacity: 0.7;
    border-top-left-radius: 5px;
 }

 .label.label-info.scale,
 .label.label-info.manufacturer {
    position: absolute;
    margin: 1%;
    border-radius: 5px;
    float: left;
    background-color: rgba(255,255,255,.7); 
    color: #fff;
    text-shadow: 0px 0px 2px #000000;
 }

 .label.label-info.scale {
    position: absolute;
    top: 0;
    right: 0;
 }

 .label.label-info.manufacturer {
    position: absolute;
    top: 20px;
    right: 0;
 }

 .gridPost:hover .label.label-info.scale,
 .gridPost:hover .label.label-info.manufacturer,
 .gridPost:hover h5,
 .gridPost:hover .country-flag {
    background-color: rgba(255,255,255,.8);
    opacity: 0.9;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(122,122,122,.9);
    -moz-box-shadow: 0px 0px 10px 1px rgba(122,122,122,.9);
    box-shadow: 0px 0px 10px 1px rgba(122,122,122,.9);
 }

and here is the code part from the archive.html:

<div class="col-xs-6 col-sm-4 col-md-3 gridPost">
            <a href="<?php the_permalink(); ?>">
              <div class="grid-item">
                <img class="grid-img" src="<?php the_field('postGridImage'); ?>" alt="<?php the_title();?>">
                <h5><?php the_field('kitName'); ?></h5>
                <div>
                  <img class="country-flag" src="<?php bloginfo('stylesheet_directory'); ?>/images/country_flags/<?php $terms = get_the_terms( $post->ID , 'countries' ); foreach ( $terms as $term ) { echo $term->name; } ?> Flag.png" alt="><?php $term = get_field('country_of_origin');?><?php echo $term->name; ?> Flag">
                  <span class="label label-info scale">
                    <?php $terms = get_the_terms( $post->ID , 'scales' ); foreach ( $terms as $term ) { echo $term->name; } ?>
                  </span>
                  <span class="label label-info manufacturer">
                    <?php $terms = get_the_terms( $post->ID , 'manufacturers' ); foreach ( $terms as $term ) { echo $term->name; } ?>
                  </span>
                </div>
              </div>
            </a>
          </div>

if you have any questions, feel free to ask

Welcome to the Treehouse Community

Looking to learn something new?

Boris Kamp

Boris Kamp

div with a background picture

1 Answer

Boris Kamp

Boris Kamp