image permalink PHP problem with Wordpress - php

the site is http://www.christopherwaller.com/wordpress/
if you take a look on the above site i'm trying to insert a link to a page on each of the images on a carousel, so if you click anywhere on the image it will navigate to a new page. I have created the link i want on the post title text (ie. Look 1, Look 2 etc . . .) by using
<h2 class="postitle"><?php the_title(); ?></h2>
but i can't for the life of me find the right PHP to create the same links on each of the carousel photos?
I'm still trying to get to grips with PHP if anyone could advise that would be great.thanks
this is the PHP
<div class="edit"><?php edit_post_link(); ?></div>
</div>
<div class="postcontent">
<?php
$content = $post->post_content;
$searchimages = '~<img [^>]* />~';
preg_match_all( $searchimages, $content, $pics );
$iNumberOfPics = count($pics[0]);
if ( $iNumberOfPics > 0 ) { ?>
<?php the_thumb('medium'); ?>
<?php } else { ?>
<div class="imgframe"></div>
<?php } ?>
<div class="post_content">
<h2 class="postitle"><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php wp_link_pages('<p class="pages"><strong>'.__('Pages:').'</strong> ', '</p>', 'number'); ?>
<div class="post_meta">
<div class="author"><?php the_author(); ?></div>
<div class="date_meta"><?php the_date(); ?></div>
<div class="category_meta"><?php the_category(', '); ?></div>
</div>
</div>
</div>
<div class="postbg_bottom"></div>
<div class="social_links">
<a class="read" title="Read the rest of this post" href="<?php the_permalink(); ?>">read more</a>
</div>
</div>
<?php endwhile ?>
<div class="navigation">
<div class="nxt_page"><?php previous_posts_link('New Entries »', 0); ?></div>
<div class="prv_page"><?php next_posts_link('« Old Entries', '0') ?></div>
</div>
<?php endif ?>
</div>
</div>
<!--CONTENT END-->
and the CSS
/* Easy Slider */
#slider ul, #slider li{margin:0;padding:0;list-style:none;}
#slider li, #slider2 li{ width:1000px;height:1100px;}
#nextBtn{display:block; width:13px; height:14px; position:relative; left:0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:840px; margin-right:20px; }
#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-100px; margin-right:20px; }
#prevBtn{ left:-20px;}
#nextBtn a, #prevBtn a{ display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;}
#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}
.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}
/* Easy Slider END */
/*SLIDER END*/

You could try using the following instead of "the_thumb();"
add the following to your theme's 'functions.php'
// Add post thumbnail theme support
add_theme_support('post-thumbnails');
Then use the following to replace the 'the_thumb();'
if ( has_post_thumbnail() )
the_post_thumbnail();
I actually use this myself and created a plugin that links the post thumbnail to the post. It seems like you're trying to do the same kind of thing so I hope this works for you.

I understand you are using the PostThumb revisited plugin, correct? And if I read correctly, this plugin outputs a single picture with the_excerpt() . If that is the case, couldn't you just do this? :
<a href="<?php the_permalink();?>">
<?php the_excerpt(); ?>
</a>

Related

WordPress Blog Index CSS Masonry Layout

