Text "einkürzen" bei Kategoriebeschreibung ! Wie ?

[tuedell]

Das meine angepasste Version, aber wo soll ich das closetag einsetzen?

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="categorie_listing"}
<h1>{$CATEGORIES_NAME}</h1>
    {if $CATEGORIES_DESCRIPTION}
      <p id="short">{$CATEGORIES_DESCRIPTION|strip_tags|truncate:150:"...":true}<b class="catview"> mehr..</p>
      <p id="long" class="inv">{$CATEGORIES_DESCRIPTION}<b class="catview"> ..ausblenden</p>
    <script type="text/javascript">
    {literal}
    $(".catview").click(function () {
     if ($('#long').is('.inv')) {
      $('#short').addClass('inv');
      $('#long').removeClass('inv');
     }else{
      $('#long').addClass('inv');
      $('#short').removeClass('inv');
    }});
    {/literal}
    </script>
    {/if}

{if $module_content !=''} <strong>{#heading_more_categories#}</strong>
     <br />
      <table style="border-top: 2px solid; border-color: #d4d4d4;" width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> {foreach name=aussen item=module_data from=$module_content}
                {php}
          $col++;
                {/php}
          <td class="main"><table  width="100%" border="0" cellpadding="0" cellspacing="4">
                <tr>
                  <td align="center" >{if $module_data.CATEGORIES_IMAGE}<a href="{$module_data.CATEGORIES_LINK}"><img src="{$module_data.CATEGORIES_IMAGE}" alt="{$module_data.CATEGORIES_NAME}" /></a>{/if}</td>
                </tr>
                <tr>
                  <td align="center" ><strong><a href="{$module_data.CATEGORIES_LINK}">{$module_data.CATEGORIES_NAME}</a></strong></td>
                </tr>
                <tr>
                  <td align="center" >{$module_data.CATEGORIES_DESCRIPTION}</td>
                </tr>
              </table>
            </td>
          {php}
                  if ($col>=3) {
                  $col=0;
                  echo '</tr><tr>';
                   }
                  {/php}
                 {/foreach} </tr>
      </table>
       {/if} <br />
{$MODULE_new_products}

[cillex]

Die Vorschläge hier führen zum gewünschten Ergebnis. Wenn man das ganze noch etwas weiter spinnt, könnte man ja noch eine Abfrage einbauen, die die "mehr" und "ausblenden" Buttons nur anzeigt, wenn die Länge der Beschreibung einen bestimmten Wert übersteigt.

Weiß  jemand, wie der Code dafür aussehen würde? Es müsste ja irgendwas in der Form sein:

Code: PHP  [Auswählen]

{if $CATEGORIES_DESCRIPTION > 1000}

[mannoo]

Ich habe jetzt nach langem suchen eine Elegante Lösung für das Einkürzen der Beschreibung gefunden und dem entsprechend angepasst, eventuell kann es der eine oder andere ja brauchen.

Es geht bestimmt noch sauberer, aber für meinen Einsatz reicht es.

Man kann nun durch klicken auf dem Button die gesamt Beschreibung ein und ausblenden. Beim Laden ist die Beschreibung gekürzt.

Einfach in der categorie_listing.html und produkt_listing.html tauschen.

 

Code: PHP  [Auswählen]

<div id="bank">
{$CATEGORIES_DESCRIPTION}</div>
<div id="fancy">{$CATEGORIES_DESCRIPTION|truncate:150:"...":true}  </div><div><p id="btn" class="descpoinzer" style="vertical-align:middle;margin-top:20px"><span>MEHR</span></p></div><div id="btn-bk" class="descpoinzer" style="vertical-align:middle;margin-top:20px"><span> WENIGER</span></div>
<script type="text/javascript">
{literal}
 $('#btn').click(function(e){    
    $('#fancy, #btn').fadeOut('slow', function(){
        $('#bank, #btn-bk').fadeIn('slow');
    });
});

    $('#btn-bk').click(function(e){    
        $('#bank, #btn-bk').fadeOut('slow', function(){
            $('#fancy, #btn').fadeIn('slow');
        });
    });
{/literal}
</script>
 </div>{/if}

In die css einfügen.

Code: CSS  [Auswählen]

#bank {display:none; }
#btn-bk {display:none;} .descpoinzer{cursor:pointer; }


.descpoinzer {
  background-color: #7f8c8d;
    border: medium none;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    padding: 10px;
    text-align: center;
    transition: all 0.5s ease 0s;
    width: 150px;

}

.descpoinzer span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.descpoinzer span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
}

.descpoinzer:hover span {
  padding-right: 25px;
}

.descpoinzer:hover span:after {
  opacity: 1;
  right: 0;
}

Vieleicht hat jemand eine Idee wie man die Buttons ausblendet bei zu wenig Beschreibungslänge?

[Bonsai]

In Smarty Tags funktionieren php Funktionen! Einfach mit angehängter Tilde und Funktion. Für Funktionen mit nur einem Parameter sollte es so gehen:

Code: XML  [Auswählen]

{if $CATEGORIES_DESCRIPTION|strlen > 1000}
Das hier wird nur angezeigt, wenn $CATEGORIES_DESCRIPTION mehr als 1000 Zeichen hat.
{/if}
 

[noRiddle (revilonetz)]

Das | nix heißen Tilde sondern Pipe .

Gruß,
noRiddle

[mannoo]

Super vielen Bonsai!

[Bonsai]

Danke noriddle
~ = Tilde
| = Pipe

Bin zu lange nicht mehr an Linux gesessen