Dobra :)
Krok 1: Nadpisanie widoku dla kategorii artykułów
Skopiuj plik:
ROOT/components/com_content/views/category/tmpl/blog_item.php
Do:
ROOT/templates/twoj-szablon/html/com_content/category/blog_item.php
Krok 2: Dodajemy link i obrazek do filmu w artykule
Tworząc artykuł klikasz na zakładkę "Obrazki i łącza".
Dodajesz obrazek wprowadzenia oraz id filmu na YouTube: http://prntscr.com/lidxzl
Założenia:
1. Film pochodzi z YouTube ale podobna metoda może być użyta dla dowolnego usługodawcy
2. Masz zainstalowane FontAwesome: https://fontawesome.com/
Na razie wynik wygląda tak: http://prntscr.com/lie0h6
http://test.siristru.smarthost.pl/index.php?option=com_content&view=category&layout=blog&id=11&Itemid=123
- - - Updated - - -
Krok 3: Modyfikacja artykułu w widoku przeglądu kategorii
Edytujemy plik:
ROOT/templates/twoj-szablon/html/com_content/category/blog_item.php
W linii 16 jest:
$info = $params->get('info_block_position', 0);
Pod nią dodajemy:
$images = json_decode($this->item->images);$urls = json_decode($this->item->urls);
Pierwsza zmienna przechowuje nam obrazki dla artykułu, druga linki.
Szukaj linii:
<?php echo JLayoutHelper::render('joomla.content.intro_image' , $this->item); ?>
Teraz trochę tutaj namieszamy :) Musimy zastąpić domyślne wyświetlanie obrazka, wyświetlaniem z warunkową ikonką.
Ten kod będzie dobry:
<div class="intro-item-container"> <a class="maska-link" href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($thi s->item->slug, $this->item->catid, $this->item->language)); ?>"></a> <img src="<?php echo $images->image_intro; ?>" /> <?php if (isset($urls->urlc) && !empty($urls->urlc)) { ?> <i class="far fa-play-circle"></i> <?php } ?></div>
Jak widać mamy pojemnik z klasą intro-item-container który zawiera wszystko co potrzebne.
Link maska-link jest powłoką pokrywającą cały obrazek z linkiem do samego artykułu.
<img to oczywiście obrazek wprowadzenia.
Następnie jest warunek: jeśli dany jest link C oraz link C jest różny od pustego to załaduj co w klamerkach.
A w klamerce jest ikonka odtwarzania.
Do tego taki kod CSS:
.intro-item-container {position: relative;}
.intro-item-container .far {
position: absolute;
bottom: 10px;
right: 10px;
color: #fff;
font-size: 2rem;
}
.maska-link {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
CSS opisuje pojemnik, maskę oraz ikonkę.
Wynik: http://prntscr.com/lie88m
http://test.siristru.smarthost.pl/index.php?option=com_content&view=category&layout=blog&id=11&Itemid=123
- - - Updated - - -
Teraz pozostaje korzystając z ID filmu wywołać go w treści artykułu. Gdzie ma być? Na początku czy na końcu? (z oczywistych względów nie będzie w tekście..., chyba, że wstawisz go już ręcznie). To jak ma być?