php - How do I say IF class #1 on left, if class #2 on right in loop -
i have loop in wordpress spit out 2 classes. 1 class photos, other video. once new photo or video added, adds below last div.
example: photos photos video photos video
so need happen is, need photos left , videos right. tried using float:left
, float:right
, clear:left;
, clear:right;
, it's not working planned since divs set @ 50%. if not cleared, go in rows photos, photos, new row, video, photos.
i thinking there php can use, saying if photos, in column, if videos in other column.
i tried following:
.photos { float: left; width: 50%; display: block; clear: left; } .video { float:right; width:50%; display: block; clear:none; }
and also:
.photos { float: left; width: 50%; display: block; clear: none; } .video { float:right; width:50%; display: block; clear:none; }
i want videos go right , photos left top bottom. can't separate 2 in 2 different div's because in loop.
here array:
<?php while (have_posts()) : the_post(); ?> <?php do_action( 'bp_before_blog_post' ); ?> <div id="post-<?php the_id(); ?>" <?php post_class(); ?>> <div class="thumbl"> <?php if ( has_post_thumbnail() ) { // check if post has post thumbnail assigned it. the_post_thumbnail('thumbnail'); } ?> </div> <div class="date"><?php printf( __( '%1$s', 'buddypress' ), get_the_date(), get_the_category_list( ', ' ) ); ?></div> <div class="post-content"> <h2 class="posttitle"><a href="../../plugins/buddypress/bp-themes/bp-default/<?php the_permalink(); ?>" rel="bookmark" title="<?php _e( 'permanent link to', 'buddypress' ); ?> <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="entry"> <?php the_excerpt( __( 'read rest of entry →', 'buddypress' ) ); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><p>' . __( 'pages: ', 'buddypress' ), 'after' => '</p></div>', 'next_or_number' => 'number' ) ); ?> </div> </div> </div> <?php do_action( 'bp_after_blog_post' ); ?> <?php endwhile; ?>
and code example only:
<div id="post-175" class="post-175 photos type-photos status-publish hentry category-media"></div> <div id="post-176" class="post-175 photos type-photos status-publish hentry category-media"></div> <div id="post-177" class="post-175 video type-photos status-publish hentry category-media"></div> <div id="post-178" class="post-175 photos type-photos status-publish hentry category-media"></div> <div id="post-179" class="post-175 video type-photos status-publish hentry category-media"></div> <div id="post-180" class="post-175 photos type-photos status-publish hentry category-media"></div>
notice second class of each photos , videos
to answer own question, found solution!!!
place code above loop
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
put below div's outside loop
<div class="photodiv"><div></div></div> <script>$("div.photos").wrapall($(".photodiv"));</script>
this wraps new div around class .photos can float left!
if understand correctly, photos left , videos right, solution:
<style> .main {width:800px;} .main > div >span {clear:both;float:left;} .video {width:400px;float:right;"} .photo {width:400px;float:left;"} </style> <div class="main"> <div class="video"> <span>video1</span> <span>video2</span> </div> <div class="photo"> <span>photos1</span> <span>photos2</span> <span>photos3</span> </div> </div>
Comments
Post a Comment