I have an issue in my wordpress blog post thumbnail image. The height was stretch, I do the css height: auto; but still won't behave as expected.
.post-image img {
height: auto;
}
<?php if(has_post_thumbnail()) { //check for feature image ?>
<div class="post-image">
<?php the_post_thumbnail(); ?>
</div><!---end post image-->
<?php } ?>
Use <?php the_post_thumbnail(array(200x200)); ?>
add height & width using array to apply to image. Still not resolved then css comes from any parent structure.
Related
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 want a row with 3 columns, that depending on the length/size of the text inside of one of the columns, all 3 columns should have the same height. So, the 3 columns should have the same height and be in the same row taking into account the biggest sized column.
This is the error that I get:
http://prntscr.com/d4getm
This is the code that I have:
<?php// Define our WP Query Parameters ?>
<?php $the_query = new WP_Query( 'posts_per_page=3' ); ?>
<?php// Start our WP Query ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><?php the_post_thumbnail(array(100, 100)); ?>
<div class="caption">
<?php// Display the Post Title with Hyperlink?>
<h3 class="center"><?php the_title(); ?></h3>
<!--// Repeat the process and reset once it hits the limit-->
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
And this is the CSS:
div.caption{
text-align: center;
}
div.thumbnail{
border: 4px inset black;
height: 200px;
}
h3.center{
font-size: 20px;
}
The answer is found here: How can I make Bootstrap columns all the same height?
For this particular problem some adjustments need to be made to the html structure in order to get it to work.
I've replicated what I imagine your final html looks like once the php is executed. Here's a js fiddle: https://jsfiddle.net/qpwgkgfe/39/
UPDATE: Here is jsfiddle solution made responsive using bootstrap classes: https://jsfiddle.net/qpwgkgfe/44/
Basically, there are a few things you need to remove. First is the internal div with class thumbnail. You can get the same effect by moving the class to the parent div. Secondly, you need to remove the height: 200px from your CSS file. This setting will over-ride the attempts to make the columns match.
I've used the flex-box approach because it's new and fun, but with some adjustments the other solutions would work as well.
Here's another js fiddle using the -margin approach: https://jsfiddle.net/v92g0ddk/3/
You'll need to work out the bottom border though.
I am trying to build a website for a friend, I am building it using Drupal 7.
I have a CSS problem that is driving me crazy. The secondary menu, which I float to the right isn't next to my content. Instead it appears to the right below my content.
I feel like I have tried everything. I have the first menu floating left, secondary floating right, and the content on margin auto left and right.
I also tried clear both on the underlying container but it didn't help either.
I am experiencing this error in both Firefox and Chrome.
The only solution i could find online that i haven't tried yet, is to float right before floating left, because I'd have to tinker with Drupal core.
I actually had the problem before, and rebuild the whole damn website, and it happened again while trying to center my components.
I have changed too much since to press 'undo', so it would be awesome if someone with a lot of CSS knowledge could explain me why this occurs.
If you want to see the problem, its on this page www.mohaaleague.com, in the right bottom, but it should be as high as the left menu....
.two-sidebars #content /*the middle element*/
{
width: 827px;
margin-left:auto;
margin-right:auto;
}
#sidebar-second /*the right sidebar*/
{
width: 287px;
float:right;
}
#sidebar-first /*the left sidebar*/
{
float:left;
width: 287px;
}
#main /*the underlying div that holds all the others*/
{
width: 1650px;
margin-left: auto;
margin-right: auto;
position: relative;
clear: both;
}
btw I started from BARTIK theme.
Okay, so I managed to solve it by changing page.tpl.php,a ctually it was something I adressed in my question.
The problem was that float right was being called, before the float left. So I changed the order in which Drupal renders the page. By making Drupal render my second-sidebar first, and then my first-sidebar, and then the content i solved the problem.
I changed page.tpl.php in my themes templates directory like this, if you are reading this and have the same problem change the order of the code to this:
<?php if ($page['sidebar_second']): ?>
<div id="sidebar-second" class="column sidebar"><div class="section">
<?php print render($page['sidebar_second']); ?>
</div></div> <!-- /.section, /#sidebar-second -->
<?php endif; ?>
<?php if ($page['sidebar_first']): ?>
<div id="sidebar-first" class="column sidebar"><div class="section">
<?php print render($page['sidebar_first']); ?>
</div></div> <!-- /.section, /#sidebar-first -->
<?php endif; ?>
<div id="content" class="column"><div class="section">
<?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
<a id="main-content"></a>
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<h1 class="title" id="page-title">
<?php print $title; ?>
</h1>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($tabs): ?>
<div class="tabs">
<?php print render($tabs); ?>
</div>
<?php endif; ?>
<?php print render($page['help']); ?>
<?php if ($action_links): ?>
<ul class="action-links">
<?php print render($action_links); ?>
</ul>
<?php endif; ?>
<?php print render($page['content']); ?>
<?php print $feed_icons; ?>
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
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.