I'm trying to use CSS multicolumn to create a masonry layout for the blog index page of a WordPress website I'm building, and I'm having some issues with it. I'm using Bones as the starter theme.
I adjusted the loop in the home.php file to create the masonry effect:
<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap cf">
<main id="main" class="m-all t-2of3 d-5of7 cf" role="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog">
<div class="masonry-container">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="masonry-item">
<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
<a href="<?php the_permalink(); ?>">
<section class="entry-content cf">
<h1 class="h2 entry-title"><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail() ) : ?>
<div class="masonry-thumbnail">
<?php the_post_thumbnail('masonry-thumb'); ?>
<span class="caption"><span><?php the_title(); ?></span></span></a>
<?php endif; ?>
</div><!--.masonry-thumbnail-->
</div> <!--.masonry-item-->
<div class="masonry-post-excerpt">
<?php the_excerpt(); ?>
</div><!--.masonry-post-excerpt-->
<div class="blog-index-content"><?php the_content(); ?></div></a>
</section>
</article>
<?php endwhile; ?>
<?php bones_page_navi(); ?>
<?php else : ?>
<article id="post-not-found" class="hentry cf">
<header class="article-header">
<h1><?php _e( 'Oops, Post Not Found!', 'bonestheme' ); ?></h1>
</header>
<section class="entry-content">
<p><?php _e( 'Uh Oh. Something is missing. Try double checking things.', 'bonestheme' ); ?></p>
</section>
<footer class="article-footer">
<p><?php _e( 'This is the error message in the index.php template.', 'bonestheme' ); ?></p>
</footer>
</article>
<?php endif; ?>
</div> <!--.masonry-container-->
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
I'm trying to get the image to fill the entire .masonry-item div with the post thumbnail (featured image), and right now, the .masonry-item div is larger that the post thumbnail.
There's also an empty <a> tag that appears under the image and I can't figure out where it's coming from.
I'm also trying to get the post title to appear over the thumbnail image once it, and I haven't figured out how to get it to work.
Here's a link to my test site: http://tippingpointphoto.flywheelsites.com/blog/
Any help would be much appreciated!
Inside your .masonry-thumbnail div there is a <a> link, this is the empty tag. Give it a class name and assign it these style properties:
.link { // for example if you called it link
display:block; // this will wrap it around the image
position:relative; // to position the caption
}
Now update your .caption class and add:
position:absolute;
top:auto;
bottom:0; // to text will start from the bottom of the image
z-index:1; // to position the text above the image
And when i looked at your site the image width appeared to match the div width so I'm assuming you managed to fix that problem? If not change it's css so that width is set to 100%.

gallery before post - wordpress ACF

I am working on wordpress ACF, with posts and a single gallery of images. Both display perfectly.
But I am trying to load my ACF's image gallery AFTER the posts... I try many different ways, playing around with 'endif' / 'endwhile' nothing works.
Any idea of how to change the order ?
Thanks !
#gallerie {
width: 100%; z-index: 990; position: relative; margin-top: 700px;
}
div.image-home {
text-align: center;
margin-bottom: 40px;
}
.post{width: 30%; float: left;}
That's it for the important css
(the menu on top is fixed)
<?php if(have_posts()) : ?>
<!-- beginning of the gallery -->
<div id="gallerie">
<?php ;?>
<?php $images = get_field('image_gallery');?>
<?php if( $images ): ?>
<div class="image-home">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<!-- end of the gallery -->
<?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>"><br>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="contenu">
<p><?php the_field('description'); ?></p>
<p class="postmetadata"><?php the_time('j F Y') ?> par <?php the_author() ?></p>
</div>
</div>
<?php endwhile; ?>
It appears you've posted the gallery prior to where the post loop exists entirely (ie, not even at the start of the loop, but before it.)
If you take that same gallery snippet and place it right AFTER the final endwhile, you'll get more of an acceptable result.
edit: It's really hard to comment without knowing or seeing more of the desired result, ie that same snippet could be posted right BEFORE the final endwhile if it is repeated for each post.
CSS
only changed one line:
#gallerie {
width: 100%; z-index: 990; position: relative; margin-top: 20px;
}
PHP
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>"><br>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="contenu">
<p><?php the_field('description'); ?></p>
<p class="postmetadata"><?php the_time('j F Y') ?> par <?php the_author() ?></p>
</div>
</div>
<?php endwhile; ?>
<!-- beginning of the gallery -->
<div id="gallerie">
<?php ;?>
<?php $images = get_field('image_gallery');?>
<?php if( $images ): ?>
<div class="image-home">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<!-- end of the gallery -->
Chrome Dev Tools are Awesome
Also, you're using Chrome which is a great development tool within itself, you're on the Mac, so when you're on your page press Command+Option and i. That will open the Dev Tools.
Expand your code and as you hover over each line (on the code side) you will see in the viewport your margin elements. This will allow you to play with your styling and get it perfected

