19 Mar 2015

Less i extend

Mamy podstawowy styl dla button powiedzmy taki:

.button {
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  margin: 5px;
  box-shadow: 0 5px 0 black;
}

Chcemy zrobić następne buttony o kolorze blue i red, zamiast za każdym razem dodawać do każdego butona podstawowy styl można użyć &:extend
„extend” działa od wersji 1.4 lessa

Tworzymy style:

.button--red {
  &:extend(.button);   // pobranie podstawowych danych
  background: red;     // dodajemy kolor red, możemy dodać także i tak #c63c67 ale
                       // i w ten sposób czyli przez ustawienie zmiennych @red-default:    #ff0000;
}
<button class="button">button</button>
<button class="button--red">button</button>
19 Mar 2015

Wyświetlenie thumba postu

<?php if ( has_post_thumbnail() ) { ?>
  <div class="post-thumb">
  <?php
    $blog_url = get_bloginfo('url');
    $large_image_arr = wp_get_attachment_image_src(
 
    get_post_thumbnail_id( $post->ID ), 'large-thumb' );
 
    $large_image_url = $large_image_arr[0];
    $large_image_url = str_replace($blog_url, 'http://kody.wig.pl/zdjecia/', $large_image_url);
 
    echo '<img src="' . $large_image_url . '"
    width="'
.$large_image_arr[1].'"
    height="'
.$large_image_arr[2].'"
    title="'
. the_title_attribute( 'echo=0' ) . '"
    class="attachment-large-thumb wp-post-image" >'
;
   ?>
   </div>
<?php } ?>

Kod sprawdza czy istnieje thumb postu. Następnie pobierany jest array załączników dopisanych do postów. Na końcu wygenerowany jest kod html obrazka.