I am setting featured images to posts, and displaying a default image if one isn't set. My code is here...
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail( 'full', array( 'class' => 'img-responsive' ) );
} else { ?>
<img src="default-image.jpg" class="img-responsive" />
<?php } ?>
Problem is simple. All of the images are different heights. I want them all to be uniform height so my bootstrap grid lines up evenly.
Any thoughts? Lots of examples online but none work with featured image AND default image.
Please Paste below code in your functions.php file
add_image_size('image_size', 510, '520', true);//510 is width and 520 in height
Now when ever you upload any image in wordpress post it automatically resize into 510*520 (but bee care full image size must be bigger than what ratio you want)
How to call please check Below
the_post_thumbnail( 'image_size', array( 'class' => 'img-responsive' ) );// image size is the parameter you pass in functions.php file you can add as many size as you want
In your code, add the "unim" class like so:
the_post_thumbnail( 'full', array( 'class' => 'unim' ) );
To achieve uniform images on site, you can use the open source library bootstrap-spacer via NPM
npm install uniformimages
or you can visit the github page:
https://github.com/chigozieorunta/uniformimages
Here's an example of how this works using the "unim" class (you'd require jQuery for this):
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="uniformimages.css" rel="stylesheet" type="text/css"/>
<script src="uniformimages.js" type="text/javascript"></script>
</head>
<body>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<a href="product1.html">
<img src="image1.jpg" class="unim"/>
</a>
</div>
<div class="col-sm-4">
<a href="product2.html">
<img src="image2.jpg" class="unim"/>
</a>
</div>
<div class="col-sm-4">
<a href="product3.html">
<img src="image3.jpg" class="unim"/>
</a>
</div>
</div>
</div>
</section>
</body>
Related
I've followed a tutorial about CodeIgniter and I have a problem in putting icon from a bootstrap class. Here is the code
<div class="container">
<div class="row">
<! -- Main Column -->
<div class="span9">
<section>
<h2>Page name </h2>
</section>
</div>
<! -- Side Bar -->
<div class="span3">
<section>
<?php echo mailto('iamjohnx3302#gmail.com', '<i class="icon-user"</i> iamjohnx3302#gmail.com'); ?> <br>
<?php echo anchor('admin/user/logout', '<i class="icon-off"></i>logout'); ?>
</section>
</div>
</div>
</div>
Also, I have added the bootstrap script and CSS by :
<head>
<title><?php echo $meta_title; ?></title>
<!-- Bootstrap -->
<link href="<?php echo base_url('css/bootstrap.min.css'); ?>" rel="stylesheet">
</head>
Also below the body, I added the script :
<script src="<?php echo base_url('js/bootstrap.min.js'); ?>"></script>
if you want to use Glyphicons use this one <span class="glyphicon glyphicon-envelope"></span> and you can find details here http://getbootstrap.com/components/ or if you want to use Font-Awesome you can use like this <i class="fa fa-bluetooth-b"></i> details here https://fortawesome.github.io/Font-Awesome/icons/
The icon from Bootstrap,
you should follow the class name like this:
<i class="glyphicon glyphicon-user"></i>
For your reference Bootstrap Components
Hope this helps.
I got tasked with fixing problems on my company's Wordpress instance. Since I'm novice when it comes to Wordpress and PHP I am sure that I am missing something trivial; problem I am having is that pages look different in preview and when viewed directly. For example, here is what part of HTML that gets rendered in live preview (for site header):
<header role="banner" class="clearfix" id="site-header">
<div class="container">
<!-- #logo -->
<div id="logo">
<h1>
My Site
</h1>
</div>
<!-- /#logo -->
<!-- #primary-nav -->
<nav class="clearfix" role="navigation" id="primary-nav">
</nav>
<!-- #primary-nav -->
</div>
</header>
However, when I visit site directly (go to http://example.com), I get following HTML in that part:
<div class="container">
<div id="logo">
<h1>
My Site
</h1>
</div>
</div>
I'm getting similar behavior when trying different themes. Thus, I'm suspecting something may be wrong with installation of Wordpress... however, I can't just re-install everything - I've inherited this Wordpress instance and must stick with it.
I have no problem with modifying php files and HTML - would just appreciate if someone more experienced with Wordpress would tell me where I should start looking. php files? CDN plugins?
EDIT:
Here is header.php from theme:
<!-- #header -->
<header id="site-header" class="clearfix" role="banner">
<div class="container">
<!-- #logo -->
<div id="logo">
<?php if (is_front_page()) { ?><h1><?php } ?>
<a title="<?php bloginfo( 'name' ); ?>" href="<?php echo home_url(); ?>">
<?php if (of_get_option('st_logo')) { ?>
<img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo of_get_option('st_logo'); ?>">
<?php } else { ?>
<?php bloginfo( 'name' ); ?>
<?php } ?>
</a>
<?php if (is_front_page()) { ?></h1><?php } ?>
</div>
<!-- /#logo -->
<!-- #primary-nav -->
<nav id="primary-nav" role="navigation" class="clearfix">
<?php if ( has_nav_menu( 'primary-nav' ) ) { ?>
<?php wp_nav_menu( array('theme_location' => 'primary-nav', 'container' => false, 'menu_class' => 'nav sf-menu clearfix' )); ?>
<?php } ?>
</nav>
<!-- #primary-nav -->
</div>
</header>
<!-- /#header -->
I had this issue and I resolved it by changing the settings that were not displaying properly to something else (such as un-checking a checked box), publishing it, and then changing it back and publishing again. I'm guessing there was some mis-match somewhere between something cache and something database and this was a quick way to force them to match up again.
Just had a similar issue but rather I had the desired result in the customize preview but not in the actual site. I tried a variety of things in the themes code but sadly I think it just came down to a hard refresh of my customizer and page tabs (ctrl+F5 in chrome) then tweaking the slider and publishing.
I'm developing a WordPress theme powered by Foundation 5. Everything seems work well, but something is wrong when I switch to smartphone.
As you can see in the image below, when resizing the browser window on desktop, foundation topbar collapses to small screen mode.
Unfortunately, if I access the page from my mobile browser, the the text in the topbar becomes smaller and the menu does not collapse.
here is header.php code:
<body <?php body_class(); ?>>
<header class="site-header" role="banner">
<div class="row">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
</header>
<div class="contain-to-grid">
<nav id="nav" role="navigation" class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><?php bloginfo( 'name' ); ?></h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<?php wp_nav_menu( array('theme_location' => 'primary', 'menu_class' => 'right', 'walker' => new Foundation_Walker()) ); ?>
</section>
</nav>
</div>
<div id="container" class="row">
The image below shows what appears in my desktop browser:
As you can see, the menu collapse regularly.
The second image shows what happens in google chrome on android:
Same problem on iPad: the text is small and the menu does not collapse.
Hope somebody could help me.
Here is a live example: http://htmlintro.altervista.org/wordpress/
Solved!
I did not include the following meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Now it works fine.
I want to remove the green search box from the header but I don't know which file and lines in the Editor I must remove.
Regards.
You should not be editing default themes!
Create a child theme http://codex.wordpress.org/Child_Themes
The example actually shows using TwentyFourteen
Then copy the header.php to your child themes folder and edit it.
This way updates for TwentyFourteen will not over-write your changes.
When updates do come, compare the TwentyFourteen header.php with your header.php and make the updates to it.
OR better yet,
Create the child theme and add this to your style.css after the parent themes import
.search-toggle, #search-container {display: none;}
Then you do not need to modify or copy the header.php file at all.
You need to edit the header.php file of your WordPress theme that can be found at [your_WP_folder]/wp-content/themes/twentyfourteen/header.php.
Look for the <header> section and copy and paste the code below instead of the original.
<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<!-- Hide Search button
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
-->
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
</div>
<!-- Hide Search Form (optional)
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
-->
</header><!-- #masthead -->
Goto your_project/wp-content/themes/twentyfourteen/header.php file and open it.
Search for the word search-toggle and search-container (This one is optional).
.search-toggle
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
#search-container
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
Remove both html block of codes or you can wrap them in a comment for later use like this:
<!--
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
-->
Topdown is correct. Creating a child theme is very important.
But an easier way to remove search bar in twenty fourteen theme is to put .search-toggle { display: none; } in your child css file.
Here's a bit more information on customizing twenty fourteen theme in WordPress and how to create child theme for twenty fourteen theme.
Im trying to make a custom wordpresss theme. I want to install a Jquery plugin (slideshow). I so far have a theme installed that I created but don't know how to make the plugin interface with my theme. Do I need to declare a space in a div or place some php code in the theme so that the plugin knows where to go?
You can directly write the jquery code for the sliders. For example, applying accordion slider in my template page:
header.php file, save it in your custom theme folder
<!DOCTYPE html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
?></title>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-
1.7.1.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style/main.css"
type="text/css" />
<script src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"
type="text/javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.kwicks-
1.5.1.pack.js"></script>
<!--Accordion -->
<script type="text/javascript">
$(document).ready(function() {
$('.kwicks').kwicks({
max : 800,
spacing : 5
});
});
</script>
<!--end Accordion-->
</head>
<body>
<div id="wrapper">
<div class="w1">
<div class="w2">
<!-- header -->
<header id="header">
<div class="line"></div>
<!-- logo -->
<h1 class="logo"><a href="#">xcvdfgdf - Career Development
Centre</a></h1>
<!-- main nav -->
<nav id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
</header>
<?php wp_head(); ?>
Then, create slider.php, where you want your slider to appear
<?php
/**
* Template Name: accordion
*
* Selectable from a dropdown menu on the edit page screen.
*/
?>
<?php get_header(); ?>
<body>
<!-- main -->
<div id="main">
<!-- gallery -->
<section class="intro gallery">
<div class="gallery-holder">
<div class="slider_list_accordion">
<ul class="kwicks horizontal" >
<li id="kwick_1"><img src="<?php
bloginfo('template_url'); ?>/images/slider-1.png" alt=""
/></li>
<li id="kwick_2"><img src="<?php
bloginfo('template_url'); ?>/images/slider-2.png" alt=""
/></li>
<li id="kwick_3"><img src="<?php
bloginfo('template_url'); ?>/images/slider-3.png" alt=""
/></li>
</ul>
</div>
</div>
</section>
<?php get_footer(); ?>
Then, footer.php
<footer id="footer">
<div class="footer-holder">
<div class="container">
<div class="case">
<!-- contact -->
<div class="contact">
<section class="contact-holder">
<h4>Get in Touch</h4>
<dl>
<dt>Telephone:</dt>
<dd>+1 800 603 6035</dd>
<dt>Fax:</dt>
<dd>+1 800 889 9898</dd>
<dt>E-mail:</dt>
<dd>contact#vycdc.com</dd>
</dl>
<address>9870St Vincent Place, <br >Glasgow, DC 45 Fr
45.</address>
</section>
<div class="add">
<div class="case">
<strong class="copyright">©
Copyright 2012 sdfr Development Centre. All rights reserved.</strong>
<nav class="add-nav">
<ul>
<li>Sitemap</li>
<li>Terms of use</li>
<li>Privacy policy</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
Then, in Wordpress, go to Pages->Add new. In title enter Home and in the right side you will see Templates. Click the dropdown and select accordion and click the publish button.
Now, click on the top left corner on the website or blog name to check for the slides.