I'm using Bootstrap to create a image gallery
'<a href="../'.$img.'" class="col-sm-4 image-col" data-gallery>';
'<img src="../'.$img.'" class="img-responsive">';
'<figcaption>';
$desc;
'</figcaption>';
'</a>';
For some reason there are gaps when the gallery is processed.
I'm grabbing the data from a for loop and there should be no gaps.
All the images are the same height.
See below for better view
Related
I've started diving into WP code for theme customization, yet I suddenly saw a serious bootstrap column fla where I can't really locate the problem.
I've designed the blog section as col-xs-12 col-sm-4 for the thumbnailed side image, and col-xs-12 col-sm-8 for the content itself. Everything is fine and dandy in all size stretches except for 768px-990px where the columns start to overlap each other, in approx the same size as the margin they should have from each other.
Here is the code:
<div class="row">
<?php if( has_post_thumbnail()): ?>
<div class="col-xs-12 col-sm-4">
<div class="thumbnail-img"><?php the_post_thumbnail('medium'); ?>
</div>
</div>
<div class="col-xs-12 col-sm-8">
<p><?php the_content(); ?></p>
</div>
<?php else: ?>
<div class="col-xs-12">
<p><?php the_content(); ?></p>
</div>
<?php endif ?>
</div>
Here are a few pictures to emphasize:
EDIT:
I changed, just to check, what happens if instead the 8-4 row, I will do a 6-6, and it works great (picture included below). isn't 8 + 4 = 12? what am I missing here?
Try giving image width 100% so that it fits in div when resizing.
Or create a fiddle and share link.
I've found out that wordpress doesn't really play nicely with bootstrap since the_post_thumbnail('$string') would overlap the bootstrap column grid if they aren't set right (WP doesn't auto set the image width into a column restricted area.)
the_post_thumbnail('$string') receives the following set params:
the_post_thumbnail( 'thumbnail' ); // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' ); // Medium resolution (300 x
300 max height 300px)
the_post_thumbnail( 'medium_large' ); // Medium Large (added in WP
4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' ); // Large resolution (1024 x
1024 max height 1024px)
the_post_thumbnail( 'full' ); // Full resolution (original
size uploaded)
There is no 100% for the_post_thumbnail('$string') yet i'm just guessing that it could be hardcoded into the function itself as a param.
My solution was either using $string = thumbnail or changing the grid to col-sm-6 for both columns.
Place the url of the image in a img tag with the img-responsive class.
I have just begun exploring CSS and am looking forward to gain an in-depth understanding of the language.
One of the issues I'm facing with a project is the alignment of the products in mobile view.
Website - http://klcl.com.my/product-listing/
In the mobile view, the products are touching the right side of the screen. I want them to be centered. I tried adding a 'margin-right: 15px' and it works; however, that new line of code affects the social media icon in the footer as well. I'm guessing because both the product list and the icon are using the '.col-md-4' class tag.
Here is the code:
<div class="col-md-9 product-listing-main">
<div class="row">
<?php
$args = array(
'posts_per_page' => -1,
'post_type' => 'product'
);
$query = new WP_Query($args);
while ($query->have_posts()) :
$query->the_post();
?>
<div class="col-md-4">
<figure>
<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID));?>" />
<figcation><?php the_title(); ?></figcation>
</figure>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
</div>
How can I align the products to the middle without affecting any other elements on the website? Any help will be greatly appreciated.
After a short look at your code i see that you are often manipulating the paddings of bootstrap elements (container, col-* …) and that leads to confusion. Try to avoid this and everything runs fine.
add this to your css to reset the previous settings:
.on-social{margin-right:initial !important;}
or
.on-social{margin-right:0px !important;}
please consider margin: 0 auto; for centering the elements.
I have a small issue. I searched for relative issues but couldnt find anything.
I would like to fix this issue without Scripting if possible, and without adapting body width.
So here we go. I would like the Logo to display INSIDE the box area as it appears on Maximized Window.
Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.
I've tried playing with body width and setting it in other container. No Luck.
You can see what i mean in here:http://imageshack.us/g/43/q3qr.jpg/.
And here is the code:
http://jsfiddle.net/NCZg8/4/`
>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<img class="Logo_wrapper" src="http://pizza-bar.gr/wordpress/wp-content/uploads/2013/09/PB_Logo.png"/>
</a>
</body>`
Note: try to stretch the "Result" Window and u will see what i mean.
Ty in advance.
In order to keep the element from going out of boundaries on the right side, you should be setting the right property instead of the left.
.Logo_wrapper{
position:absolute;
top:40%;
right:5%;
z-index:10;
}
Updated fiddle: http://jsfiddle.net/NCZg8/6/
Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.
In order for the logo to appear inside the header, it's important to set position:relative on the header element. To see a more detailed explanation of relative and absolute positioning, see here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Your problem of margin can probably be fixed with css.
I came across this site: http://www.jfletcherdesign.com.
I want to replicate how the home page shows the featured image of all of his posts and that when you click on the image you drill down into in the specific post. I also want to replicate how you are able to click forward and next with an image to the corresponding post within a category.
Can someone please point me in the right direction for setting up this functionality?
Bonus points if you can point me to the jQuery plugin that is being used for the rollover effect on his category page.
Thanks!
That site is based on the Imbalance theme by WPShower. It's a free theme so you can download it and check out all the source code. That should answer your first question.
To get images that act as pagination to the previous and next posts all you need to do is use the get_adjacent_post function. You can use something like the code below to set it up to link an image. Stick it in the bottom of your single.php or wherever you want the pagination to appear.
<?php
$prev_post = get_adjacent_post(true, '', true);
$next_post = get_adjacent_post(true, '', false);
?>
<?php if ($prev_post) : $prev_post_url = get_permalink($prev_post->ID); ?>
<a class="previous-post" href="<?php echo $prev_post_url; ?>"><img src="www.site.com/previous-image.png" alt"previous post" /></a>
<?php endif; ?>
<?php if ($next_post) : $next_post_url = get_permalink($next_post->ID); ?>
<a class="next-post" href="<?php echo $next_post_url; ?>"><img src="www.site.com/next-image.png" alt"next post" /></a>
<?php endif; ?>
Now for the jQuery rollover, it is pretty simple:
$(document).ready(function() {
$('.article').mouseenter(function() {
$(this).find('.article-over').show();
});
$('.article').mouseleave(function() {
$(this).find('.article-over').hide();
});
$('.article').hover(
function() {
$(this).find('.preview a img').stop().fadeTo(1000, 0.3);
},
function() {
$(this).find('.preview a img').stop().fadeTo(1000, 1);
}
);
});
Which acts on the following HTML markup generated by the theme:
<li class="article li_col1" id="post-1234">
<div class="preview">
<img width="305" height="380" src="http://www.site.com/image/src.jpg" class="attachment-background wp-post-image" alt="" title="Cool Post">
</div>
<div class="article-over">
<h2>Cool Post</h2>
<div class="the-excerpt">
<p>Blah blah blah this is a post excerpt...</p>
</div>
</div>
</li>
So basically when you first go to the site, for all the items except the first, all you see is the .preview div that holds the category image. The .article-over div is absolutely positioned over the .preview div but has a style of display:none so that you can't see it.
When the mouseenter event is fired, the .article-over div is displayed via show(), and the image inside .preview fades out to an opacity of 0.3 allowing you to see the .preview div's black background behind it. When the mouse leaves, .article-over is hidden, and the .preview image fades back to fully opaque.
If you're still stuck let me know and I'll try to explain further.
I can't best describe this in words, so I'll show you with pictures.
Here's how my designer intends the Gravatar images to look in the sidebar of our site:
Here's the overlay image I made (screenshotted from Photoshop):
Here's how it looks right now...
Not quite ideal, I think you'll agree. This is the CSS code I am using:
.gravatarsidebar {
float:left;
padding:0px;
width:70px;
}
.gravataroverlay {
width:68px;
height:68px;
background-image: url('http://localhost:8888/images/gravataroverlay.png');
}
And here's the XHTML (and a sprinkle of PHP to fetch the Gravatar based on the user's email address, which is fetched from our database):
<div class="gravataroverlay"></div>
<div class="gravatarsidebar">
<?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>
</div>
So what can I do? I can't use relative positioning as it makes the word 'Search' in the div below stay moved to the right.
Thanks for your help!
Jack
Have you tried using z-index to force the two images to overlay? Maybe something like this? Here is a pseudo example.
<div class="gravatar-sidebar">
<img class="overlay-image" src="images/gravataroverlay.png" />
<?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
echo '<img src="' . $gravatar_link . '" alt="Gravatar" class="gravatar-image"/>'; ?>
</div>
/*CSS*/
.gravatar-sidebar {float:left;padding:0px;width:70px;position:relative;}
img.overlay-image{position:absolute;left:0px;top:0px;z-index:10;}
img.gravatar-image{position:absolute;left:0px;top:0px;z-index:1;}
You can't use relative positioning where? On the gravatar image?
I have to wonder why you have your overlay div outside the container of the image itself. At the very least they should be siblings. Make a container that only holds the image and the overlay, then make the overlay positioned absolute at 0,0 to be on top of the image.
<div class="gravatarsidebar">
<?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>
<div class="gravataroverlay" style="position:absolute; top:0; left:0;"></div>
</div>