Develop Reference

Best way to Programatically write HTML [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
What would be the best way to go about programatically writing many lines of HTML in the following format:
<div class="grid-item"> <img src="gifs/image-GLITCH.gif" alt="image-GLITCH"/> </div>
<div class="grid-item"> <img src="gifs/image.gif"
alt="image"/> </div>
<div class="grid-item"> <img src="gifs/image-GLITCH.gif"
alt="image-GLITCH"/> </div>
The end result is a grid of gifs where the center column contains a normal image, while the left and right columns contain "GLITCH" versions of the image.
Desired end result: many many rows of the following:
https://i.stack.imgur.com/nG08z.jpg
I've thought about using php like:
$images = glob("gifs/*.gif}");
foreach($images as $image) {
echo <div class="grid-item"> <img src=$image alt=""/> </div>
}
Please note that the above is not the exact php I would use, I don't know how to exclude search strings with glob (I believe you can't do that). But this question is meant to ask:
"What is the best way to programatically write html in order to create a grid of images like that contained in the attached image." [i.e this question is not about the actual code to write, but instead what method of writing code should be used: javascript? php?]

The best way to go about this would definitely be with PHP (or a different server-side language). And for that matter, you can completely take glob() out of the equation; you don't want to output based on how many images you have, you want to output a fixed number of images so that it results in the pattern you desire.
First, let's take a look at your raw HTML:
<div class="grid-item">
<img src="gifs/image-GLITCH.gif" alt="image-GLITCH" />
</div>
<div class="grid-item">
<img src="gifs/image.gif" alt="image" />
</div>
<div class="grid-item">
<img src="gifs/image-GLITCH.gif" alt="image-GLITCH" />
</div>
Every second row alternates. The only difference is the <img> src and alt.
Now let's say you have a total of 33 of these (start with a glitch and ending with a glitch), giving a 'nice' number. That's really easy to set up in a PHP loop, using modulo. All you need to do is check whether the variable in your loop divided by your desired 'glitch insertion' offset (every second image in my example) has a remainder or not:
<?php
$image_count = 33;
for ($i = 0; $i < $image_count; $i++) {
if ($i % 2 == 0) {
echo '<div class="grid-item"><img src="gifs/image-GLITCH.gif" alt="image-GLITCH"/></div>' . PHP_EOL;
} else {
echo '<div class="grid-item"><img src="gifs/image.gif" alt="image"/></div>' . PHP_EOL;
}
}
Now you have all of the images outputted correctly, just as with the HTML snippet above.
Also, don't forget your quotation marks around your string!
This can be seen working here:
<div class="grid-item"><img src="gifs/image-GLITCH.gif" alt="image-GLITCH"/></div>
<div class="grid-item"><img src="gifs/image.gif" alt="image"/></div>
<div class="grid-item"><img src="gifs/image-GLITCH.gif" alt="image-GLITCH"/></div>
...

Are you after a javascript solution for this?
(function($) {
var imageUrl = "gifs/image.gif";
var markup = glitichify(imageUrl);
$(markup).appendTo($elementToAppendThisTo);
function glitichify(imageUrl) {
var imageUrlParts = imageUrl.split(".");
var glitchImageUrl = imageUrlParts[0] + "-GLITCH" + imageUrlParts[1];
var imageUrls = [glitchImageUrl, imageUrl, glitchImageUrl];
var imageMarkup = imageUrls.map(function(imageUrl, index) {
return '<div class="grid-item"> <img src="' + imageUrl + '" alt="image"/> </div>';
});
return imageMarkup.join("");
}
})(jQuery);

If you dont use an UI framework like React or Vue and no html engine like pug to generate img tags out of a loop you could do it with js. At least the place where you get your images counts. If you want to include your images dynamically from your local folder you should write a server side script to get an array of your images and then you could pass it to js or use it with your server side lang like php.
var data = ['https://picsum.photos/300?random', 'https://picsum.photos/300?random', 'https://picsum.photos/300?random'],
section = document.querySelector('section');
for (var i = 0; i < data.length; i++) {
var img = document.createElement('img');
img.src = data[i];
section.appendChild(img);
}
section {
border: 1px solid #000;
min-width: 50px;
min-height: 50px;
}
<section></section>

Multiple image hidding if one image is available

