反復的なhtml phpを置換する画像とテキストの変更のみ

Question

私のポートフォリオのWebサイトは長年にわたって機能していますが、繰り返しのHTMLを多く最適化しようとしています。それは巨大なリスト（lazyloadで150画像まで）になっている。私はPHPを使用すべきだと思っていますが、私の知識は最小限で、どこから始めるべきかはわかりません（たくさん検索しました）。 私はAtomを使用しています。

これは今あるものへのリンクです：http://www.daynacasey.com/

私はCSSでホバーテキスト+サムネイルを持っている多くのセクションがあります。 私が最適化したいこと： - "imagetotal" divを生成する方法はありますか？変更されるのは画像タイトルのみです。もしそうなら、どのように各画像を呼び出すのですか？ - サムネイルとホバーイメージを同じものとして繰り返しますが、同じイメージを呼び出す方法はありますか？私はむしろ、より小さなサムネイルを持っているよりもホバリングをプリロードしたいと思う。 - alttextを生成する方法はありますか？セクション内には同様のテキストがあります。

<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;} 

どうもありがとうございました。

Answer 1

HTML5には<template>要素が付属しています。小さな例では、ネイティブの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> 

HTML5要素の詳細については、https://developer.mozilla.org/de/docs/Web/HTML/Element/templateをご覧ください。テンプレート要素はall modern browsersによって広くサポートされています。 Internet Explorer 11には、適切なポリフィルがあるため、テンプレートタグをこの古いブラウザに使用できます。