Hi guys.
'php' and 'responsive web design (meaning BOOTSTRAP)'. How do you make the 2 things work together??
...... by responsive web design ,, I mean 'Bootstrap'. Because that is what I use for making websites responsive.
Also, this is purely a PHP question,, as I already know how to use Bootstrap.
Just to explain things:
I work as a web designer and I have a client who wants me to create them a photo gallery which they can upload their own photos to.
Just to explain my skill level,,, I am able to create an image gallery which responds perfectly for different device sizes. And I also know how to upload files (such as images) to the server through the use of php (so my client can upload images himself, without me needing to do anything).
But I am having some problems trying to figure out how I would combine these 2 things, eg: to create a responsive image gallery which my client can upload images to by themself.
Here is an example of what I mean:
{Link deleted at OP's request}
...... If you check out the link above you will see that there is a photo gallery and at a full width computer screen there are 4 images going across the page and when the screen gets smaller in size there is only one image going across the page.
Obviously, this is because I typed this code myself (manually).
Below, is an extract of the code for the image gallery (from the link above):
<div class="col-lg-10 col-lg-offset-1 thingy" style="margin-bottom: 50px;">
<div class="col-lg-12 imgrow">
<div class="col-sm-3">
<a href="lightbox/img/large/ppl/bike13.JPG" data-lightbox="image-1" data-title="Explorer Moto Tours">
<img src="lightbox/img/large/ppl/bike13.JPG" alt="cross country motorcycle trip Lake District" class="img-responsive gallimg">
</a>
</div>
<div class="col-sm-3">
<a href="lightbox/img/large/ppl/bike14.JPG" data-lightbox="image-1" data-title="Explorer Moto Tours">
<img src="lightbox/img/large/ppl/bike14.JPG" alt="Motorbike Tours Scotland" class="img-responsive gallimg">
</a>
</div>
<div class="col-sm-3">
<a href="lightbox/img/large/ppl/bike15.JPG" data-lightbox="image-1" data-title="Explorer Moto Tours">
<img src="lightbox/img/large/ppl/bike15.JPG" alt="bike trip planner uk" class="img-responsive gallimg">
</a>
</div>
<div class="col-sm-3">
<a href="lightbox/img/large/ppl/bike16.JPG" data-lightbox="image-1" data-title="Explorer Moto Tours">
<img src="lightbox/img/large/ppl/bike16.JPG" alt="great motorcycle rides uk" class="img-responsive gallimg">
</a>
</div>
</div>
<div class="col-lg-12 imgrow">
<div class="col-sm-3">
<a href="lightbox/img/large/DSCN0456.JPG" data-lightbox="image-1" data-title="Explorer Moto Tours">
<img src="lightbox/img/large/DSCN0456.JPG" alt="Motorcycle Touring Scotland" class="img-responsive gallimg">
</a>
</div>
<div class="col-sm-3">
<a href="lightbox/img/large/DSCN0479.JPG" data-lightbox="image-1" data-title="Explorer Moto Tours">
<img src="lightbox/img/large/DSCN0479.JPG" alt="motorbike road trip Lake District" class="img-responsive gallimg">
</a>
</div>
<div class="col-sm-3">
<a href="lightbox/img/large/DSCN0480.JPG" data-lightbox="image-1" data-title="Explorer Moto Tours">
<img src="lightbox/img/large/DSCN0480.JPG" alt="great motorcycle rides" class="img-responsive gallimg">
</a>
</div>
<div class="col-sm-3">
<a href="lightbox/img/large/DSCN0485.JPG" data-lightbox="image-1" data-title="Explorer Moto Tours">
<img src="lightbox/img/large/DSCN0485.JPG" alt="great motorcycle rides uk" class="img-responsive gallimg">
</a>
</div>
</div>
</div>
..... I only pasted two rows of images from the script (as this is all you need in order for me to convey my problem). The rest of the gallery code is pretty much a repetition of the extract above. So it would be pretty cumbersome to paste the whole thing.
So now you have some example code (above) let me give you a hypothetical example of what I am having problems figuring out by myself:
Lets say the gallery is empty and I have set my client up an admin area where they can upload images by themselves.
So when they upload their first image the code above would just simply be:
<div class="col-lg-12 imgrow">
<div class="col-sm-3">
<a href="lightbox/img/large/ppl/bike13.JPG" data-lightbox="image-1" data-title="Explorer Moto Tours">
<img src="lightbox/img/large/ppl/bike13.JPG" alt="cross country motorcycle trip Lake District" class="img-responsive gallimg">
</a>
</div>
</div>
...... and when my client uploads his 2nd image, the above extract needs to be updated to:
<div class="col-lg-12 imgrow">
<div class="col-sm-3">
<a href="lightbox/img/large/ppl/bike13.JPG" data-lightbox="image-1" data-title="Explorer Moto Tours">
<img src="lightbox/img/large/ppl/bike13.JPG" alt="cross country motorcycle trip Lake District" class="img-responsive gallimg">
</a>
</div>
<div class="col-sm-3">
<a href="lightbox/img/large/ppl/bike14.JPG" data-lightbox="image-1" data-title="Explorer Moto Tours">
<img src="lightbox/img/large/ppl/bike14.JPG" alt="Motorbike Tours Scotland" class="img-responsive gallimg">
</a>
</div>
</div>
I am guessing the solution to my confusion/problem is to use file functions like fread() and fwrite()?
Can someone help me please?
Paul.