I have a page where needs to be displayed only one image, but the image can be from different sources.
I've put all the possible sources and onerror, if the image is not from that source it is hidden.
The problem is that sometimes the same image can be found in 2 or even 3 srcs so the onerror function is not runned and on the page the same image is displayed 2 or 3 times (the same image but different source)
What i need is a js script that hides the rest of the images if one of them is working, but there are a lot of possibilites like: img_01 to be shown with img_4 or img_2 with img_3 or img_01 with img_2 and img_3. I don't know how to cover all this possibilites so that is why i need your help.
I hope u understood my problem
Thanks! :)
<div class="col-md-12" style="padding: 0px; margin-bottom: 20px;">
<img id="img_01" src="im/wall/<?php
if(isset($_GET['i']) && strlen($_GET['i']) > 0){
echo $_GET['i'];
}?>.jpg"
onerror="this.style.display='none'"/>
<img id="img_2" src="im/ceiling/<?php
if(isset($_GET['i']) && strlen($_GET['i']) > 0){
echo $_GET['i'];
}?>.jpg"
onerror="this.style.display='none'"/>
<img id="img_3" src="im/floor/<?php
if(isset($_GET['i']) && strlen($_GET['i']) > 0){
echo $_GET['i'];
}?>.jpg"
onerror="this.style.display='none'"/>
<img id="img_4" src="im/collections/<?php
if(isset($_GET['i']) && strlen($_GET['i']) > 0){
echo $_GET['i'];
}?>.jpg"
onerror="this.style.display='none'"/>
</div>
i've used something like this and i even tried to put it in an if for all the images
$('#img_01').on('load', function(){
// hide/remove the loading image
$('#img_2, #img_3, #img_4').hide();

const my_imgs = document.getElementsByClassName('my_img');
const handler = function(e){
remove_handler();
e.target.classList.remove('hidden');
}
const remove_handler = function(){
for(let i=my_imgs.length; i--; ) {
my_imgs[i].removeEventListener('load', handler);
}
}
for(let i=my_imgs.length; i--;){
my_imgs[i].addEventListener('load', handler);
}
.my_img {
width:200px;
}
.hidden {
display:none;
}
<div class="container">
<img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/TWTNM0XMX9.jpg">
<img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/L6QLZEGPXB.jpg">
<img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/FH3TLO40EI.jpg">
</div>

subimage shows when mainimage is clicked

i want to make a toggle image like when i clicked the image the sub image will show up something like that... this is the image that has a toggle function..
<?php
include('../includes/inc.php');
$user_id =json_decode($user->user_id);
$albumname='';
$album = $carousel->get_album($user_id);
foreach ($album as $key => $myalbum) {
$albumname = $myalbum['album_name'];
?>
<div class="portfolio-image">
<div class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;">
<img src="../assets/img/gallery/event-image3.jpg" style="display: block;margin: 0 auto; height:150px;width:200px;" data-id="<?php echo $myalbum['album_name']?>">
<p style="text-align: center;"><strong><?php echo $myalbum['album_name'];?></strong></p>
</div>
<p></p>
</div>
<?php
}
?>
this is where my function goes..
<script type="text/javascript">
$(document).on('click', 'img[data-id]', function () {
var selected = $(this).attr('data-id');
$ss = $('[data-id="' + selected +'"]').next('.picforalbum').toggle();
});
</script>
this is where the sub image will show up. once that i clicked the image..
<div class="col-md-12 picforalbum">
<?php
include('../includes/inc.php');
$user_id =json_decode($user->user_id);
$album = $carousel->get_photoINalbum($albumname,$user_id);
foreach ($album as $key => $pic) {
?>
<div class="portfolio-image">
<div class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;">
<img src="<?php echo $pic['photo'];?>" style="display: block;margin: 0 auto; height:150px;width:200px;" >
</div>
<p></p>
</div>
<?php
}
?>
</div>
but the problem is when i tried to click the toggle image nothing happens...

Assuming that you want a toggle function for your image, I went ahead and built a simple JSfiddle. (As the picture takes a bit of time to load based on your net connection, please wait for a few seconds after clicking the image.)
What you need to do is basically call a function through onclick() on your image which changes the src attribute of your img tag. Thus if you maintain a boolean variable, you can easily alternate between true and false to change your image. So for true you'd have link1 and for false you'd have link2.
EDIT : Since you said that the image should act as a toggle for "sub" images, I have edited the code wherein an image acts as a toggle for another image beside it. Check out the updated fiddle and code snippet below.
Here is a simple example.
var toggle = false;
function toggle_img() {
if (toggle) {
document.getElementById("toggle_image").style.opacity = 0;
toggle = false;
} else {
document.getElementById("toggle_image").style.opacity = 1;
toggle = true;
}
}
<img id="toggle" src="https://s19.postimg.org/an381cz4j/470766057_3f1e9a3933_b.jpg" alt="jungle" width="75vw" height="50vw" onclick="toggle_img()" />
<img id="toggle_image" src="https://s19.postimg.org/klo6nu8k3/sumatrantiger-002.jpg" alt="tiger" width="75vw" height="50vw" onclick="toggle_img()" style="opacity:0"/>

How do I move a php call to another div and have it still work

I've looked around a bit, and found issues similar to mine, but not quite the same. I have a page template that is laid out in 4 columns in HTML. Inside column 4, I have a php function echoing a gallery of images.
<div id="homepage-layout">
<div id="homepage-column-1">
<div class="homepage-small"><?php echo get_homepage_img_small_1(); ?></div>
<div class="homepage-small"><?php echo get_homepage_img_small_2(); ?></div>
<div class="homepage-small"><?php echo get_homepage_img_small_3(); ?></div>
</div><!-- End Column 1 -->
<div id="homepage-column-2">
<div class="homepage-large-left"><?php putRevSlider("homepage"); ?></div>
</div><!-- End Column 2 -->
<div id="homepage-column-3">
<div class="homepage-med"><?php echo get_homepage_img_med_1(); ?></div>
<div class="homepage-med"><?php echo get_homepage_img_med_2(); ?></div>
</div>
<div id="homepage-column-4">
<div class="homepage-large-right"><?php putRevSlider("home_small"); ?></div>
</div><!-- End Column 4 -->
</div>
I'm using jQuery to change the layout of the site based on the width of the window.
var column3 = $("#homepage-column-3").contents();
var column4 = $("#homepage-column-4").contents();
var swapped = false;
$(window).on('resize', function() {
if( $(window).width() <= 700 && !swapped){
$("#homepage-column-3").html(column4);
$("#homepage-column-4").html(column3);
swapped = true;
} else if( $(window).width() > 700) {
$("#homepage-column-3").html(column3);
$("#homepage-column-4").html(column4);
swapped = false;
}
});
However, when the window size triggers the jQuery, the RevSlider from Column 4 freezes on the image it was displaying at the time, and the only way to get it running again is to refresh the page.
Any thoughts? Or, if this question has been answered already, please point me in the right direction.
Thanks!

jeroen had the right idea. I was able to take the 4 columns, and split them into 2 chunks. I was then able to make them both flex containers, and with a of media query, was able to make the columns swap places while keeping the RevSlider initialized.
Thanks to all for your help!

Javascript multiple slideshow

I have created an HTML file which uses java script to display images randomly displayed in 3 div tags. On click the images move left or right. It works fine until I use single slideshow in the page, but creates problem when I try multiple slideshows on the same page.
Here is the code for one slide show :
**<script>
currentIndx = 2;
MyImages=new Array();
MyImages[0]='1images2.jpeg';
MyImages[1]='1images3.jpeg';
MyImages[2]='1images4.jpeg';
MyImages[3]='artwork.jpg';
MyImages[4]='1images5.jpeg';
imagesPreloaded = new Array(4)
for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloaded[i] = new Image(120,120)
imagesPreloaded[i].src=MyImages[i]
}
/* we create the functions to go forward and go back */
function Nexter()
{
if (currentIndx<MyImages.length-1){
alert(currentIndx);
document.leftimg.src=document.middleimg.src
document.middleimg.src=document.rightimg.src
document.rightimg.src=imagesPreloaded[++currentIndx].src
}
else {
alert("In nexter else")
currentIndx=0
document.leftimg.src = document.middleimg.src
document.middleimg.src = document.rightimg.src
document.rightimg.src = imagesPreloaded[currentIndx].src
}
writeImageNumber();
}
function Backer()
{
if (currentIndx>0)
{
--currentIndx;
alert("In Backer If");
document.rightimg.src=document.middleimg.src
document.middleimg.src=document.leftimg.src
document.leftimg.src=imagesPreloaded[currentIndx].src
}
else
{
currentIndx = MyImages.length-1
alert(MyImages.length +"else");
document.rightimg.src = document.middleimg.src
document.middleimg.src = document.leftimg.src
document.leftimg.src = imagesPreloaded[currentIndx].src
}
writeImageNumber();
}
/*###### function to reload the images and text when refresh is pressed ##### */
function setCurrentIndex()
{
currentIndx=0;
document.theImage.src=MyImages[0];
document.form1.text1.value=Messages[0];
writeImageNumber();
}
</script>
<body onload="setCurrentIndex();automaticly()">
<!-- start of form for image slide show ####################### -->
<div id ="left" style="float:left">
<a href="#" onclick="Backer()" ><img src="1images2.jpeg" width="265" height="262"
border="0" name="leftimg"></a>
</div>
<div id ="middle" style="float:left">
<a href="#" onclick=""><img src="1images3.jpeg" width="265" height="262"
border="0" name="middleimg"></a>
</div>
<div id ="right" class="compimg" style="float:left">
<a href="#" onclick="Nexter()" ><img src="1images4.jpeg"
width="265" height="262" alt="" border="0"name="rightimg"></a>
</div>
<!-- end of form for image slide show ####################### -->**
Any suggestions...

You haven't wrapped your script in any javascript class(object) so all variables you are using have global scope(page level). I guess your variables are over written if you try to use it multiple time.
You can get better answer if you post HTML markup of how you are trying to create multiple slideshow in single page...