I’m trying to make an image gallery, the issues i am having with the following code is that
the images are not floating to the left because the images are different sizes. also when i click on the image to see the full size its very pig. is there a way to fix this, or maybe display half of the picture when in galley mode.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" href='css/gallery.css'>
</head>
<body>
<div class='container'>
<?php if($images):?>
<div class='gallery cf'>
<?php foreach($images as $image):?>
<div class='gallery-item'>
<img src="<?php echo $image['full'] ?>" >
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
There are no images
<?php endif; ?>
</div>
</body>
</html>
.cf:before,
.cf:after{
content: " ";
display: table;
}
.cf:after{
clear:both;
}
.container{
max-width: 940px;
padding: 10px;
background: #f0f0f0;
margin: 0 auto;
}
.gallery{
width:100%;
}
.gallery-item{
float:left;
background: #fff;
width:19%;
margin:1%;
padding:2%;
padding-bottom: 5%;
box-shadow:1px 1px 3px rgba(0,0,0,.2);
}
.gallery-item img{
width:100%;
}
Instead of using <img> with different sizes in the thumb gallery, use a div with a fixe dimensions, so they will float perfectly, than set the image as a background-image and add background-size: cover; So the image will cover the div and the overflow will be hidden.
Here's the code using what Simon Arnold suggested:
<div class='container'>
<?php if($images):?>
<div class='gallery cf'>
<?php foreach($images as $image):?>
<a href="<?php echo $image['full'] ?>">
<div class='gallery-item' style="background:url(<?php echo $image['full'] ?>);">
</div><!-- .gallery-item -->
</a>
<?php endforeach; ?>
</div>
<!-- .gallery cf-->
<?php else: ?>There are no images
<?php endif; ?>
</div>
<!-- .container -->
CSS
.gallery-item {
width:number;
height:number;
background-size:cover;
}
I just build a Social media site and (2) things I do when A user uploads a pic
Resize image to multiple sizes for proper use / viewing (Try and keep a consistent height or width) Photoshop images to a specific height this way its consistent.
Use CSS to keep the image width an height from expanding out side the region.
CSS CHANGES:
.gallery-item img{
width:100%;
height:**MAKE THIS YOUR CONSTANT HEIGHT**;
}
It will stretch the image if its scale is off alot but you will have your answer or put it as a background in a div as listed below.
CSS CHANGES:
#Pic{
height: **MAKE THIS YOUR CONSTANT HEIGHT**;
}
<div id='Pic' style='background:url(picture.jpg)'></div>
Here is a preview (although image will stretch your layout and gallery will stay organized and clean.
Related
Hello dear developers,
Iam having a problem by coding my Post grid. I want to blur the background image on hovering. But my text (in the same div is also blurring). Do you have a solution for this? Or isnt there an other way, without using this picture in a new div in the container. Want to keep it as background-image
The posts php:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="article" style="background-image: url(<?php echo the_post_thumbnail_url(); ?>);" onclick="self.location.href='<?php echo get_permalink( $leavename = false ); ?>'">
<div class="post_info">
<span class="post_cat"><?php the_category(' ') ?></span>
<h2 class="post_title"><?php the_title(); ?></h2>
<span class="post_date"><?php the_time('d.m.Y') ?></span>
</div>
<!-- .article --></div>
The css:
.article:hover {
-webkit-filter: blur(2px);
}
.article {
margin-top: 15px;
position: relative;
height: 229px;
margin-left: 15px;
margin-right: 15px;
float: left;
width: 25%;
cursor: pointer;
}
Thank you for helping me out, ExotiQ
You can't blur a background image, but you can blur any elements or pseudo-elements
I would go on and give a solution to your problem, but this one sums it up pretty good.
Check out this awnser
Hope that helps you out!
I'm working in the custom-header.php file of my wordpress site and I'm trying to overlay a div containing a shortcode that produces a radio player (somewhat similar to this) on top of a div that contains an image. For some reason, despite using absolute and relative positioning and z-index, I can't seem to get it to lie on top of the image- it's consistently behind it. This is my code in custom-header.php:
<div id="headimg">
<div id="logo-image">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php bloginfo( 'name' ); ?>" />
<div id="logo-player">
<?php echo do_shortcode('[radioforge id=1]') ?>
</div>
</div><!-- end of #logo -->
</div>
and my CSS:
#headimg #logo-image {
width: 100%;
overflow: hidden;
position: relative;
}
#headimg #logo-image img {
max-width: 100%;
height: auto;
border: none;
}
#headimg #logo-player {
position: absolute;
top: 50;
left: 50;
z-index: 10;
}
Not really sure why this isn't producing the desired result. I've tried giving #logo-image a negative z-index value as well, but that changes nothing. I know my radio player is appearing behind the image because I've set it to autoplay when the page loads and I can hear it, but for some reason I just cannot get it to sit on top. What am I doing wrong?
I have this page here and the div .menu-content only reaches half the page even on 100% height. I really have no idea why.
Thanks!
<div class = "menu-content">
<div class="wrapper" style = "background-color:white; height:100%; width:750px;">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php global $rd_data; if ($rd_data['rd_error_text']) { ?>
<?php echo $rd_data['rd_error_text']; ?>
<?php } else { ?>
Oops, It looks like an error has occured
<?php } ?>
<?php endif; ?>
</div>
You need to remove height:100%; on .menu-content .wrapper in your CSS code and in the inline style you set on it.
That way it will be set to default height:auto; and the height will be calculated by it's content.
Try this css..
.menu-content {
display: table;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
position: relative;
}
Add html {height: 100%} and it should work.
to solve this you can simply add a div with style = "clear:both;" at the end of your div .menu-content
like this :
<div class="menu-content">
.....................
<div style="clear:both;"></div>
</div>
you have to use css this way. use the overflow:auto property and remove the unnecessary property like z-index and position from class .wrapper.
.menu-content {
background-color: #FFFFFF;
height: 100%;
overflow: auto;
}
.wrapper {
margin: 0 auto;
width: 750px;
}
I apologize in advance if this question has already been answered but I'm having the hardest time making my logo linkable here: http://testsite.brentthelendesign.com/. This is a WordPress "Skeleton" based site. Any help would be greatly appreciated! The code is below.
HTML
<header class="left full header-bg">
<div class="container">
<div class="container-inside left">
<div class="sixteen columns">
<h1 class="logo abs"><a href="<?php echo get_option('home'); ?>"/></a></h1>
<nav>
<?php st_navbar(); ?>
</nav>
</div>
</div>
</div><!--container-->
</header>
CSS
h1.logo {
left:50%;
margin-left:-80px;
float: none;
text-align: center;
}
h1.logo a {
background:url(images/logo.png) no-repeat;
width:181px;
height:127px;
display:block;
text-indent:-9999px;
float: none;
text-align: center;
cursor: pointer;
}
.header-bg {
height: 190px;
background: url(images/bg-header.png) repeat;
}
> using this css you can display your logo with your home url.
h1.logo {
float: none;
left: 50%;
margin-left: -80px;
text-align: center;
z-index: 10000;
}
h1.logo a img{
display:block;
}
You're template is set up to use the WP_HOME value as the link, which is configurable in the Wordpress Admin under Settings > General. You can also override this value by explicitly setting the constant values in your wp-config.php:
define('WP_HOME', 'http://example.com');
define('WP_SITEURL', 'http://example.com');
You can also just edit the template file if you want to hardcode it (which is more efficient if it's never going to change), replace <?php echo get_option('home'); ?> with your desired URL.
Can you try instead of setting your logo as a background image through css to put it here?
<h1 class="logo abs">
<a href="<?php echo get_option('home'); ?>"/>
<image src="">
</a>
</h1>
Try this and tell me how it goes.
Have you ever styling a wordpress header, and then found that header to ignore your CSS styling on lower-level pages? Could really use your help debugging this annoying issue -- thank you in advance!!
I'm creating a simple portfolio site for a friend here: http://sundryspirit.com/
The homepage has a global header atop the page that should be present on every page of the site:
<div id="header">
<div id="header-top">
<div id="logo">
<a href="<?php bloginfo('url'); ?>">
<h1>Sundry & Spirit</h1>
<h2>Burning Man Apparel</h2>
</a>
</div>
<div id="mainNav">
<?php wp_nav_menu(); ?>
</div>
</div>
</div>
And I've thrown some basic styling on this header for now, in the style.css file:
#header {
width: 100%;
height: auto;
background: #e1e1e1;
opacity: 0.75;
margin: 0 auto;
max-width: 960px;
}
#header-top {
height: 50px;
margin: 10px;
position: relative;
padding: 10px;
text-align: center;
}
HERE'S THE ANNOYING ISSUE: The basic header styling is not carrying over onto other pages, like http://sundryspirit.com/gallery/
How can that be if the header it just coming from a header.php file?! Thanks for your help -- my inexperience here is just driving me nutty.
You are using a relative URL to link to your stylesheet:
<link rel="stylesheet" href="wp-content/themes/sundry/style.css" />
Change it to an absolute URL:
<link rel="stylesheet" href="/wp-content/themes/sundry/style.css" />
^
or use get_stylesheet.