I'm rebuilding my wordpress portfolio site. I have featured images that start as grayscale with a transparent PNG on top, and roll over into full colour with no PNG.
So after figuring out how to get the transparent PNG to sit on top of my featured image, I gave myself a pat on the back before realizing that the PNG makes the entire box unclickable.
It's cancelling out the links underneath (featured images to post)
"pointer-events:none" doesn't help either, it actually glitches the rollover effect a bit.
This is the CSS related to the image...
#png1 {width: 305px;
height: 175px;
float: left;
position: absolute;
z-index: 1;
}
#png1:hover {opacity: 0;
}
And this is the php I've got going on...
<?php if ( have_posts() ) : ?>
<?php $i = 0; ?>
<?php while ( have_posts() ) : the_post(); $i++; ?>
<div class="post_home">
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail(array(305,175)); ?>
<?php else : ?>
<img src="<?php bloginfo('template_url'); ?>/i/noimage.jpg" width="305" height="175" alt=""/>
<?php endif; ?>
</a>
<h2><?php the_title(); ?></h2>
</div>
<?php if ($i % 6 == 0) echo '<div style="clear: both;"></div>'?>
<?php endwhile; ?>
Any suggestions?
EDIT:
I am by no means a web designer at all. I'm a print designer. I work in WP because I'm comfortable with CSS. I have a feeling the answer is right there in the code, staring at me, and I just have no idea what to do with it.
Any help at all would be super awesome :)
As I explained in my comment, you can just change the structure of the html slightly and put the img tag inside the anchor, this can be achieved by simply swapping the two lines:
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
becomes
<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
Related
I'm trying to create an Advanced Custom Fields gallery in a lightbox that pops up when an icon is clicked. I've got it to the point where the lightbox finds all the images associated with the post and displays them properly when you click the icon, but the problem I'm having is it's also showing multiple icons for the gallery as well.
Sample Image
I assume this is because I have the gallery icon as part of the foreach loop, but I have no idea how to separate it. One idea I had was to simply assign unique CSS classes to the extra icons and then hide them but I was hoping for something more elegant. Can someone point me in the right direction? The code I've cobbled together is below.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
Modify your loop as below, it will run img tag only when $i=0, means only first time.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php $i=0; foreach( $images as $image ) : ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<?php if( $i==0 ) : ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
<?php endif; ?>
</a>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>
My fonction should be very simple but it's not so easy for me, I need help for that.
Here is my website
and I use Custom fields so display into a modal box :
- either an image, when there is any
- or a soundcloud embed track, when there is any
Never both! But both shown by a thumbnail on homepage.
This is my code which is working actually but there is some bug like, why is there a souncloud box on the page, it should be on the lightbox.
<div id="post">
<a href="#" data-featherlight="#fl3">
<?php
if ( get_field('music') and get_field('music') != '' ) {
?>
<iframe width="100%" height="166" scrolling="no" class="lightbox" class="frame" id="fl3" frameborder="no" src="https://w.soundcloud.com/player/?url=<?php the_field('music'); ?>&color=1b1e25&theme_color=1b1e25&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
<?php } else { ?>
<div
<?php $image = get_field('image');
if( !empty($image) ): ?>
class="img"
href="<?php $image = get_field('image');if( !empty($image) ): ?> <?php echo $image['url']; ?>"
alt="<?php echo $image['alt']; ?> <?php endif; ?>"
data-featherlight="image" >
<?php endif; ?>
<?php } ?>
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('post-thumbnails');
}
?>
</div>
</a>
</div>
The idea is simply :
If
there is a music, get the music.
else
Get the image
any idea?
Sorry if my code is a bit dirty, I'm not a developper.
If you use php code inside of a html 'template' I would recommend the Alternative syntax for control structures.
See:
http://php.net/manual/en/control-structures.alternative-syntax.php
Then it will be something like this (it needs to be cleaned though):
<?php $image = get_field('image') ?>
<div id="post">
<?php if ( get_field('music') and get_field('music') != '' ): ?>
<iframe width="100%" height="166" scrolling="no" class="lightbox" class="frame" id="fl3" frameborder="no" src="https://w.soundcloud.com/player/?url=<?php the_field('music'); ?> &color=1b1e25&theme_color=1b1e25&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
<?php elseif( !empty($image) ): ?>
<a href="<?php echo $image['url']; ?>">
<img
class="img"
alt="<?php echo $image['alt']; ?>
data-featherlight="image" />
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('post-thumbnails');
}
?>
</a>
</div>
<?php endif; ?>
</div>
This is probably not totally correct, but there is much wrong with the structure of your HTML. class="img" alt="<?php echo $image['alt']; ?> data-featherlight="image" is not added to a tag. So I assumed it had to be and img-tag. Also there are mixed attributes that belong to an a-tag.
Also the $image variable is defined twice.
I've seen this article but it's not exactly relevant to what I'm trying to do. I have a simple blog loop in which each blog has an <div class="exerpt">for the preview of the blog text. All of my posts have a border-bottom and I'm simply trying to get rid of the border-bottom, as well as make other adjustments for the last-child. However every element is being styled, not just the last one. Please note I'm using the mighty html5blank
index.php
<div class="page-section" style="padding-top:150px;">
<div class="wrapper">
<?php get_template_part('loop'); ?>
<?php get_template_part('pagination'); ?>
</div>
</div>
loop.php
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="journal-title">
<?php the_title(); ?>
</h2>
<span class="date"><?php the_time('F j, Y'); ?> </span>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); // Declare pixel size you need inside the array ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<!-- post title -->
<!-- /post title -->
<div class="exerpt">
<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
</div>
</article>
.exerpt {
margin-bottom:80px;
border-bottom:1px solid #999;
padding:40px 0px 80px 0px;
}
.exerpt:last-child {
border:none;
margin-bottom: 60px;
}
Thanks!
You can add a separate class for the last item in the loop by doing something like this:
First add this before the loop starts:
<?php $post_counter = 0; ?>
Add this within the loop:
<?php $post_counter++; ?>
Then modify your excerpt code:
<div class="exerpt <?php if( $post_counter == count( $posts ) ) echo 'last-post'?>">
<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
</div>
CSS:
.last-post {
border:none;
margin-bottom: 60px;
}
I have the following css the margins are no working at all. Here is a link to the live site, keep in mind it is in mobile development so thats why it looks all funny. The element thats not moving is the austin kitson one right beside the tweet
css
i{
font-size:0.6em;
margin-top:-5px;
margin-left: -25px;
position:relative;
padding-bottom:10px;
}
html
<section class="blogPostsSection">
<header class="blogPostsHeader">
<?php edit_post_link('edit', '<p>', '</p>'); ?>
<h2><?php the_date(); ?></h2>
<h3><?php the_title(); ?></h3>
</header>
<?php $image = wp_get_attachment_image_src(get_field('add_images_here'), 'large');?>
<?php if( $image !=false ) {?>
<img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('add_images_here')) ?>" />
<?php } ?>
<p>
<?php the_content(); ?>
</p>
<a href="https://twitter.com/share" class="twitter-share-button"
data-text="<?php the_title(); ?>" data-via="twitterapi" data-lang="en">Tweet</a>
<script>
!function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}
(document,"script","twitter-wjs");
</script>
<i>Austin Kitson</i>
</section>
You're not including your CSS: All your CSS and JS reference localhost. e.g., http://localhost/~anderskitson/techbasics/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.3.3
I have this code in my header.php :
<div id="logo">
<?php if( get_option('of_logo') != '') { ?>
<a class="image" href="<?php echo get_option('home'); ?>/" title="Home">
<img src="<?php echo get_option('of_logo'); ?>" />
</a>
<?php } else { ?>
<h1 class="front-page-logo"><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>
<?php } ?>
</div>
All works great! basically it says if the user uploads a logo image in the theme options panel, then show that image, else, show some text.
Now I need to replace this:
<?php } else { ?>
<h1 class="front-page-logo"><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>
<?php } ?>
with display a image based on the style.css the user choose. And my problem here is if I go to each css file and declare a diferent image, then if the user uploads a image also, both images show on page.
So how can I do that?
thanks
Use a an id or class on your default logo and declare the image urls in the various css files using background-image:
<?php } else { ?>
<div id="default-logo"></div>
<?php } ?>
In the css files:
#default-logo {
background-image: url(".../1.jpg");
width: 80px;
height: 80px; /* the dimensions of your logo */
}