Masonry in wordpress only showing one column

So I know masonry in a single column has been covered a few times on stack but I'm not very familiar with jquery and I'm not sure of the adjustments I need to make. I'm also not extremely proficient in wordpress to know if I am making an obvious mistake here. I'm editing a theme and I'm trying to make the blog use a masonry layout. The theme calls the post loop from it's own php file so the blog is kind of broken up in to several php files. I hope I am including the right info.
The posts are showing up in blocks but it's just one column straight down. It seems the container is going all the way across the page on each post. I'm not sure if it's not stopping the loop or what I need to add so that each post spreads across the container width. Any help or tips on what I am doing wrong would be greatly appreciated. Thanks in advance.
I added this to my functions.
function wdv_enqueue_scripts() {
wp_enqueue_script( 'jquery-masonry' ); // adds masonry to the theme
}
add_action( 'wp_enqueue_scripts', 'wdv_enqueue_scripts' );
This to my footer.php
<script>
jQuery( document ).ready( function( $ ) {
$( '#container2' ).masonry( { columnWidth: 220 } );
} );
</script>
Here is my code for the loop.
<div id="container2">
<?php
global $ae_post_factory;
$ae_post = $ae_post_factory->get('post');
$post = $ae_post->current_post;
?>
<div class="brick">
<div class="brick_header">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" >
<h4 class="media-heading title-blog"><?php the_title(); ?></h4>
</a>
</div>
<div class="brick_featured_image">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail (); ?>
</a>
<?php endif; ?>
</div>
<?php the_excerpt(); ?>
Read More
</div>
</div><!-- container -->
And this is the CSS
* masonry brick layout */
#container2 {
width: 100%; /* width of the entire container for the wall */
margin-bottom: 10px;
}
.brick {
width: 30%; /* width of each brick less the padding inbetween */
padding: 0px 10px 15px 10px;
background-color: #fff;
margin-top: 5px;
}
.brick_header{
border-bottom: solid 1px #1d1d1d;
padding-bottom: 10px;
padding-top: 10px;
}
.brick_header a{
color: #ffff00;
}
.brick_header a:hover{
color: white;
}
.brick_featured_image{
width: 100%;
margin-top: 10px;
}
.brick_featured_image img{
width: 100%;
height: auto;
}
Here you're providing Column-Width in JS 220px.
And in CSS : 30%.
That might be creating problems.
Make sure your HTML Structure Looks like this.
<div id="container2">
<div class="brick">...</div>
<div class="brick">...</div>
<div class="brick">...</div>
</div>
And CSS :
.container2{
width:100%;
}
.brick{
width:25%;
/*
This should be respective of the columns you want
Like for 4 columns, 100%/4 = 25%
*/
}
And JS.
var $container2 = $('#container2');
$container.masonry({
itemSelector: '.brick'
});
For more detailed explaination : http://masonry.desandro.com/#getting-started
To know more details on the problem you're having, kindly provide the URL so I can have a look at it and can provide exact solution.
I personally use the "js-masonry" class mainly because if you are using a framework such as Bootstrap or Modest Grid, it will keep the gutter settings, etc.
Here is an example:
<div class="js-masonry">
<?php if ( have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="dt-6 tl-6 tp-6">
<article>
<h2>
<a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark">
<i class="fa <?php echo strtolower(str_replace(" ", "-", get_field('project_type'))); ?>"></i>
<?php the_title(); ?>
</a>
</h2>
<?php the_excerpt(); ?>
<div class="download">
<a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark">
View <?php the_title(); ?>
</a>
</div>
</article>
</div>
<?php endwhile; ?>
<?php else: ?>
<h2>No posts to display</h2>
<?php endif; ?>
Notice that the <div class="js-masonry"> is outside of the while.

Text on a single line instead of wrap

I don't understand why my text is on a single line instead of wrapping inside the container.
My theme is based on foundation 5 and I didn't write any css line for my texts. That's the code I wrote now:
<?php
/*
Template Name: Blog Page
*/
get_header();
?>
<?php
$args = array('post_per_page' => 10);
$posts = get_posts( $args );
?>
<div class="row">
<div class="small-12 medium-3 columns">
<?php dynamic_sidebar( 'left-blog-sidebar' ); ?>
</div>
<div class="small-12 medium-6 columns">
<?php
foreach($posts as $post):
setup_postdata( $post ); ?>
<article post-id="<?php the_ID(); ?>">
<h3><?php the_title(); ?></h3>
<hr />
<p><?php the_excerpt(); ?></p>
</article>
<?php
endforeach;
wp_reset_postdata();
?>
</div>
<div class="small-12 medium-3 columns">
<?php dynamic_sidebar( 'right-blog-sidebar' ); ?>
</div>
</div>
<div class="row">
<?php
get_footer();
?>
</div>
link to page: tinyurl.com/ttttt6577
Any ideas? Thanks a lot.
Not sure what is wrong but I have copied your content in notepad file once. Then I have copied the same from notepad file and added the same in your site using developer console and it works fine, Text is wrapped correctly then after.
I would suggest to do the same with your database content as well.
I think you must consider this idea.
1.) Be sure that the parent element has a width lesser than the window screen width.
2.) Be sure that the text you have added in not continous, I mean the words are separated with space.
Try:
text-wrap: normal; or
white-space: normal; or
word-break: break-all;
on the parent div or inner paragraph.
Please add the below code to your themes css file.
article p {
word-break: break-all !important;
}

