Wordpress Featured Image Link - html

I have 9 posts showing up on a page. I'm only showing the featured images from the post and the images are set to a background image. I want to be able to click the images and have the image show up in a new window. I'm having a little trouble figuring this out. I want to wrap the div in an link.
This is the code I have:
<article <?php post_class('col-md-4 site-content'); ?>>
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id(
$post->ID ), 'large' );
$image = $image[0]; ?>
<?php endif; ?>
<div class="coupons-post" style="background-image: url('<?php echo
$image; ?>')">
<?php /*?><div class="entry-thumbnail">
<a href="<?php the_permalink(); ?>"><?php
the_post_thumbnail('large' , array( 'class' => 'img-responsive') ); ?></a>
</div><?php */?>
<!-- <div class="post-content">
<div class="entry-meta">
<p class="date">News / <?php the_time('n.j.Y') ?></p>
</div>
<h2 class="entry-title">
<?php the_title(); ?>
</h2>
<div class="entry-summary">
<p></p><p><?php $excerpt = get_the_excerpt(); ?>
<?php echo substr($excerpt, 0, 100); ?>...</p>
<p></p>
<a class="read-more" href="<?php the_permalink(); ?>">Read More</a>
</div>
</div>-->
</div>
</article>
I want to wrap the div "coupons-post" with the link.

Like this?
<article <?php post_class('col-md-4 site-content'); ?>>
<?php
if (has_post_thumbnail( $post->ID ) ) {
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
$image = $image[0];
}
?>
<a href="<?= $image; ?>" target="_blank">
<div class="coupons-post" style="background-image: url('<?php echo $image; ?>')">
</div>
</a>
</article>

Related

Moving element over image?

The title of my featured article is positioned via css, but the results are not showing up properly in every screen.
I tried to place "mvp-feat2-main-text" element before "mvp-feat2-main left relative".
Problem: Text is shown behind the image. I need the text to show on top of the image.
Here is the relevant code:
<section id="mvp-feat2-wrap" class="left relative">
<?php global $do_not_duplicate; global $post; $recent = new WP_Query(array( 'tag' => get_option('mvp_feat_posts_tags'), 'posts_per_page' => '1' )); while($recent->have_posts()) : $recent->the_post(); $do_not_duplicate[] = $post->ID; ?>
<div class="mvp-feat2-main left relative">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<div class="mvp-feat2-main-img left relative">
<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { ?>
<?php the_post_thumbnail('mvp-post-thumb', array( 'class' => 'mvp-reg-img' )); ?>
<?php the_post_thumbnail('mvp-mid-thumb', array( 'class' => 'mvp-mob-img' )); ?>
<?php } ?>
<?php if ( has_post_format( 'video' )) { ?>
<div class="mvp-feat-vid-but">
<i class="fa fa-play fa-3"></i>
</div><!--mvpfeat-vid-but-->
<?php } else if ( has_post_format( 'gallery' )) { ?>
<div class="mvp-feat-gal-but">
<i class="fa fa-camera fa-3"></i>
</div><!--mvpfeat-gal-but-->
<?php } ?>
</div><!--mvp-feat2-main-img-->
<div class="mvp-feat2-main-text">
<h3 class="mvp-feat2-main-cat left"><span class="mvp-feat2-main-cat left"><?php $category = get_the_category(); echo esc_html( $category[0]->cat_name ); ?></span></h3>
<div class="mvp-feat2-main-title left relative">
<?php if(get_post_meta($post->ID, "mvp_featured_headline", true)): ?>
<h2><?php echo esc_html(get_post_meta($post->ID, "mvp_featured_headline", true)); ?></h2>
<?php else: ?>
<h2 class="mvp-stand-title"><?php the_title(); ?></h2>
<?php endif; ?>
</div><!--mvp-feat2-main-title-->
<div class="mvp-feat1-info">
<span class="mvp-blog-author"><?php esc_html_e( 'By', 'click-mag' ); ?> <?php the_author(); ?></span><span class="mvp-blog-date"><i class="fa fa-clock-o"></i><span class="mvp-blog-time"><?php the_time(get_option('date_format')); ?></span></span>
</div><!--mvp-feat1-info-->
</div><!--mvp-feat2-main-text-->
</a>
</div><!--mvp-feat2-main-->
Try to use
style="z-index:value">
on your html at then end where you want to have your element appear ontop of the image
Example:
<div class="mvp-feat2-main-text" style="z-index:99;">
the z-index value must larger then the z-index of the image so try to increase that value until it appears ontop.

Bootstrap inline not stacking correctly

I've looked at the other bootstrap posts, but I still can't seem to figure out why my code won't work. Here's where I'm at. Any help is greatly appreciated as I've been working on this for days...
If I'm using grid shouldn't it just stack?
<!-- Your site title as branding in the menu -->
<div class="container">
<div class="row">
<div class="col-md-6">
<?php if ( ! has_custom_logo() ) { ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php } else {
the_custom_logo();
} ?>
</div>
</div>
<!-- end custom logo -->
<div class="row">
<div class="col-md-6">
<p class="text-right">Call Now</br>
636-244-4444</p>
</div>
</div>
</div>
You should place site logo and Call now section inside one .row element to make it inline with other. If 2 sections is in 2 different .row, it cannot same line.
See more about Bootstrap grid here (because Bootstrap 3 documentation is better explain your problem): https://getbootstrap.com/docs/3.3/css/#grid
<div class="row">
<div class="col-md-6">
<?php if ( ! has_custom_logo() ) { ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php } else {
the_custom_logo();
} ?>
</div>
<!-- end custom logo -->
<div class="col-md-6">
<p class="text-right">Call Now</br>
636-244-4444</p>
</div>
</div> <!-- end row (one line) here -->

