I'll get quickly to the point: I'm creating a Wordpress theme for my blog, using _s starter theme. I'm using the bootstrap 4 grid system, in order to achieve a 2 column post (on home page/search/archive): the post thumbnail inside a div on the left, while the post content (title, excerpt etc.) on the right.
I want to set the post thumbnail as a background-image of the div, I already achieved that, on desktop/tablet no problem, but on mobile when the thumbnail is above the post content, it won't show up, unless I set a fixed height to the image, I'm ok with that, but the issue is that some posts do not have a post thumbnail, so you can imagine that the result is pretty brutal, with blank space on post without thumbnail;
Maybe this is stupid and easy, but the question is: is there a way to solve this? Maybe it's possible to set the fixed height on mobile but only on posts that has the thumbnail?
<div class="container-fluid">
<div class="row">
<div class="post-thumbnail col-md-5" <?php echo 'style="background-image: url(' . get_the_post_thumbnail_url() . ')"' ?>>
</div>
<div class="post-content <?php echo (has_post_thumbnail())?$small:$large;?>">
</div> <!-- post content -->
</div> <!-- row -->
</div> <!-- container fluid -->
If I understood you correctly, maybe you could try something like this
<div class="container-fluid">
<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<div class="col-md-6">
<h2>
<a href="<?php the_permalink() ?>">
<?php the_title(); ?>
</a>
</h2>
<?php the_content(); ?>
</div>
<div class="col-md-6">
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail" style="background: url('<?php get_the_post_thumbnail_url(); ?>') center center / cover"></div>
<?php else : ?>
<div class="post-thumbnail" style="background: url('[some fixed image url]') center center / cover"></div>
<?php endif; ?>
</div>
</article>
<?php endwhile; else: ?>
<p>There no posts to show</p>
<?php endif; ?>
</div>
</div>
Related
I have an issue with the select field not showing.
I have flexible rows and then repeaters within that but the select/radio/checkbox dont show at all in the repeaters.
I have read through reams of related questions but not getting it to show.
I need this is the most basic terms like https://www.advancedcustomfields.com/resources/select/
Where it just changes the value.
I have tried get sub and the sub and it is just blank.
Any help would be appreciated.
Thanks in advance
<section class="main-section" id="<?php the_sub_field('unique_id'); ?>" style="padding: <?php the_sub_field('section_padding'); ?>">
<div class="container">
<div class="row">
<?php while ( have_rows('content_blocks') ) : the_row(); ?>
<div class="col-sm-12 col-md-4">
<div class="block">
<?php $value = get_sub_field('column_width'); var_dump($value); ?>
<?php the_sub_field('block'); ?>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
I have installed WordPress 4.5.3 and have built my custom theme. Everything works pretty well except for the fact that some pages don't show any content at all. I have tried to search on how to fix this but I can't find any solution, because my own problem has pages that don't even enter 'the loop'. I have tried to echo things within the loop to make sure that it enters but to no avail. My theme is still offline so i could not provide a link to it. Please any idea why it is not entering the loop.
<?php get_header(); ?>
<style type="text/css">
.submit input {
height: 50px;
width: 200px;
background: #f88b0c;
}
</style>
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-md-12 ">
<h2 class="title ">
<center>
<?the_title()?>
<hr>
</center>
</h2>
</div>
<div class="col-md-12">
<?php if(has_post_thumbnail())?>
<?php the_post_thumbnail(); ?>
</div>
<div class="col-md-12">
<p>
<?php the_content(); ?>
</p>
</div>
<?php endwhile;?>
</div>
<?php get_footer(); ?>
I know I have to ask in Wordpress forum.
But I am sort of crazy to stackoverflow, I ask here first.
I am developing Wordpress theme from scratch. Inside my blog post, I'd like to wrap the thumbnail image inside the text.
The code I used is
<div class="row">
<?php if( has_post_thumbnail() ): ?>
<div class="col-xs-12 col-sm-4">
<div class="thumbnail"><?php the_post_thumbnail('small'); ?></div>
</div>
<div class="col-xs-12 col-sm-8">
<?php the_content(); ?>
</div>
<?php else: ?>
<div class="col-xs-12">
<?php the_content(); ?>
</div>
<?php endif; ?>
</div>
Now is the content and thumbnail image are side by side.
I like to wrap the image inside text.
The image is .
You are wrapping the thumbnail and the content in two different columns, that is why they appear side by side. Change your code to this:
<div class="row">
<?php if( has_post_thumbnail() ): ?>
<div class="col-xs-12 col-sm-12">
<div class="thumbnail"><?php the_post_thumbnail('small'); ?></div>
<?php the_content(); ?>
</div>
<?php else: ?>
<div class="col-xs-12">
<?php the_content(); ?>
</div>
<?php endif; ?>
</div>
Then float the thumbnail div to the left or right with css.
.thumbnail {
float:left;
}
Im trying to make a popup window which will display the post title and post thumbnail.
I have added this popup code into the category page template.
Basically if you click on the post title, the popup window will display showing the post thumbnail and post title, however each popup window is showing the same post details.
What changes would I need to make, so each popup window displays the corresponding post details
example. I have 3 post, titled, Post A, Post B, Post C, but in the lightbox all post titles say "Post A"
Any suggestions would be appreciated
Here is the code im using.....................
<div id="maincontainer" style="width:700px; height:auto; display:block;"><!-- Begin Main Container -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<span id="magblock"> <!-- Begin Post Block -->
<div class="magazinethumbs">
<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'magazine-thumb' );
}
?>
</div>
<!-- This opens the Lightbox -->
<a class="lbp-inline-link-1 cboxElement" href="#">
<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>
</a>
</span> <!-- End Post Block-->
<div style="display: none;"> <!-- Lightbox Popup -->
<div id="lbp-inline-href-1" style="padding:10px; background: #fff;">
<!-- Here is the bug, the lightbox is loading the same post details -->
<div class="magazinethumbs">
<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'magazine-thumb' );
}
?>
</div>
<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>
</div>
</div> <!-- End Lightbox Popup -->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php wp_reset_query();?>
</div><!-- End Main container -->
Im using "Lightbox Plus For Wordpress" plugin
http://www.endocreative.com/how-to-insert-content-in-a-popup-using-lightbox-plus-for-wordpress/
I tried your modified code but did not work... Simply loads the entire category page inside the lightbox...
Here is the modified code
<a class="lbp-inline-link-<?php the_ID(); ?> cboxElement" href="#">
<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>
</a>
<div style="display: none;"> <!-- begin popup -->
<div id="lbp-inline-href-<?php the_ID(); ?>" style="padding:10px; background: #fff;">
<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>
</div>
</div> <!-- End popup -->
Thanks
I may be sleeping when you answer my comment, so.
You have to do the step 2 of that tutorial, it will give you Inline Lightbox Individual Settings.
it'll give you a sequential classes
lbp-inline-link-1 for lbp-inline-href-1,
lbp-inline-link-2 for lbp-inline-href-2 and so on..
before
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
insert:
<?php
$i = 1;
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
in the place of:
<a class="lbp-inline-link-1 cboxElement" href="#">
put
<a class="lbp-inline-link-<?php echo $i;?>" href="#">
do the same for the:
<div id="lbp-inline-href-1" style="padding:10px; background: #fff;">
put
<div id="lbp-inline-href-<?php echo $i; ?>" style="padding:10px; background: #fff;">
and before the endwhile put
<?php
$i++;
endwhile; else: ?>
OBS: you have to set the number os posts being show the same number of the "Number of Inline Lightboxes::"
Eg.: If the post list will show, 10 posts per page, on step 2 "Number of Inline Lightboxes::" you have to set to 10.
I was reading Wordpress's coding standards
The only confusing part for me is the vertical spacing between HTML code for instance:
Default Wordpress Theme 3.03:
sidebar.php:
<li id="search" class="widget-container widget_search">
<?php get_search_form(); ?>
</li>
<li id="archives" class="widget-container">
<h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3>
<ul>
<?php wp_get_archives( 'type=monthly' ); ?>
</ul>
</li>
(Here's space between the two <li> tags)
header.php
<div id="masthead">
<div id="branding" role="banner">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
(Here, there's no space between div tags)
header.php (line 79...):
</div><!-- #branding -->
<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><?php _e( 'Skip to content', 'twentyten' ); ?></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
(Here, there's is space between those 3 <div> tags
What's the coding standard of vertical spacing (I don't think it is random)?
Not sure i really follow you, but some examples..
Well formatted HTML
Indentation used, no excessive whitespace
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
Poorly formatted HTML - Example 1
No indentation
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
Example 2
Useless whitespace
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
This isn't really specific to WordPress, any good teacher or tutorial will encourage well formatted coding, and there's little excuse when you're using a good editor(i mean seriously, which do you find most readable and easier to understand?).
More..
Well formatted PHP
Indentation used appropriately
if( something ) {
do_something()
if( some_nested_condition )
do_something_else();
}
Poorly formatted
No indentation, harder to read
if( something ) {
do_something()
if( some_nested_condition )
do_something_else();
}
Formatting your code makes it easier to read, understand, or update/maintain(it's not something that will make a whole lot of sense until you start dealing with code on a regular basis). Then again, i'm not the best at explaining these things, so i'd suggest refering to information already available for the "why".. (i know my reasons)..
Mixed PHP and HTML example
Mock template loop, only for illustration
<div class="wrapper">
<div class="header">
<h1>My Website Heading</h1>
</div>
<div class="content">
<?php if( have_posts() ) : ?>
<div class="wrapsallposts">
<?php while( have_posts() ) : the_post(); ?>
<div class="post">
<h2><?php the_title(); ?></h2>
<div class="postcontent"><?php the_content(); ?></div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
</div>