Swiper slider ignore custom settings - css

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; }

Related

flexslider on small screens

I'm using the Sparkling theme on a Wordpress site. The theme uses Flexslider within a div at the top of the page. Each slide contains an image along with a div containing a post title and excerpt.
The slider is built within header.php like in this function:
function sparkling_featured_slider() {
if ( is_front_page() && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
echo '<div class="flexslider">';
echo '<ul class="slides">';
$count = of_get_option( 'sparkling_slide_number' );
$slidecat =of_get_option( 'sparkling_slide_categories' );
$query = new WP_Query( array( 'cat' =>$slidecat,'posts_per_page' =>$count ) );
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
echo '<li>';
if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
echo get_the_post_thumbnail();
endif;
echo '<div class="flex-caption">';
if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
if ( get_the_excerpt() != '' ) echo '<div class="excerpt">' . get_the_excerpt() .'</div>';
echo '</div>';
echo '</li>';
endwhile;
endif;
echo '</ul>';
echo ' </div>';
}
}
endif;
And the resulting HTML looks like this:
<div class="top-section">
<div class="flexslider">
<ul class="slides">
<li>
<img width="1920" height="512" src="http://pathtoslider.jpeg"
class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
alt="slide1"
srcset="pathstodifferentresolutions.jpg"
sizes="(max-width: 1920px) 100vw, 1920px" />
<div class="flex-caption">
<h2 class="entry-title">Tomatoes</h2>
<div class="excerpt">Knowledge is knowing that tomatoes are a fruit. Wisdom is knowing not to put them in a fruit salad.</div>
</div>
</li>
..more slides..
</ul>
</div>
</div>
<div class="container main-content-area">
By default it suppresses the flex-caption on small screens by setting display:none in a media query, but I want to display it, so I set the display to inline in my own media query.
This leads to another problem because the whole top-section div is the height of the image and there isn't necessarily room for the flex-caption.
I would like the bottom of the entry-title to be aligned with the bottom of the image, and the excerpt immediately below the image, which I accomplish like this:
#media (max-width: 768px) {
.flex-caption {
display: inline;
bottom: 0;
}
.entry-title {
position: absolute;
bottom: 0;
}
.excerpt {
position: absolute;
vertical-align: top;
}
}
but this doesn't resize the top-section div, so I'm overwriting the main-content-area.
I've tried lots of different things, including trying height:auto just about everywhere.
I can't figure out how the slider height is set. It seems to be within get_the_post_thumbnail. Is that the issue?
You can try setting image height in functions.php
function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ).

Change the CSS to the most popular items on my homepage

I've got a div that is displaying the most popular 8 items from the shop on the home page. But I can't figure out how to produces a margin between them and get the price and add to basket button to display below the image header. see image of what it looks like now here
Any suggestions?
Here's the php code:
<div class="popular-im">
<?php $args=a rray( 'post_type'=>'product', 'stock' => 4, 'posts_per_page' => 4, 'orderby' =>'date','order' => 'DESC' ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '
<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="190px" height="190px" margin="100px" />'; ?>
<span class="price"><?php echo $product->get_price_html(); ?></span>
</a>
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
<?php endwhile; ?>
</div?
And the only css I have:
ul.popular-list li {
width: 1100px;
display: inline-block;
border: 2px solid black;
margin: 0px;
}
You've set the margin property on the list items to 0px. You need to specify what direction you want to "push" them in.
For example:
ul.popular-list li{
margin-right: 10px;
}
Will make each item push its neighbour 10px to the right (you might want to remove this effect on the last item, to make the spacing equal).
Can't give advice on moving the price etc. down without actual HTML to see, but setting something to display: block will automatically push it onto its own line.

Trouble with masonry

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.

Why lightbox doesn't work when div has a child div

I'm using a lightbox plugin the uses rel="lightbox" to fire the lightbox in a gallery I'm creating using the Advanced Custom Fields pluin. All works great until I want to add a child div that is absolutely positioned in the box div. It's supposed to change opacity on hover and still have the lightbox fire.
My markup
<?php if(get_field('image')):
$attachment_id = get_field('image');
$size = "full";
$image = wp_get_attachment_image_src( $attachment_id, $size );
$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
$image_title = $attachment->post_title;
$caption = $attachment->post_excerpt;
?>
<?php echo wp_get_attachment_image( $attachment_id, medium); ?>
<div class="hover-title">
<?php the_field('hover_title');?>
</div><!-- hover title -->
<?php endif; ?>
</div><!-- box -->
If I simply remove the "hover-title" lightbox works. But I want to use that :)
my css:
.box a {
margin:5px;
float:left;
position: relative;
overflow: hidden;
opacity: 1;
display: block;
}
is that the full code. if so then you are missing an opening <div>.
fyi your first two lines should read
$attachment_id = get_field('image');
if ( $attachment_id ) {
}
no need to call get_field() twice, it is a database call after all.
Good Luck

change user picture size n wordpress get_avatar(get_the_author_meta('user_email'), 75)

I have site http://insideoutdogtraining.com/young-calicoe-dog-fighting where author box is coming under post content using plugin http://dempseymarketing.com/products/relauthor-plugin-for-wordpress/.
But i want to increase the size of author image so it will fit to main author box div. but i change any other value in get_avatar that is of no use, it is shoing 50x50 only.
how i increase the size of image ?
If your themes support custom css, try add this css to make it's looks prettier:
.author-title {margin-top: 0;}
.data-image .avatar {border-radius: 6px; width: 80px; height: 80px;}
.author-box {width: 100%; padding: 0 30px 20px 0; clear: both;}
You will get result like this: http://prntscr.com/6aenaz
Why not just using this lines of code in your theme instead of plugin?
<?php if ( get_the_author_meta( 'description' ) && ( ! function_exists( 'is_multi_author' ) || is_multi_author() ) ) : // If a user has filled out their description and this is a multi-author blog, show a bio on their entries ?>
<div id="author-info">
<div id="author-avatar">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'yourthemesname_author_bio_avatar_size', 68 ) ); ?>
</div><!-- #author-avatar -->
<div id="author-description">
<h2><?php printf( __( 'About %s', 'yourthemesname' ), get_the_author() ); ?></h2>
<?php the_author_meta( 'description' ); ?>
<div id="author-link">
<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
<?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'yourthemesname' ), get_the_author() ); ?>
</a>
</div><!-- #author-link -->
</div><!-- #author-description -->
</div><!-- #author-info -->
<?php endif; ?>

Resources