Load an image that changes from a folder using CSS

Question

I am looking to be pointed in the right direction here. I want to be able to load an image from a folder regardless of filename using css. For example the CSS I think will look something like this

background: url(/wp-content/uploads/Folderwithimage) no-repeat;

So I want it to look at that folder and grab the only image in it and display it for the class I assign. The idea is rather than changing out the css code every time I have to change pictures I can just simply delete the old picture and place a new one in that folder. Ideas, concerns, and better ways to do this all welcome!

You would probably need to use a .htaccess file in that folder to force all traffic to the image. Beyond that, I can't help with the syntax to use in the htaccess. Alternatively, you could just always name the file the same as your replace it and reference the filename. — Andrew Coder, Oct 13 '15 at 21:57

Marcin Dusza · Answer 1 · 2015-10-13T22:21:41.027

0

I would rename this file to the same name every time. The way how to do it depends on how this file is getting there, but as I see you're using WordPress, so you can use filters. Maybe this one will help, or lead you in the right direction https://codex.wordpress.org/Plugin_API/Filter_Reference/wp_handle_upload_prefilter

As far as I know, such things are impossible by only using CSS.

edited Oct 13 '15 at 22:21

answered Oct 13 '15 at 22:16

Marcin Dusza

412
3
10

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

CSS should be used mainly for styling content; what you are describing can be achieved with JavaScript/JQuery for sure. this might help: How to load all the images from one of my folder into my web page, using Jquery/Javascript

edited May 23 '17 at 11:44

Community

1
1

answered Oct 13 '15 at 23:31

gio

1
1

You make a good point. I am less familiar with Jquery and I was hoping for a way to ask CSS to just look at a folder, though I was sure this was not really possible. Any idea if this could be done in PHP? – Tyler Radlick Oct 13 '15 at 23:33
On the flip side, I've never used PHP, however I know there are a lot of similarities between node.js (a backend form of javascript/jQuery) and PHP. sorry can't be specific! – gio Oct 17 '15 at 19:48

score 0 · Answer 3 · answered Oct 14 '15 at 00:08

If it only ever has 1 picture, you should be able to do it with just php without having to mess with apache. Put 1 image and the following index.php file in the folder. If you go to the url /wp-content/uploads/Folderwithimage, it will serve up index.php, which will then serve up whatever image is in the folder. Say the image is a jpg

index.php

<?php
$files=glob('*.jpg');
$img=array_pop($files);
if ($img)
{
    header("location: $img");
}

will serve up the first jpg it finds

This may do exactly what I need, let me try real quick, thank you! — Tyler Radlick, Oct 14 '15 at 01:03

score 0 · Accepted Answer · answered Oct 22 '15 at 17:09

So here is the solution I went with. I am going to create a custom Wordpress Plugin that allows the user to see the current image, and a button to replace the image will allow the user to choose a new image and upload it to wordpress. The plugin will force the file to be named the same as the previous file and the script will delete the old file. This is the best I have come up with. I will update the answer if this changes, and I will also post the final source code should someone else want it!

Load an image that changes from a folder using CSS

4 Answers4