Modifica dimensiunile imaginilor din gadgetul Postari populare

Modifica dimensiunile imaginilor din gadgetul Postari populare

 

 

Vi se par prea mici imaginile din gadgetul "Postari populare"? Sau poate prea mari? Ei bine, cu o mica modificare in codul sablonului puteti sa dati ce dimensiuni doriti imaginilor din gadget.

Iata ce trebuie sa faceti pentru a modifica dimensiunile:
1. Intrati la Design --> Elemente de pagina si adaugati obiectul gadget Postari populare. Lasati acest titlu petru gadget sau datii unul nou.
2. Intrati la Design --> Editati html si ca de fiecare data cand editam codul sablonului, faceti o copie de siguranta.
Important: Bifati casuta pentru extinderea codului sablonului.
3. Cu ajutorul combinatiei de taste Ctrl+F cautati dupa titlul obiectului gadget (Postari populare sau titlul dat de voi)




Veti gasi acest grup de coduri:

<b:widget id='PopularPosts1' locked='false' title='Postări populare' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

4. Daca ati ales doar titlul postarii si imagine (fara fragment de text) atunci va intereseaza aceasta parte:

            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>

Inlocuiti codurile scrise cu rosu, cu aceasta linie:

<img alt='' border='0' height='50px' expr:src='data:post.thumbnail' width='50px'/>

Numerele marcate cu rosu reprezinta dimensiunile imaginii. Modificati-le cum doriti.
Previzualizati si daca va plac noile dimensiuni, puteti salva sablonul.

5. Daca pe langa imagine ati ales sa afisati si fragment din text atunci acesta este codul care va intereseaza:


            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>

Inlocuiti codurile scrise cu rosu, cu aceasta linie:

<img alt='' border='0' height='50px' expr:src='data:post.thumbnail' width='50px'/>

Numerele marcate cu rosu reprezinta dimensiunile imaginii. Modificati-le cum doriti.

Previzualizati si daca va plac noile dimensiuni, puteti salva sablonul.

Note:
- Puteti inlocui in ambele locuri pentru a nu trebui sa mai modificati codurile daca treceti de la o setare la alta..
- Modificarea sablonului in designerul de sabloane nu reseteaza dimensiunile imaginilor.
- Modificari ale setarilor din obiectul gadget "Postari populare" nu reseteaza dimensiunile imaginilor.
- Daca eliminati obiectul gadget "Postari populare" si apoi il instalati din nou duce la resetarea dimensiunilor imaginilor. Va trebui sa urmati din nou pasii din acest tutorial.

Posted in: