I've got a problem and was hoping you guys could help me out;
For a project I'm working on I want to create an uneven grid in a WordPress template. For the grid, I'm using Desandro's Masonry.js which is a lovely library for creating flexible grids.
Currently, I have all wordpress content displayed as a straight horizontal grid, like so:
even grid
However, my eventual goal is to have the grid displayed as following:
uneven grid
To give you an idea of how I currently have my grid setup here's a chunk of the code:
I'm using the following WordPress loop for the majority of the grid display:
<main id="main" class="site-main" role="main">
<?php
if ( have_posts() ) :
if ( is_home() && ! is_front_page() ) : ?>
<?php
endif;
/* Start the Loop */
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content-masonry', get_post_format() );
endwhile;
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
Which selects from the following content-part:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php echo get_permalink( $post->ID ); ?>">
<div class="row">
<div class="grid-item col-xs-12 col-sm-6 col-md-6 grid-item-content-background">
<div class="grid-item-content-background">
<div class="front-page-grid-item-tag">
</div>
<div class="button-container">
<i class="fa-border-circle glyphicon glyphicon-chevron-right"></i>
</div>
<!-- post-tags -->
<div class="tags-container">
<?php $tags = wp_get_post_tags( $post->ID );
$html = '';
foreach ( $tags as $tag ) {
$tag_link = get_tag_link( $tag->term_id );
$html .= "<div class='tag-display tag-icon-{$tag->slug}'></div>";
}
echo $html; ?>
<h4 class="front-page-category">
<?php foreach( (get_the_category()) as $category ) { echo $category->cat_name . ' '; } ?>
</h4>
</div>
<!-- .post-tags -->
<div class="grid-item-content">
<div class="grid-item-content-thumbnail"
<?php
if ( $thumbnail_id = get_post_thumbnail_id()) {
if ($image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg'))
printf('style="background-image: url(%s);"', $image_src[0]);
} ?>>
<div class="frontpage-overlay frontpage-overlay-trigger">
<div class="frontpage-article-text-container">
<h2 class="front-page-title"><?php echo get_the_title(); ?></h2>
<h3 class="front-page-subtitle">
<?php {
$subtitle = get_post_meta ( $post->ID, 'subtitle', $single = true );
if ( $subtitle !== '' ) echo $subtitle;
elseif ( $subtitle == '' ) echo '<!-- no subtitle set -->'; } ?>
</h3>
</div><!-- .front-page-article-text-container -->
</div><!-- .frontpage-overlay -->
</div><!-- .grid-item-content-thumbnail -->
</div><!-- .grid-item-content -->
</div><!-- .grid-item-content-background -->
</div><!-- .grid-item -->
</div><!-- .row -->
</a>
</article><!-- #post-<?php the_ID(); ?> -->
Now I've noticed that Masonry uses absolute positioning on the .grid-item class to position elements from top: 0px and left: 0%. Would it at all be possible to have masonry instead start elements from, say, 40px top on the uneven elements inside the grid? Making the grid effectively uneven?
Normally I would simply encapsulate the left side of the grid within a container with an additional margin-top, but sadly I've been unable to achieve that. I've also tried setting all uneven children of the grid to an additional margin-top using CSS, but that was to no avail either (which probably has something to do with the absolute positioning Masonry does).
I've been fussing about this for hours on end. If somebody could assist me that would be really appreciated!
Thank you!
Update:
Due to the used library using absolute positioning, any CSS edits are uneffective. I assume that I'll be needing a jQuery hack that'll set the top of the first element to top: 40px instead of the top: 0; but I have no clue where to start. If anybody can help me that'd be very much appreciated!
You may be able to leverage the :nth-of-type() CSS selector. If these elements are rendering in the expected order, you would use :nth-of-type(odd) to select the first column. Adding margin-top:40px; to drop every element in that column.
If the grid elements are not rendered in the expected order, you may have to modify Masonry.js or write your own JS to find and modify the top positioning of the left column grid elements.
Okay, so I eventually found the solution by adding the following jQuery:
jQuery( '.grid-item:even' ).css( 'margin-top', '40px' );
Hope it helps somebody!
Thank you all.
Related
how can i create a grid like image? for show last posts
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
<?php $latest_post = get_posts( 'numberposts=4' ); ?>
<?php foreach( $latest_post as $post ) : setup_postdata( $post ); ?>
<?php the_title(); ?><br />
<?php the_content(); ?>
<?php endforeach; ?>
<?php wp_reset_query(); ?>
One option is to use PHP to swap around the position of the image based on whether or not the increment is odd or even, for instance:
$i = 0;
while ( have_posts() ) : the_post();
if ($i % 2 == 0 ) {
// Display two columns with image on left
}
else {
// Display two columns with image on right
}
$i++;
endwhile;
If you're building your theme from scratch I'd suggest using a grid framework to handle your columns, otherwise see if the theme you're using has a grid framework already.
Edit:
There are also ways of doing this without actually having to change the markup of the page. For instance:
Swapping columns (left / right) on alternate rows
In this case you'd be able to generate your post markup without the if statement and just use CSS to swap the position of the image/video.
You can use the masonry technology or you can try this plugin
In your code above you fired two WordPress content loops. I am not sure why you had to fire two loops, although they both will work. First will print the recent posts depending on the number of Posts Per Page you selected via Settings->Reading tab from your WordPress Dashboard and the second one will again print the top 4 recent posts. I am using the first loop to tell you how you can create the attached image like grid.
Below is the PHP/HTML modifications that you have to make:
<?php $count = 1; if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="one-half <?php if( $count++ % 2 == 0 ): echo 'last-col'; endif; ?>">
<?php
// the function below will print the featured image attached to the post
the_post_thumbnail( 'your-featured-image-sizename' ); ?>
</div>
<!-- one-half -->
<div class="one-half">
<span class="post_stamp"><?php the_time( 'j m Y' ); ?></span>
<span class="post_cat"><?php the_category(', '); // This will print News if you filled the post under News Category ?></span>
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); // Insteading of printing the whole content this function will print exceprt only ?>
</div>
<!-- one-half -->
<div class="clearfix"><!-- --></div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
You would have to put the below given links to your style file:
<style>
.one-half{width: 50%; float: left;}
.last-col{float: right;}
.clearfix{clear: both; overflow: hidden;}
</style>
After making the above changes your posts will be displayed as the attached image. Good Luck (y)
I have a loop (in wordpress) grabbing the thumbnails, titles and excerpts from the most recent posts and displaying them on the homepage in a column format. I want to make the div that contains title of each post the same height as the tallest title.
I found CSS can work if you can put all the elements in a container div but I don't know how to go about doing that.
any help would be much appreciated!
(EDIT)
ok this is what I am working with
<div class="col-sm-3 col-6 postbox">
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 750, 500, true ); //resize & crop the image
?>
<?php if($image) : ?>
<div class="hthumb">
<img class="img-responsive" src="<?php echo $image ?>"/>
</div>
<?php endif; ?>
<div class="art_header">
<h3> <?php the_title(); ?></h3>
</div>
<div class="hometa"> <?php web2feel_posted_on(); ?> </div>
<?php the_excerpt(); ?>
</div>
this is the section that I need to be the same height. But it need to be responsive to the length of the post titles.
<div class="art_header">
<h3> <?php the_title(); ?></h3>
</div>
I'm a bit rusty with Wordpress so forgive me if I haven't given all the info!
I added HTML to my functions.php. After the
<?PHP get_sidebar(); ?>
and before
<?php get_footer(); ?>
while the CSS is added in my style.css Child theme. The result is my box of HTML under the main content on my home page instead of being on the right side of the main content. I am hoping someone may be able to help me?
I tried to add my HTML and CSS but it wouldn't let me post it.
I've spent about 3 hours on this by myself so far. First I tried reformatting a feature provided by the Minamaze Wordpress Theme, but I figured I may as well just right my own code as it may be easier to implement.
I fixed it! Here's how: The real problem was the fact that my front page articles were individually grouped instead of wrapped in a class. I found the index.php file (the copy from my child theme) and surrounded the homepage content in a named div class. Below is code from my index file. Put a div wrapper class between get_header and the php line below it. Close the div before the get_sidebar.
get_header(); ?>
<?php while( have_posts() ): the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('blog-article'); ?>>
<?php if ( has_post_thumbnail() ) {
$column1 = ' two_fifth';
$column2 = ' three_fifth last';
} else {
$column1 = NULL;
$column2 = NULL;
} ?>
<header class="entry-header<?php echo $column1; ?>">
<?php thinkup_input_blogimage(); ?>
</header>
<div class="entry-content<?php echo $column2; ?>">
<?php think_input_blogtitle(); ?>
<?php thinkup_input_blogmeta(); ?>
<?php thinkup_input_blogtext(); ?>
</div>
<div class="clearboth"></div>
</article><!-- #post-<?php get_the_ID(); ?> -->
<?php endwhile; ?>
<?php thinkup_input_pagination(); ?>
<?php else: ?>
<?php get_template_part( 'no-results', 'archive' ); ?>
<?php endif; ?>
?php get_sidebar(); ?>
Under get_sidebar, you can put in your HTML code for YOUR sidebar that you wish to add.
Once I wrapped them into the php into it's own class and wrapped my sidebar boxes into their own class, I used float: left and right respectively in my CSS child theme, successfully creating a sidebar. I also made their widths percentages to increase usability. You can use this same method in the content-page.php, content-single.php, if you wish to add a side bar to other pages besides just the home screen.
I'm trying to do something with my Bootstrap .post-title class.
I want to put an element.style background on my post titles, which calls as a background, to the post featured image, for each post. I've already achieve this, but something went wrong and now isnt working. the only thing i know is must look something like this.
<div class="post-featured" style="background-image:url('upload/<?php the_post_thumbnail( 'wpbs-featured' ); ?>')">
but something in the syntax there is wrong, because it render this characters on HTML. whats going on?
')">
live example: WP Featured post image, as a div background
the_post_thumbnail returns an IMG html tag. So the generated code is
<div class="post-featured" style="background-image:url('upload/<img src="path/to/file.png">')">
Definitely not something that could work... You want the url only, so you should do this:
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'wpbs-featured', true);
<div class="post-featured" style="background-image:url('<?= $thumb_url[0] ?>')">
this is the actual html snippet working.
<?php
$img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "full");
$img = $img[0];
?>
<div class="postfeatured" style="<?php if($img){echo 'background:url('.$img.');';} ?>">
<div class="page-header"><h1 class="single-title" itemprop="headline"><?php the_title(); ?></h1>
<h4>
<?php $mykey_values = get_post_custom_values('_aioseop_description');
foreach ( $mykey_values as $key => $value ) {
echo substr("$value",0 ,300); //This will display the first 150 symbols
}?>
</h4>
<hr>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_native_toolbox"></div>
<hr>
</div>
</div>
live example: Design Thinking. Blog de Diseño Gráfico. Picoboero
I've been working on a site for a while and coming to the end of the development section with a few little issues that need resolving, but first some backstory!
I'm using a wordpress theme called Oneengine (it's really good if you're wanting to create a parallax site by the way) and within it it includes a wide range of different tools that can be used.
A couple of things I'm in dire need of help with and if anyone could help that would be greatly appreciated, I really at the end of sorting it out and so close to finishing it!
Is there a way to center the social media icons at the bottom of the page?
At the moment I’m only using Twitter & Linkedin and don’t think it will need other social media icons. Due to the amount of icons that can be displayed (but aren’t) the Twitter / Linkedin icons are slightly off. Is there a way to fix this so that the divider in the middle of the two brands is in the middle of the site?
Change the size and positioning of the contact icons?
Is it possible to change the way that they are positioned? For some reason the phone icon is a tad too high and needs lowering (only by a few pixels) as well as being made slightly bigger (again, by a few pixels) Where can I find this and adjust the icons?
Making Social Media icons bigger?
Similar to the contact icons, how would I go about adjusting the size of the social media icons?
Below is the code I'm using for the footer, if anyone could have a look at it and let me know what I need to do to make these amends that would be super cool.
</div><!-- #content -->
<div class="clearfix"></div>
<?php if(is_front_page()){ ?>
<center><footer id="contact" class="site-footer template-wrap" role="contentinfo">
<?php
$color = oneengine_option('footer_blog_color');
$img = oneengine_option('footer_blog_img', false, 'url');
$repeat = oneengine_option('footer_blog_repeat');
$parallax = oneengine_option('footer_blog_parallax');
$cover = oneengine_option('footer_blog_cover');
$bg_repeat = '';
if( $repeat == 1 || $repeat == true){
$bg_repeat = 'background-repeat:no-repeat;';
}else $bg_repeat = 'background-repeat:repeat;';
$bg_cover = '';
if( $cover == 1 || $cover == true){
$bg_cover = 'background-size:cover;';
}else $bg_cover = '';
$bg_img = '';
if( $img ){
$bg_img = 'background-image:url('.$img.');';
}else $bg_img = '';
$img = ( ! empty ( $img ) ) ? ''.$bg_img.'' : '';
$color = ( ! empty ( $color ) ) ? 'background-color:'. $color .';' : '';
$repeat = ( ! empty ( $repeat ) ) ? ''. $bg_repeat .'' : '';
$cover = ( ! empty ( $cover ) ) ? ''. $bg_cover .'' : '';
$parallax = ( ! empty ( $parallax ) ) ? 'background-attachment: fixed;': '';
/** Style Container */
$style = (
! empty( $img ) ||
! empty( $color ) ||
! empty( $repeat ) ||
! empty( $cover ) ||
! empty( $parallax ) ) ?
sprintf( '%s %s %s %s %s', $img, $color, $repeat, $cover, $parallax ) : '';
$css = '';
if ( ! empty( $style ) ) {
$css = 'style="'. $style .'" ';
}
?>
<div class="footer-img" <?php echo $css ?>></div>
<div class="container">
<div class="row">
<?php
$color_title = oneengine_option('footer_blog_title_color');
$color_sub_title = oneengine_option('footer_blog_subtitle_color');
$color_title = ( ! empty ( $color_title ) ) ? 'color:'. $color_title .';' : '';
$color_sub_title = ( ! empty ( $color_sub_title ) ) ? 'color:'. $color_sub_title .';' : '';
/** Style Container */
$title_color = (
! empty( $color_title ) ) ?
sprintf( '%s', $color_title) : '';
$css_title_color = '';
if ( ! empty( $title_color ) ) {
$css_title_color = 'style="'. $title_color .'" ';
}
$sub_title_color = (
! empty( $color_sub_title ) ) ?
sprintf( '%s', $color_sub_title) : '';
$css_sub_title_color = '';
if ( ! empty( $sub_title_color ) ) {
$css_sub_title_color = 'style="'. $sub_title_color .'" ';
}
?>
<div class="col-md-12">
<div class="heading-title-wrapper" style="color">
<h2 class="title" <?php echo $css_title_color ?>><margin-top= 30px><?php echo oneengine_option('footer_blog_title') ?></h2>
<span class="line-title" style="background-color:#65b32e"></span>
<span class="sub-title" <?php echo $css_sub_title_color ?>><?php echo oneengine_option('footer_blog_subtitle') ?></span>
</div>
</div>
<div class="clearfix"></div>
<div class="list-contact-wrapper">
<?php if(oneengine_option('email_footer') != '') {?>
<div class="col-md-4">
<div class="contact-wrapper">
<span class="icon"><i class="fa fa-envelope"></i></span>
<p><?php echo nl2br(oneengine_option('email_footer')); ?></p>
</div>
</div>
<?php } ?>
<?php if(oneengine_option('address_footer') != '') {?>
<div class="col-md-4">
<div class="contact-wrapper">
<span class="icon"><i class="fa fa-map-marker"></i></span>
<p><?php echo nl2br(oneengine_option('address_footer')); ?></p>
</div>
</div>
<?php } ?>
<?php if(oneengine_option('phone_footer') != '') {?>
<div class="col-md-4">
<div class="contact-wrapper">
<span class="icon"><i class="fa fa-phone"></i></span>
<p><?php echo nl2br(oneengine_option('phone_footer')); ?></p>
</div>
</div>
<?php } ?>
</div>
<div class="clearfix"></div>
<?php if(oneengine_option('contact_form') != '') {?>
<div class="contact-form-wrapper">
<h2 class="contact-title"></h2>
<?php echo do_shortcode( oneengine_option('contact_form') ); ?>
</div>
<?php } ?>
</div>
</div>
<div style = "center">
<div class="site-info">
<ul class="social-footer">
<?php if(oneengine_option('twitter') != '') {?>
<li><i class="fa fa-twitter"></i></li>
<?php } ?>
<?php if(oneengine_option('linkedin') != '') {?>
<li><i class="fa fa-linkedin"></i></li>
<?php } ?>
</ul>
<div class="copyright">
<?php echo nl2br(oneengine_option('copyright')); ?>
<br>
</div><!-- .site-info -->
</footer><!-- #colophon -->
<?php } ?>
</div></div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
Here the website Im building can be found: http://www.jamiebull.co.uk/Meadows_site/ so you know what I'm talking about.
Thanks for looking!
To centralise your social media icons, you will need to add the following CSS at the bottom of your stylesheet:
.social-footer li {
margin: 0px;
border-right: 0px;
padding-right: 0px;
}
.social-footer li:first-child {
border-right: 1px solid white;
padding-right: 10px;
margin-right: 10px;
}
To increase the size of the contact icons and adjust their line-height, you will need to target each icon using CSS. For example, if you want to increase the size of the phone icon and adjust its top margin, you will need to use the following code:
.fa-phone {
font-size: 25px !important;
line-height: 2 !important;
}
To target the map icon and the envelope icon, you will need to use fa-map-marker and fa-envelope respectively instead of .fa-phone in the code above.
To increase the size of the social media icons in the footer, you will need to add the following CSS at the botoom of your stylesheet:
.social-footer .fa {
font-size: 25px;
}
EDIT: I should note that I'm not familiar with this theme. But many modern and more advanced themes have special theme settings with specific fields for adding to the CSS. Some themes will even use these fields to generate a styles.css automatically.
So depending on the theme you may want to define the CSS for these elements in those specific fields in the theme settings, rather than adding directly to styles.css, which may be overwritten.
Well, it turns out that the contact and social media icons are actually just characters in a font that is included with the theme.
This means you can just add some information to your styles.css and change font-sizes, line-heights, etc. and it will update those icons.
So by adding to or changing your styles.css you can overwrite their sizes/positions. It looks like the CSS for some of these elements is already defined in your styles.css (but this could be generated automatically depending on how the theme works), so look to change them before you add something new.
The footer with the social icons is .social-footer, for which you seem to have defined some CSS in styles.css already. It looks like you have padding:0; defined, but it appears that the theme automatically accounts for the missing icons? If I remove padding:0; then the icons seem to center themselves.
For the social icons themselves, here is the CSS for their size:
.social-footer li {
/* Probably you have some other stuff defined here already...*/
font-size: 18px; /* This line controls the size of the icons. */
}
As for the contact icons, the icons themselves are actually all aligned properly, but I guess the phone icon is just drawn with a little more whitespace in the font itself.
The contact icons themselves are of class fa, while the phone icon specifically is of class fa-phone. If you want to manually move it down, you can add something like this (you don't appear to have fa-phone defined already):
.fa-phone {
font-size: 18px; /* This is what the icons are set to now. Increase to make bigger */
line-height: 2.2; /* This is what the icons are set to now. Increase to move further down */
}
Hopefully this is what you were looking for!
If you ever need to know the class for a particular element or want to play with the CSS on the fly, Google Chrome's element inspector and other dev tools are fantastic. Just hit F12 in Chrome or right click and select "Inspect Element".