So, I built a website and now I'm turning it into a customizable wordpress theme.
The thing is: I used CSS grid to build a gallery, and I want to make it dynamic. I need to upload the photos (and sometimes videos or gifs) in wordpress and have them fit in the grid.
This is my code:
**HTML**
<div class="gallery">
<figure class="figure1">
<img src="img/r1.jpg" class="figure-img">
</figure>
<figure class="figure2">
<img src="img/r2.jpg" class="figure-img">
</figure>
<figure class="figure3">
<img src="img/r3.jpg" class="figure-img">
</figure>
<figure class="figure4">
<img src="img/r4.jpg" class="figure-img">
</figure>
<!-- more figures -->
</div>
**CSS**
.gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.figure-img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: 0
}
.figure1 {
grid-column: span 1;
}
.figure2 {
grid-column: span 3;
}
.figure3 {
grid-column: span 4;
}
.figure4 {
grid-column: span 4;
}
/* more figures */
Since some of the images are not supposed to occupy the entire row and others are (it's a bit random), I can't just use a regular gallery plugin.
I must add I'm a beginner when it comes to php...
Any ideas?
Thank you!
Have you looked into using Advanced Custom Fields Pro? You can use the repeater field and create the gallery and create custom classes to toggle each image for grid size.
Related
I'd like to set a random background-image into a <div>Container</div>
To keep it simple I installed a plugin using [shortcode] to display random images. This works fine.
How to get the shortcode [wp-image-refresh] working together with background-image:url(...)
I tried it even as inline-style with no result.
This is what I have:
HTML
<div class="header_random-image">
<div id="hero"></div>
</div>
CSS
#hero {
background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
background-size: cover;
background-position: 50% 30%;
height:70vh;
width: 100%;
margin-top: -65px;
}
Another try with no result: Inline-style
<div class="header_random-image">
<div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>
Could anybody be so kind to help? Or does anybody has a simple solution to place div-random-background-images?
Best from Berlin
In most cases your CSS code will be served in a static file, thus the php code won't execute.
As the inline example doesn't work either, I guess the short code does not return an image url but a full image tag instead. The plugin's description
confirms this assumption. WP-IMAGE-REFRESH
You could try this:
PHP
<div class="header_random-image">
<?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>
CSS
.header_random-image {
overflow: hidden;
}
.hero_class {
height: 100%;
width: auto;
margin-top: 0;
}
This should display the image. You'd still have to center it if you want (use flex-box) and check for problems caused on different screen sizes depending on the side ratio of your uploaded images and solve them with some Javascript.
Alternative
Use ACF Pro and add a gallery field to your posts/pages or an option page if you want the same images on all views.
PHP
<?php
$images = get_field('name-of-your-gallery-field');
shuffle($images);
$imageUrl = images[0]['url'];
<div class="header_random-image">
<div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>
Let's say we need to display 2 different images for mobile and desktop. We would usually do something like this:
HTML
<div class="container"></div>
CSS
.container {
background-image: url('image-for-mobile.jpg');
}
#media (min-width: 1024px) {
.container {
background-image: url('image-for-desktop.jpg');
}
}
But what happens when we are getting those images from the server? Let's say from Wordpress or any other source?
One way to do it, would be:
HTML
<div class="container for-mobile" style="background-image: url(<?php echo $img_for_mobile; ?>);"></div>
<div class="container for-desktop" style="background-image: url(<?php echo $img_for_desktop; ?>);"></div>
CSS
.for-mobile {
display: block;
}
.for-desktop {
display: none;
}
#media (min-width: 1024px) {
.for-mobile {
display: none;
}
.for-desktop {
display: block;
}
}
For obvious reasons, even though this "works" this is not right because we are repeating the markup. What if we have a ton of content inside '.container'? We would have to repeat all that, only to have a different background image.
Another option would probably be passing the variables as data attributes and then with jQuery getting those variables and assigning the right background image in relation to the screen size. Something like this:
HTML
<div class="container" data-mobile="<?php echo $img_for_mobile; ?>" data-desktop="<?php echo $img_for_desktop; ?>"></div>
jQuery
// This is pseudo code, not tested
var imgForMobile = $('.container').data('mobile');
var imgForDesktop = $('.container').data('desktop');
$(window).on('resize', function() {
if ($(window).width() < 1024) {
$('.container').css('background-image', 'url(' + imgForMobile + ')');
}
else {
$('.container').css('background-image', 'url(' + imgForDesktop + ')');
}
});
How could we attack this situation in a more elegant and proper way? Any thoughts would be much appreciated. Thanks in advance!
The correct way:
This is what image srcset is for!
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
If I had to guess though, I think you would benefit from using this and object-fit together. Do you want the background image to be sized to cover?
If so, this is way the super responsive and efficient way to do this:
.container {
position: relative;
}
.container img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
<div class="container">
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
</div>
The older server side way:
If you really wanted to do it in PHP like you have in the example, this is the pattern we use for things like this in WordPress.
$image = 'desktop.jpg';
switch (true) {
case wp_is_mobile() :
$image = 'mobile.jpg';
break;
}
<div class="container" style="background-image: url(<?php echo $image; ?>);"></div>
You can still use the CSS approach, by passing in a full URL or CDN.
If the rule inside of a media query that is false, that image won't be loaded by the browser.
.container {
background-image: url('https://www.example.com/image-for-mobile.jpg');
}
#media (min-width: 1024px) {
.container {
background-image: url('https://www.example.com/image-for-desktop.jpg');
}
}
There are alternatives which place this logic in either your HTML, JS, or even server code. HTML's answer is using a srcset attribute with an image, or using a <picture> element instead which was introduced in HTML5. srcset on an image is typically used to handle differences in pixel density, while the <picture> element is used to serve varying images using media queries. The first <source> whose media query matches the document is served, and you can include a general fallback, which allows backward compatibility for older browsers, however this approach loads at least 2 images - as the fallback will always be loaded.
<picture>
<source srcset="big.jpg 1x, big-2x.jpg 2x, big-3x.jpg 3x" media="(min-width: 40em)" />
<source srcset="med.jpg 1x, med-2x.jpg 2x, med-3x.jpg 3x" />
<img src="fallback.jpg" alt="fancy pants" />
<!-- fallback.jpg is *always* downloaded -->
</picture>
The way I did it in my site was I used JQuery to check if its a mobile browser (quick google will find the if statement used, its rather long)
Edit:
Here: if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('body').addClass('mobile');
}
I made it append the body tags with class='mobile'
and then in my CSS I have two sets:
body {
background:black;
}
.mobile body {
background: blue;
}
I have two sizes of images (vertical and horizontal), they will always be the same size, respectfully. I am trying to create a container that would hold the image but not push the content over and stay a similar height or width. I also dont want to show the image full size so I was thinking about using overflow:hidden. I have attempted this in a JSFiddle seen here but it stretches the container. Any help is appreciated.
<div>
<span class="mixSpanLeft">
<img src="http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg" />
</span>
<span class="mixSpanRight">
<p>The images will always be on the left and will be only two sizes, 1000x500 or 500x1000. What is the best way to show them if they have alternating sizes? Should I have completely different styles for them?
</p>
</span>
</div>
http://jsfiddle.net/hmjoLmej/4/
What about something like this.
I used the more appropriate flexbox instead of float, which gives greater control of the layout.
The image is added using background, which gives greater control to scale, clip, etc.
Note, since the p is block element they should not be children of a span (which is inline element), so I updated your markup/CSS with a div
Updated, showing how you can add the image source in the markup
.wrapper {
display: flex;
}
.mixSpanLeft {
width: 50%;
background-color: #abc;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
.mixSpanLeft a {
display: inline-block;
height: 100%;
width: 100%;
}
.mixDivRight {
width: 50%;
background: #def;
}
.mixDivRight p {
padding: 2%;
}
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg)">
</span>
<div class="mixDivRight">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
Hi Is there any of you out there that is able to assist me on this. I'm experimenting with the fluid layout of bootstrap on my wordpress site. Apparently the isn't working properly. I created a .span 12 column and its not taking up the full width of the browser. Instead its width shrank. Is there a way around this?
Heres the experiment which i created using a custom page template
<?php
/*
Template Name: page-work
*/
?>
<?php get_header(); ?>
<h1><?php the_title(); ?></h1>
<style type="text/css">
.span12{
background:black;
color:white;
padding:20px 0;
text-align:center;
margin-top:15px;
}
.span6{
background:blue;
color:white;
padding:20px 0;
text-align:center;
margin-top:15px;
}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">span 12</div>
</div>
<div class="row-fluid">
<div class="span6">span 6</div>
<div class="span6">span 6</div>
</div>
</div>
This is because bootstrap has a fixed width of span12 as
.span12 {
width: 1170px;
}
for bigger screens.
If you still want, you can try this:
#media (min-width: 1200px) {
.span12 {
width: 100%;
}
}
Always create a child css file and put that below the bootstrap file.
I would recommend upgrading to Bootstrap 3 as it handles fluid-containers in a much better way and you wouldn't have this problem in the first place.
.span12 becomes col-xx-12 (xx is either xs, sm, md and lg...read up on that!) and has a width of 100%. BS3 uses percentage widths rather than fixed widths as mentioned in the answer above. It's also not too difficult to move from BS2 to 3.
http://getbootstrap.com/ - download here
http://getbootstrap.com/getting-started/ - documentation
As a general rule, wordpress won't really change how your website looks. It's the styles you put around it so Wordpress in this case is irrelevant.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I've created a grid portfolio page on my website and I'm looking to add a feature to the thumbnails. I'd like that whenever someone hovers over a thumbnail, it will show the post title, date of post and excerpt.
I've been trying to find an example of what I mean and this is very similar;
http://lucybenson.net/redesign2011/
So far my loop on Wordpress looks like this
http://pastie.org/2135220
Is there a plugin that does this? If not, would anyone be able to tell me how I could achieve this?
Thanks in advance.
There are plugins for this kind of thing, but it's very easy to do by yourself.
This isn't tested, but it should get you going in the right direction:
<style type="text/css" media="screen">
.image-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.image-list li {
margin: 0 10px 0 0;
padding: 0;
float: left;
}
.image-list li a {
display: block;
position: relative;
height: 50px;
width: 50px;
}
.image-list li a span {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
color: #fff;
}
</style>
<ul class="image-list">
<li>
<a href="#">
<img src="myimage.jpg" alt="My Image">
<span>
This is my overlay content
</span>
</a>
</li>
</ul>
<script type="text/javascript">
$(function() {
$(".image-list li a").hover(
// Mouse Over
function() {
$(this).find("span").fadeIn();
},
// Mouse Out
function() {
$(this).find("span").fadeOut();
}
);
});
</script>
If you're looking for a javascript-independent solution - I know, sounds really silly but it's worth a try - you can do it through CSS purely. It's not too hard - http://jsfiddle.net/teddyrised/TWBhU/
What I did was to use the -webkit-transition / transition property. Of course, my solution isn't as elegant as what Jesse has posted, but it's just nice to know CSS could work some magic, too.
There are a few things you need to get sorted here - first you need to get your head around getting one thing on top of the other - so here's the effect you're after done really simply in just css using the :hover class. The key is using the absolute position in an absolutely positioned wrap to get the text on top of the image
http://jsfiddle.net/aDwe4/
Next you want the fade the item - some people might not like it - but jquery makes this super easy - drop the hover class and put the animate function in your footer in some script tags
http://jsfiddle.net/aDwe4/1/
Finally you now need to translate this into your wordpress tempalte - I'm not sure what's going on with your template - so I'll just write an example. I would install the get_the_image plugin then put something like this within your loop
<div class="imagewrap">
<div class="image">
<?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
</div>
<div class="copy">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div>
</div>
You're obviously going to have to look up how get_the_image works, but I think with all this you should be laughing!