I'm currently developing a theme for my blog, I have a question about the integration of Carousel Slider in Wordpress.
The slider works pretty well, showing the latest 5 posts with a featured image and a caption with the title of the post. However i've had to set a fixed height to the img, cause different size of images would change constantly the height of the carousel, so the result was not pretty good.
The problem is that on mobile the img stretch a lot, so i would like to set the post thumbnail as a background of the carousel, so i can set bg-size, bg-position etc. in order to achieve a perfectly responsive image.
Do you know if there is a way to reach that? Or maybe it is possible with my actual code without setting the thumbnail as a bg?
Thank you all in advance.
<div class="carousel-inner">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php $active_class = ( 0 === $the_query->current_post ) ? ' active': ''; ?>
<div class="carousel-item <?php echo esc_attr( $active_class ); ?>">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail('full') ?>
</a>
<div class="carousel-caption d-md-block">
<h2><?php the_title();?></h2>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
You can register a new image for your carousel using add_image_size( 'home-carousel', <width here>, <height here>, false );.
Then, you can call the_post_thumbnail('full') like this- the_post_thumbnail('home-carousel'). If you have already uploaded the images, you need to regenerate the thumbnails using this plugin.
If you still want to go with the background image option - you can get the URL of the featured image by this function - get_the_post_thumbnail_url and set it as background for the .carousel-item div.
This is my actual code using the thumbnail as a background-image.. but, like i said, the permalink doesn't work. Is there a way to have it work also with the thumbnail as a background? If I'm not clear, i want that when the user clicks on the image, it redirect to the single page post.
<div class="carousel-item <?php echo esc_attr( $active_class ); ?>" style="background:url('<?php the_post_thumbnail_url('full');?>') center center no-repeat; background-size: cover; min-height: 75vh;">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
</a>
<div class="carousel-caption d-md-block">
<h2><?php the_title();?></h2>
</div>
</div>
Related
I want to change my header logo size from 400 to 1100 width but i don't know where to put the size. What code should i put? Thank you
`
$nicdark_customizer_logo_img = get_option( 'nicdark_customizer_logo_img' );
if ( $nicdark_customizer_logo_img == '' or $nicdark_customizer_logo_img == 0 ) { ?>
<div class="nicdark_grid_3 nicdark_text_align_center_responsive">
<div class="nicdark_section nicdark_height_10"></div>
<h3 class="nicdark_color_white"><?php echo esc_html(get_bloginfo( 'name' )); ?></h3>
<div class="nicdark_section nicdark_height_10"></div>
<p class="nicdark_font_size_13"><?php echo esc_html(get_bloginfo( 'description' )); ?></p>
<div class="nicdark_section nicdark_height_10"></div>
</div>
<?php
}else{
$nicdark_customizer_logo_img = wp_get_attachment_url($nicdark_customizer_logo_img);
?>
<div class="nicdark_grid_3 nicdark_text_align_center_responsive">
<a href="<?php echo esc_url(home_url()); ?>">
<img class="nicdark_section" src="<?php echo esc_url($nicdark_customizer_logo_img); ?>">
</a>
</div>
<?php } ?>
<!--END LOGO OR TAGLINE--> `
Step 1: Go to WordPress Admin > Appearance > Customize > Additional CSS.
Step 2: Add below mentioned code in additional CSS to change the size of the logo. You just need to change max height and max width as per your need.
When you open www.nomadicmatt.com on mobile devices the first image you see is his big bold background image. I am trying to replicate the same thing on my site www.rosstheexplorer.com. The header image looks too small on mobile devices hence why I am exploring having a background image.
To achieve this I was told the following
You must change your markup. Change your
<img class="custom-header">
to
<div class="custom-header">
and set container background property:
.custom-header {
background: url(path_to_image) no-repeat;
background-size: cover;
}
I was also told, you can set style on div like this
<div style="background: url(<?php header_image(); ?>); background-size: cover;">
I tried inserting the following code into additional CSS
<div style="background: url(<?php header_image(); ?>); background-size: cover;"> </div> And
.custom-header { background: url("rosstheexplorer.com/cover-photo-1/") no-repeat; background-size: cover; }
I got the error message
Markup is not allowed in CSS.
I tried each line individually and there was an issue with both lines
Where do you alter the markup? Or is there another solution?
I have now been told I may have to make the changes in the index.php file, this is the code for my index.php file
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'content', get_post_format() );
?>
<?php endwhile; ?>
<?php penscratch_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
If I understand correctly you have tried putting html code in css file. That is you inserted
<div style="background: url(<?php header_image(); ?>); background-size: cover;"> </div>
in your css file. This is not going to work. You need to change the markup in html file that might be generated using php so you actually might need to put this markup in index.php or something.
Your have given padding and margin that is creating issue. Please look into attached image
I am trying to figure out how I can stretch my slider image to the full-page width, but have it also be responsive. I am running on Wordpress and I'm not opposed to using Javascript if necessary. Here is the site: http://cmattayers.com/b2bu/
This is my original mockup, if that helps: http://i.imgur.com/jCWPIsp.jpg
Pull the slider div at the end but inside just before last </div> of <div class="navbar-header"> it may be found in your header.php if you use a shortcode like [yourslidershortcode] in your page content you have to modify it before post into direct theme header.php put <?php echo do_shortcode( '[yourslidershortcode]' ); ?>
I found the in the site you mentioned
<div class="navbar-header">
</div><!-- end of #logo -->
<?php echo do_shortcode( '[yourslidershortcode]' ); ?>
</div>
If the slider show only on home page use below code instead of above
<div class="navbar-header">
</div><!-- end of #logo -->
<?php
if ( is_home() ) {
echo do_shortcode( '[yourslidershortcode]' );
}
?>
</div>
Intro:
I have a page designed simply with html and css, mostly just div's with css to mold the div boxes.
I want to integrate only the blog posts of a wordpress blog site into this page. Everything in the design is to be the same except for one (large) div that contains the "imported" posts. I do not want this div to contain it's own scrollbar, as if it's a window to the wp site. I want the whole site to expand vertically, determined by the height of the wp blog posts, whatever they may be.
I have used the method provided here: http://moshublog.com/2005/07/05/integrate/2/
to incorporate the blog, this has worked.
Problem:
The div containing this the blog posts ("the loop") does not expand vertically. It simply cuts the blog post(s) off as if they are not detected. The height is set to 100% on the div containing it and any div's parent to that one.
Question:
How can the div containing the wp blog posts expand vertically based on the height of those blog posts?
What I've tried:
- - - Overflow:hidden; I have floating elements on the page. I have tried every possibility with overflow:hidden;, which was suggested in any other questions I could find. This did not change anything.
- - - Making body and html height=100%. This did not change anything.
- - - Changing the height of the div containing it and any of the parent div's to a fixed height. This changed the height. If it was larger, then more of the blog posts were seen. The posts are there, just cut off.
Here is the code:
<!-- Main Body Start -->
<div class="clean" style="width:1200px; height:100%; border:0px; margin:0 auto;">
<!-- Body Column One Start -->
<div class="clean" style="width:950px; height:100%; float:left;">
<!-- Blog Integration Start -->
<div class="clean" style="width:946px; height:100%; max-width:946px; border-style:none solid; border-color:#99AAFF;
border-width:0px 2px; float:left; overflow:hidden; background-color:#ffff77;">
<div class="clean" style="width:926px; height:100%; margin:0px 10px;">
<!-- WP Blog code goes in here -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php
the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<small>Posted in <?php the_category(', ') ?> on <?php the_time('F jS, Y') ?> by <?php the_author() ?> –
<?php comments_popup_link('Be the first to comment', '1 Comment', '% Comments'); ?>
<?php edit_post_link('Edit', ' | ', ''); ?> </small>
<div class="entry">
<?php the_content('<span class="more">read more »</span>') ?>
</div>
<?php if(is_single()) {?><p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?></p><?php } ?>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft">
<?php next_posts_link('« Older Entries') ?>
</div>
<div class="alignright">
<?php previous_posts_link('Newer Entries »') ?></div>
</div>
<?php else : ?>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>
</div>
Everything below "wp blog code goes here" to "?php endif; ?" is from the wp blog site, and is "the loop".
Thank you.
Don't set the height of the divs, doing so will limit them to the height you set them, having said that, if you set the height to 100%, the div will fill 100% of the area of its container, not 100% of its contents, so for the outermost div this will be 100% of the window.
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!