CODEWITHSUNDEEP
phphtmlcss
D.Case
D.Case

Reputation: 1

Replace repetitive html php only images & text change

My portfolio website has been functioning fine for some years, but I'm looking to optimise a lot of repetitive HTML. It's becoming a huge list (up to 150 images on lazyload). I assume I should be using PHP but my knowledge is minimal and don't know where to start (have searched a lot). I'm using Atom.

This is the link to what it is now: http://www.daynacasey.com/

I have many sections in which I have text + thumbnails that hover with CSS. Things I would like to optimise: – Is there a way to generate the "imagetotal" divs? The only things that change are the image titles. If so, how to call each image? – I repeat the thumbnail and hover image as the same, is there a way to call 'same image'? I'd rather preload the hover than have a smaller thumbnail. – Are there ways to generate alttext? Within sections there is similar text.

    <section id="#one" class="project sections">
    <div class="text">
    Lorum ipsum
    </div>

    <div class="leftimages">

       <div class="imagetotal">
          <img src="placholder.jpg" data-original="/imgs/ONE/image.jpg" class="hover lazy" alt="alttext"/>
          <div class="enlarge enlargehover">
          <img data-original="/imgs/ONE/image.jpg" alt="alttext" >
          </div>
       </div>

       <div class="imagetotal">
          <img src="placholder.jpg" data-original="/imgs/ONE/image2.jpg" class="hover lazy" alt="alttext"/>
          <div class="enlarge enlargehover">
          <img data-original="/imgs/ONE/image2.jpg" alt="alttext" >
          </div>
       </div>

    </div>  
    </section>

CSS

    .leftimage img {max-height: 100%; width: auto; max-width: 100%; height: auto;}

    .enlargehover{
    position: fixed;
    top: 0px;
    left: 300px;
    display: none;
    margin:  1vw 3%;
    height: 98%;
    z-index: 8;
    } 

    .imagetotal a {display: block!important;}
    .imagetotal:hover .enlarge {display: block!important;}

Thanks a lot.

Upvotes: 0

Views: 69

Answers (1)

Marcel
Marcel

Reputation: 5119

HTML5 comes with the <template> element. A small example should explain the usage together with the help of native javascript.

<section id="one">

</section>
<template id="imagetotal">
    <div class="imagetotal">
        <img src="" data-original="" class="hover lazy" alt="">
        <div class="enlarge enlargehover">
            <img data-original="" alt="">
        </div>
    </div>
</template>
<script>
    // array with your image data
    var data = [
        {
            src : 'placeholder.jpg',
            data : '/imgs/ONE/image.jpg',
            alt : 'bla',
        }
    ];
    if ('content' in document.createElement('template')) {

        // get all needed dom elements
        var section = document.getElementById('one'),
            template = document.getElementById('imagetotal'),
            img = template.querySelector('div.imagetotal > img'),
            enlargeimg = template.querySelector('div.enlarge > img');

        data.forEach(function(element) {
            // set template data
            img.src = element.src;
            img.dataset.original = element.data;
            img.alt = element.alt;

            enlargeimg.dataset.original = element.data;
            enlargeimg.alt = element.alt;

            // clone the template content and append it to the dom
            let clone = document.importNode(template.content, true);
            section.appendChild(clone);
        });
    }
</script>

For detailed information about the HTML5 element have a look at https://developer.mozilla.org/de/docs/Web/HTML/Element/template. The template element is widely supported by all modern browsers. For Internet Explorer 11 there are good polyfills, so the template tag can be used for this old browser.

Upvotes: 1

Related Questions