I wanted to use the masonry.js for the first time and I am getting trouble.... I checked for solutions but I don't/ can't see mistakes...
My Idea was to show the Posts in the Masonry of my WordPress feed.
Would be really thankful for any help.
Thats the
<div id="masonry" class="article_div js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>>
<?php query_posts('category_name=cat1, cat2, cat3');?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="item">
<?php the_post_thumbnail(); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?>
</div>
<?php endwhile; else: endif; ?>
<br class="clear">
</div>
The CSS file:
.article_div{
position:absolute;
top:100%;
background-color:#FFF;
min-height:100%;
width:100%;
padding-left:15%;
padding-right:15%;
}
.item{
width:45%;
}
Or do you have any other suggestions?
Thank you for your help :*
I'd do something like this, where ever you can add custom jquery code
var $isotope_container = $('#masonry');
var sortBy = 'random';
var columnWidth = '.item';
$isotope_container.isotope({
layoutMode: 'masonry',
masonry: {
columnWidth: columnWidth
},
itemSelector : '.item',
sortBy: sortBy
});
You need to have isotope.js in your theme, and masonry as well.
Related
I want to create a small swiper slider that will rotate some logo images with a scrollable horizontal bar. I have already done something similar without problems, but now I'm facing a problem with the integration of the slider. The images I'm using have different sizes, but I want to give them a fixed width and height of 80px. I've tried to setup this value from the css but the settings will be ignored, images will be stretched to 1280px width and it will fade in between the images and I don't want this beahviour. I have more than one swiper instance on the same page, but I don't think that this can be a problem because I've setted another class for the slider who are giving me the problem.
Here is the code I'm using:
<?php
$args = array(
'post_type' => 'post',
'name' => 'partners'
);
$logo_img = new WP_Query( $args );
?>
<div class="container" id="">
<div class="row" style="margin-top:1em;margin-bottom:1em;">
<?php if( $logo_img->have_posts() ): while( $logo_img->have_posts() ): $logo_img->the_post();
$logo_gallery = get_post_gallery_images( $post->ID );
if( $logo_gallery ): ?>
<div class="swiper-container partners-slider" id="partners-slider">
<div class="swiper-wrapper" id="partners-logo-wrapper">
<?php foreach($logo_gallery as $logo ): ?>
<img class="swiper-slide partner-logo" src="<?php echo $logo; ?>" alt="" width="80" id="partner-logo"/>
<?php endforeach; ?>
<?php endif; ?>
</div>
<div class="swiper-scrollbar"></div>
</div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
</div>
<script type="text/javascript">
const swiperLogos = new Swiper('.partners-slider',{
autoplay: {
delay: 5000,
},
slidesPerView: 'auto',
slidesPerColumnFill: 'row',
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},
});
</script>
</div>
CSS
#partners-slider{
height: 80px;
width: 100%;
background-color: transparent;
}
.partner-logo{
height: 80px;
width: 80px;
}
Try .swiper-slide img { width: 80px!important; height: 80px!important; }
I am trying to build a website for a friend, I am building it using Drupal 7.
I have a CSS problem that is driving me crazy. The secondary menu, which I float to the right isn't next to my content. Instead it appears to the right below my content.
I feel like I have tried everything. I have the first menu floating left, secondary floating right, and the content on margin auto left and right.
I also tried clear both on the underlying container but it didn't help either.
I am experiencing this error in both Firefox and Chrome.
The only solution i could find online that i haven't tried yet, is to float right before floating left, because I'd have to tinker with Drupal core.
I actually had the problem before, and rebuild the whole damn website, and it happened again while trying to center my components.
I have changed too much since to press 'undo', so it would be awesome if someone with a lot of CSS knowledge could explain me why this occurs.
If you want to see the problem, its on this page www.mohaaleague.com, in the right bottom, but it should be as high as the left menu....
.two-sidebars #content /*the middle element*/
{
width: 827px;
margin-left:auto;
margin-right:auto;
}
#sidebar-second /*the right sidebar*/
{
width: 287px;
float:right;
}
#sidebar-first /*the left sidebar*/
{
float:left;
width: 287px;
}
#main /*the underlying div that holds all the others*/
{
width: 1650px;
margin-left: auto;
margin-right: auto;
position: relative;
clear: both;
}
btw I started from BARTIK theme.
Okay, so I managed to solve it by changing page.tpl.php,a ctually it was something I adressed in my question.
The problem was that float right was being called, before the float left. So I changed the order in which Drupal renders the page. By making Drupal render my second-sidebar first, and then my first-sidebar, and then the content i solved the problem.
I changed page.tpl.php in my themes templates directory like this, if you are reading this and have the same problem change the order of the code to this:
<?php if ($page['sidebar_second']): ?>
<div id="sidebar-second" class="column sidebar"><div class="section">
<?php print render($page['sidebar_second']); ?>
</div></div> <!-- /.section, /#sidebar-second -->
<?php endif; ?>
<?php if ($page['sidebar_first']): ?>
<div id="sidebar-first" class="column sidebar"><div class="section">
<?php print render($page['sidebar_first']); ?>
</div></div> <!-- /.section, /#sidebar-first -->
<?php endif; ?>
<div id="content" class="column"><div class="section">
<?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
<a id="main-content"></a>
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<h1 class="title" id="page-title">
<?php print $title; ?>
</h1>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($tabs): ?>
<div class="tabs">
<?php print render($tabs); ?>
</div>
<?php endif; ?>
<?php print render($page['help']); ?>
<?php if ($action_links): ?>
<ul class="action-links">
<?php print render($action_links); ?>
</ul>
<?php endif; ?>
<?php print render($page['content']); ?>
<?php print $feed_icons; ?>
I'm not sure exactly what kind of script I need for this, hopefully someone on here knows.
On the home/archive pages of a wordpress powered blog I am building I have a grid of thumbnails (featured images) only. Instead of these linking to the actual post/page, I'd like them to trigger a lightbox type of element that has a description of the post/page.
From there, the user would be able to either continue (via read more) to the post or close it and continue searching the grid.
Any insight is greatly appreciated!
Pure CSS Solution:
<body>
<div id="featured-grid">
<?php
if(have_posts()) : while(have_posts()) : the_post();
$default = '<img src="'.get_bloginfo('stylesheet_directory').'/images/default_thumb.jpg">';
$thumb = has_post_thumbnail() ? get_the_post_thumbnail() : $default;
?>
<div class="post-block">
<div class="post-thumb">
<a class="hover-trigger" href="#"><?php echo $thumb; ?></a>
</div>
<div class="post-preview lightbox">
<div class="preview-wrap">
<a class="featured-image" href="<?php the_permalink(); ?>"><?php echo $thumb; ?></a>
<?php the_excerpt(); ?>
</div>
</div>
</div>
<?php
endwhile;endif;
?>
</div>
</body>
<style type="text/css">
.post-block{width:300px;height:300px;}
.post-thumb{width:100%;height:100%;margin:10px;float:left;}
.post-thumb *{display:block;width:100%;height:100%;}
.lightbox{
display:none;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
position:fixed;
top:0;
left:0;
}
.preview-wrap{width:960px;margin:0 auto;position:relative;top:40px;background:#FFF;}
.post-block:hover .lightbox{display:block;}
.post-block:hover .post-thumb{display:none;}
</style>
This is EXTREMELY rudimentary and is largely untested. Overall, this should get you started in the right direction. Hope this helps!
I'm trying to display my posts my like.
A B
C D
E F
G
H
I
So far I have the following:
<div id="left-column">
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="post-row">
<?php
if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
the_post_thumbnail(array(170, 80));
}
?>
<div class="post-title"><?php the_title();?></div><!--post-title-->
<div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
</div><!--post-row-->
<?php endif; endwhile; else: ?>
<?php endif; ?>
</div><!--left-column-->
<div id="right-column">
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="post-row">
<?php
if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
the_post_thumbnail(array(170, 80));
}
?>
<div class="post-title"><?php the_title();?></div><!--post-title-->
<div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
</div><!--post-row-->
<?php endif; endwhile; else: ?>
<?php endif; ?>
</div><!--right-column-->
<div id="restofpage">
NEED THE REST OF THE CODE.
</div>
Any idea how I can limit my logic to just 6 posts and how to continue wit the rest of the page?
don't do two whiles - keep it to just one. create an <article> or <div>for every post and just change the class: for example small for the first 6 and wide for the rest ...
<div id="page">
<?php
if (have_posts()) :
$index = 0;
while(have_posts()) : the_post();
?>
<article class="post<?= $index < 5 ? ' small' : ' wide' ?>">
<?php
if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
the_post_thumbnail(array(170, 80));
}
?>
<div class="post-title"><?php the_title();?></div><!--post-title-->
<div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
</article><!-- post -->
<?php
++$index;
endwhile;
endif;
?>
</div><!--left-column-->
<div id="restofpage">
NEED THE REST OF THE CODE.
</div>
and then you can do the rest via CSS:
#page {
width: 420px;
margin-right: -20px;
font-size: 0;
}
.post {
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
font-size: 16px;
margin-right: 20px;
margin-bottom: 40px;
}
.post.small {
width: 200px;
}
.post.wide {
width: 420px;
}
You can use two loops, for the 1st loop
query_posts(array(
'showposts' => 6
));
while (have_posts()) : the_post();
// your code here for 2 columns
endwhile;
Above code will load only first 6 posts by default, now for the 2nd loop
wp_reset_query();
query_posts(array('paged'=>$paged, 'offset'=>7));
while (have_posts()) : the_post();
// your code here for single column/rest of the post
endwhile;
This code will load all posts beginning from offset 7.
I have been modifying a wordpress theme and as I just began to put content in the pages, I noticed the h2 header is displaying below the content (see here:http://mefo1.ecin1prod1lnx1.com/about/history/). I can't seem to find an explanation.
Below is the page.php code. I am happy to PasteBin any other code that might be needed.
Thank you very much,
Alex
<?php get_header(); ?>
<script>
jQuery(document).ready(function(){
jQuery(".share").click(function(){
jQuery(this).next("div").slideToggle("slow");
jQuery(this).toggleClass("active"); return false;
});
});
</script>
<div class="posts-column">
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php include(TEMPLATEPATH . '/includes/share.php'); ?>
<div class="entry">
<?php the_content(); ?>
</div>
<div class="clear"></div>
<?php endwhile ?>
<div class="clear"></div>
<h2 class="page"><?php the_title(); ?></h2>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php endif; ?>
</div><!--end posts-column-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Move above your div class entry
Read what #Shaun said. Remember, divs are block elements by default which means they will grow to take up as much room as they need. This forces any sibling blocks to start below unless otherwise specified through css. Move your h2 to the top of the document. Normal document flow is left to right, top to bottom so your first div (with class "entry") will be displayed as a block level element (since you didn't specify otherwise) and it's sibling will be rendered below hence why your h2 element is not where you expect.