What are these circles that keep appearing in online inspector?

Every time I inspect my code, there is a circle that appears. Does anyone know what this is?
Edit 1:
Thank you to Sam I now know that they are text nodes. I am having a little trouble identifying where they are in my code. If anyone can spot them and point them out to me it would be much appreciated.
<?php get_template_part( 'parts/shared/header' ); ?>
<?php
if(have_posts()) : ?>
<div id="main-content">
<div id="inside">
<div class="content">
<div class="container">
<div class="padding_30">
<h1 class="page_header_blog">Blog</h1><br>
<div class="blog_wrapper">
<?php while(have_posts()) : the_post(); ?>
<div class='post'>
<div class='thumbnail'>
<?php the_post_thumbnail(); ?>
<?php echo get_avatar( get_the_author_meta( 'ID' ) , 32 ); ?>
</div>
<h2 class='each_blog_info' id='post-<?php the_ID(); ?>'></h2>
<div class='blog_info'>
<small><i class='fa fa-calendar-o' aria-hidden='true'></i>
<?php the_time('F jS, Y') ?> ❘
<i class='fa fa-user' aria-hidden='true'></i>
<?php the_author() ?> ❘
<?php the_category( ', ' ); ?>
</small>
</div>
<h2 class='blog_title_link'><a href='<?php the_permalink() ?>' rel='bookmark' title='Permanent Link to <?php the_title_attribute(); ?>'>
<?php the_title(); ?></a></h2>
<div class='excerpt'>
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif;?>
<div class="text-center"><?php
the_posts_pagination( array(
'prev_text' => __( 'Previous page', 'spafix' ),
'next_text' => __( 'Next page', 'spafix' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'spafix' ) . ' </span>',
) );
?></div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php get_template_part( 'parts/shared/footer' ); ?>
This is the code from my index.php page where the text nodes are apprearing in inspector. They appear after the loop with the div class of 'post'.
This is "text nodes", they are generated by not accurate PHP and contain " ".
These are due to white spaces... Generally when two or more nodes which inline-block property comes together

Table does not align in div in internet explorer

Internet Explorer is giving me a hard time here. I've made a WordPress theme and have made it mostly compatible with IE, all except for a table at the bottom of posts. This table is spilling over the side of the container div it's in, and it also seems too large in IE. (It should be 430 x 200 px) You can see the JSFiddle here: http://jsfiddle.net/vlyandra/kEm3R/
The Wordpress theme code used to generate each post looks like the following:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="bordered centered">
<p class="negative-margin alignleft header"><?php the_title(); ?></p><p class="negative-margin alignright date"><?php the_date(); ?></p><div style="clear:both;"></div>
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content negative-margin">
<?php if ( has_post_thumbnail() ):?>
<div id="entry-left">
<?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
echo get_the_post_thumbnail($post->ID, 'large');
echo '</a>';?>
</div>
<div class="entry-right">
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div><div style="clear:both;"></div>
<div class="entry-right">
<table class="fixed-height fixed-width">
<tr>
<td class="valigned"><h3 class="date">Details</h3>
<?php the_field('details');?>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>
</a>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'tertiary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'tertiary-image'); endif; ?>
</a>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'fourth-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'fourth-image'); endif; ?>
</a>
</td>
</tr>
</table>
</div>
<?php else : ?>
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div>
<?php endif; ?>
<?php endif; ?>
I'm terrible with IE, and would love any help.
Have you tried the following...
margin:0px auto; or
left:0; right:0;
You have set the div it is in to the corect dimensions and do not want it spilling from that div...
Well then set the
CSS:
tblid{
width : 100%;
length : 100%;
}
Not sure if above is correct css format

Floats in IE not aligning correctly

I'm trying to get my divs to float correctly in IE. They look great in Chrome and Firefox, but IE chews up the code. You can see the jsfiddle here: http://jsfiddle.net/vlyandra/kEm3R/ Basically, the image div does not line up horizontally with the entry div, and the table at the bottom (despite having a max width) is not resizing. The code to generate the posts is below:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="bordered centered">
<p class="negative-margin alignleft header"><?php the_title(); ?></p><p class="negative-margin alignright date"><?php the_date(); ?></p><div style="clear:both;"></div>
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content negative-margin">
<?php if ( has_post_thumbnail() ):?>
<div id="entry-left">
<?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
echo get_the_post_thumbnail($post->ID, 'large');
echo '</a>';?>
</div>
<div class="entry-right">
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div><div style="clear:both;"></div>
<div class="entry-right">
<table class="fixed-height fixed-width">
<tr>
<td class="valigned"><h3 class="date">Details</h3>
<?php the_field('details');?>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>
</a>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'tertiary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'tertiary-image'); endif; ?>
</a>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'fourth-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'fourth-image'); endif; ?>
</a>
</td>
</tr>
</table>
</div>
<?php else : ?>
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div>
<?php endif; ?>
<?php endif; ?>
Any help would be greatly appreciated!
I'm not seeing it. Can you send a link to your site?
Also, have you tried applying .alignleft to the images?