Create an HTML/PHP page where non developers can change images later

Question

I want to create a HTML/PHP page filled with images. But these images should be able to be changed by non-developers later. So basically I will do something like in this fiddle. I want to know a way for non developers to change these images later. Code I have is as below

<div class="container-fluid">    
<div class="row my-row">                   
    <div class="col-xs-3 col-sm-3 col-md-3 my-col">
      <img src="http://placehold.it/300x400" class="img-responsive" alt=""/>
      <img src="http://placehold.it/300x400" class="img-responsive" alt=""/>
    </div>                       
    <div class="col-xs-6 col-sm-6 col-md-6 my-col">
      <img src="http://placehold.it/600x803" class="img-responsive" alt=""/>
    </div>   
    <div class="col-xs-3 col-sm-3 col-md-3 my-col">
      <img src="http://placehold.it/200x210" class="img-responsive" alt=""/>
      <img src="http://placehold.it/200x323" class="img-responsive" alt=""/>
    </div>              
</div>

CSS:

img {
  margin: 3px;  
  width: 100%;  
}

  .my-row {
    display: table;
    overflow: hidden;
  }

  .my-col {
    display: table;
    overflow: hidden;
  }

  .col-sm-6 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .col-sm-3 {
    padding-left: 0px !important;
    padding-right: 0px !important;

  }

I think your question is outside the scope of stack overflow. It's far too broad a topic. — Iwnnay, Mar 19 '16 at 01:26
@Iwnnay, try to explain like gibberish has answered or don't down vote. It's a web dev. question so how is not relevant to stackoverflow? — Yohan Blake, Mar 19 '16 at 05:54
I believe that this question fits into number 4 of the [guidelines](http://stackoverflow.com/help/on-topic). And if you look closely Gibberish wasn't able to answer your question only tell you about what your next step to figuring the answer out is. Telling you to go search for something is not an answer that someone should be limited to. I do give him kudos for attempting to answer it, though. — Iwnnay, Mar 19 '16 at 10:00

score 1 · Answer 1 · edited May 23 '17 at 12:23

There are several examples online of PHP-based image upload gallery tutorials.

Basically, what you want to do is:

(1) Initial page render: use PHP to loop through all images in folder and build HTML to plop them into an HTML structure.

(2) jQuery/js: When user clicks on ADD button, file upload system accepts file and moves it into desired folder on webserver. I recommend using Ravi Kusuma's excellent Hayageek jQuery File Upload plugin. It's straightforward, and it works. Note that you might wish to modify his upload.php (server side) to include automatic resize.

(3) AJAX: You might wish to use AJAX to allow the page to communicate with back-end PHP code without using a <form> (the chief advantage of which is to not refresh/reload the page). See this post

A few possible tutorials:

http://www.codingcage.com/2015/06/creating-image-gallery-from-folder-php.html

http://www.sitepoint.com/php-gallery-system-minutes/

Search YT for "PHP File Based Image Gallery"

Create an HTML/PHP page where non developers can change images later

1 Answers1