How do I align two objects vertically that aren't in the same div

I have a wordpress page with a login widget <div id='widget-sidebar' class='widgets_on_page'> above the forum content. I would like to float it to the right and have the forum title to align vertically on the left, like this:
The problem I am having is that the forum title is generated dynamically and so I can't place them in the same div.
Any ideas?
Here is the source code:
<div id="primary">
<div id="content" role="main">
<div id='widget-sidebar' class='widgets_on_page'>
<ul><li id="wp_sidebarlogin-2" class="widget widget_wp_sidebarlogin"><h2 class="widgettitle">Welcome Admin</h2><div class="avatar_container"><img src="http://localhost/wordpress/wp-content/plugins/user-avatar/user-avatar-pic.php?src=http://localhost/wordpress/wp-content/uploads/avatars/1/1344255249-bpfull.jpg&w=38&id=1&random=1344255249" alt="" class=" avatar avatar-38 photo user-1-avatar" width="38" height="38" /></div><ul class="pagenav"><li class="page_item">Dashboard</li><li class="page_item">Profile</li><li class="page_item">Logout</li></ul></li></ul>
</div><!-- widgets_on_page -->
<article id="post-2901" class="post-2901 forum type-forum status-publish hentry">
<header class="entry-header">
<h1 class="entry-title">NA Forum</h1>
</header><!-- .entry-header -->
Here is the part of my forum page template that I'm working with:
<div id="primary">
<div id="content" role="main">
<?php widgets_on_template("widget-sidebar"); ?>
<?php if ( have_posts() ) : ?>
<?php twentyeleven_content_nav( 'nav-above' ); ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php twentyeleven_content_nav( 'nav-below' ); ?>
Using absolute positioning for the widget should work. Something like:
div#content {
position: relative;
}
div#widget-sidebar {
position: absolute;
top: 10px;
right: 10px;
}
If you don't care for IE7 you can align container vertically using display: table-cell;. As this is rendered as a table, it looses the ability to float. So you have to set a width explicitly on at least one of the elements.
CSS
div {
display: table-cell;
vertical-align: middle;
}
div:first-child {
width: 80%;
}
HTML
<div>
first line<br>
second line<br>
last line
</div>
<div>
just one line<br>
</div>
Fiddle
http://jsfiddle.net/y96hb/

Categories