Moduł reklam - responsywne reklamy

[okmiwww]

Witajcie,
chciałbym skorzystać z wbudowanego w joomlę komponentu reklam.
Wstawiłem reklamę i wchodząc przez telefon na stronę reklama jest takiej wielkości jak na komputerze.

W wersji DEMO czyli w zakupionym szablonie reklama zmniejszała się do ekranu na którym jest wyświetlana.
Teraz się tak nie dzieje mimo, że przywracam domyślą grafikę i ustawienia.

Co robię źle? Jakieś pomysły?

Z góry dziękuję za poświęcony czas.

PS
Korzystam z najnowszej wersji joomla.

[moje]

Jeśli reklama jest wczytywana z zewnętrznego źródła to może mieć stałe wymiary. Jeśli do tego jest jeszcze wyświetlana w iframe'ie to jej wygląd tym bardziej się nie dostosuje do zmiany reklamy.

[okmiwww]

Witaj moje, dziękuję, że za Twój post.
Reklama jest na moim serwerze w dziale baners w plikach joomla.
Jak sprawdzić w jaki sposób jest wyświetlana?
Ja ją dodałem przed komponent REKLAMA, który jest oryginalnie dołączony do joomla.
Jeżeli masz chwilę to może zerknij GPŚ (http://www.glospowiatusredzkiego.pl)

Z góry dziękuję za podpowiedzi i wskazówki.

[moje]

Sprawdzić możesz inspektorem, jest to jedno z narzędzi dla developerów, jakie masz w przeglądarce.

W kodzie CSS brakuje zapisu dla tagu img, który by skalował obrazek.
Ja jednak zaleciłbym (oprócz dodania brakującego kodu CSS) dodanie do tego modułu klasy, która sprawi, że będzie on wyświetlany na komputerach ale nie na telefonach oraz utworzenie drugiego modułu w tej samej pozycji ale z klasą, która sprawi, że będzie on wyświetlany tylko na telefonach. W drugim module należy dodać grafikę, która będzie lepiej wyglądać i będzie bardziej czytelna na telefonach. Moja propozycja usunięcie logo z prawej lub przeniesienie numerów telefonów do drugiej linii pod adresami zamiast trzymać je w nawiasach.
9238

[okmiwww]

Jak uzyskałeś efekt przedstawiony na screenie?

Czy mógłbym mi jeszcze pomóc i nakierować mnie na odpowiednią lekturę odnośnie dodania znacznika img w css?
Z góry dziękuję.

Pomysł co do dwóch modułów wymaga więcej pracy, ale wydaje się być jedynym dobrym rozwiązaniem w takim przypadku.

Dziękuję za Twój post.

[moje]

W google jest wszystko na temat responsywności obrazków.

[siristru]

Wystarczy jeśli dla obrazków w bannerach zdeklarujesz:


img {max-width: 100%;}

http://prntscr.com/hhlx7r

Jeśli obrazek jest wyświetlany z iframe to musisz skalować cały iframe.

Jeśli idzie o pomysł z różnymi modułami dla desktop i mobile to jak najbardziej, z tym, ze jeśli nie potrafisz korzystać z przyrostków klas to wykorzystaj Advanced Moduel Manager - pozwala przypisać moduł do danego typu urządzenia.

[okmiwww]

Czyli tutaj nic nie zdziałam?
9244

Muszę odszukać odpowiedni plik CSS i w nim przy podpunkcie banner dołożyć przytoczony przedrostek, tak?
9245

[siristru]

Niestety nie widzę twoich załączników.
Użyj tej usługi by zrobić zrzut ekranu: https://snag.gy/

[moje]

@siristru zrzuty działają, wystarczy w nie kliknąć ;)

[okmiwww]

Proszę:
https://snag.gy/OsvFQc.jpg

https://snag.gy/EUlhBp.jpg

Moje pytanie brzmi jak odnaleźć plik w CSS w którym należy dopisać ten fragment: .banner-top img {max-width:100%}

[zwiastun]

Nie sądzę, że wystarczy zadeklarować szerokość 100% dla img.
1. Określć należałoby min-width i max-width i to w jednowstkach bezwzględnych
2. Jeśli posługiwac się procentami, to najpierw trzeba ustalić szerokość macierzystego kontenera (procenty działają w kontekście do szerokości obiektu zawierającego obiekt wymiarowanny w procentach).

[okmiwww]

@zwiastun
dziękuję za zainteresowanie tematem.

Czy te parametry nie są w przypadku mojego szablonu określone jeżeli dostosowuje się do różnych rozmiarów ekranów? Czy to nie ma w takim przypadku znaczenia?

[siristru]

@moje: Dla mnie nie działają: http://prntscr.com/hi6dqr

@okmiwww: a daj linka do twojej strony... i wszystko będzie jasne.

[siristru]

Sprawa jest bajecznie prosta. Dodaj:


.banneritem img {max-width: 100%;}

Dodaj ten kod do pliku:

ROOT/templates/headline/css/custom.css (jeśli nie masz tego pliku, to go utwórz, używasz szablonu opartego o T3 więc obsługuje ten plik).

Potem odśwież stronę z CTRL + F5 (chodzi o wyczyszczenie pamięci podręcznej przeglądarki.

[moje]

@zwiastun
Ad 1 i 2, wszystko zależy od szablonu i koncepcji jego twórcy. Najmniej inwazyjnym i najbardziej uniwersalnym działaniem będzie dodanie właśnie tej jednej linii kodu CSS.

@sristru, nie wiem czemu masz taki komunikat.

[siristru]

@sristru, nie wiem czemu masz taki komunikat.

Też nie wiem - może Zwiastun wie :)

[zwiastun]

1. nie mam, ja widzę załączniki.
2. Jaki dodac kod, można określić dla konkretnego przypadku. Podane przez @sistru rozwiazanie pewno zadziala, choć nieoczekiwany efekt może dać na dużych ekranach.
Oczywiście, że wszystko zależy od konkretnego szablonu. Jednakże zaproponowana reguła mówi: nadaj maksymalną szerokość = 100% szerokości nadrzędnego pojemnika. Jeśli szerokośc nadrzędnego pojemnika jest sensownie określona, wszytsko jest OK. Ale jeśli nie jest? Dlatego trzeba szukać rozwiązania dla konkretnego przypadku, a nie stosowac reguły oderwane od kontekstu.

[siristru]

@zwiastun: mylisz się. To oczym piszesz, "nadaj maksymalną szerokość = 100% szerokości nadrzędnego pojemnika" to jest width: 100% (tak wynika z twojego opisu).
W tym przypadku element będzie miał zawsze szerokość nadrzędnego pojemnika - jeśli będzie on większy niż element, ten zostanie powiększony.
max-width: 100% oznacza "niech twoja szerokość NIE będzie większa niż 100% nadrzędnego pojemnika".
W tym przypadku element będzie zachowywał swoją szerokość i może nawet nie wypełniać nadrzędnego pojemnika, ale gdy pojemnik się zmniejszy, element zeskaluje się tak by nie być od niego większy, może wypełnić pojemnik do 100% ale nigdy nie będzie większy.

W bootstrapie domyślnie img mają taką własność.

Ref: https://www.w3schools.com/cssref/pr_dim_max-width.asp

[zwiastun]

Może niejasno to napisałem, ale odnosiłem się, oczywiście, do reguły max-width=100%. Wszystko, co piszesz, to prawda, zwłąszcza w zdaniu "Niech twoja szerokość NIE będzie większa niż 100% nadrzędnego pojemnika". Pod jednym jedynym warunkiem, że szerokość nadrzędnego pojemnika jest określona (bezpośrednio lub odziedziczona). W przeciwnym przypadku owo 100% odnosi się do szerokości elementu (obrazka), bo nie ma jej do czego odnieść. Dlatego napisałem dość ostrożnie, że podane przez Ciebie rozwiązanie z pewnością zadziała, choć może przynieść nieoczekiwany efekt np. na dużych ekranach. Różnica między width a max-width jest tylko taka, że pierwsza właściwość wyznacza konkretną szerokość, druga maksymalną. Gdy użyjesz wartości procentowych albo jednostek em, musisz uwzględnić kontekst, do którego te procenty lub emy odnosisz.
W całości to niuans, ale niuans istotny: wartość procentowa odnosi się do konkretnego kontekstu (i nie ma tu znaczenia, czy to jest width, czy max-width), dlatego projektant nie może tego kontekstu pomijać.

[siristru]

Bene, conditio sine qua non :)

[okmiwww]

Sprawa jest bajecznie prosta. Dodaj:


.banneritem img {max-width: 100%;}


Utworzyłem i faktycznie działa! :)
Wielkie dzięki!

Mam jednak jeszcze dwa pytania:
1. Jak sprawić, żeby działo się tak samo z plikami flash? Banery się zmniejszają, ale flash pozostaje przy normalnej wielkości, czy też się tak da zrobić?
2. Jak zrobić, żeby w artykule wideo z google, również się dostosowywało do szerokości wyświetlacza? Np. jak w tym artykule: LINK (http://glospowiatusredzkiego.pl/index.php/artykuly/inwestycje/item/734-wykaszaja-trawy)

Z góry dziękuję za pomoc.

[siristru]

Tak, da się. W takich sytuacjach używam takiego kodu:


.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin: 0 0 20px 0;
}

.video-container iframe, .video-container video, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Obiekt, czy to jest wideo czy osadzony flasz, musi być objęty kontenerem z klasą video-container. Ale może być to dowolna inna klasa, wtedy dostosuj sobie css.

[okmiwww]

Dziękuję za podpowiedź, ale niestety będę potrzebował więcej wskazówek.

Gdzie ten kod mam wkleić? Do tego samego pliku co kod do zmniejszenia banerów?

Tak zrobiłem, wkleiłem do custom,css, ale niestety nic się nie zmieniło. Wideo nadal jest duże.

Filmy dodaję w zakładkach K2 przy edycji artykułu.
Wklejam kod, który generuje YouTube (tj. 560px szerokości). W przeglądarce na laptopie wygląda to dobrze, ale na telefonie - strasznie.

Moje pytanie:
1. Gdzie wkleić kod?
2. Jak zrobić, żeby materiały dodawane w taki sposób były objęte tym kontenerem?

Z góry dziękuję.

[siristru]

To jest kod CSS i powinieneś wstawić go do pliku CSS.
Ale to nie wszystko bo on stylizuje kontenery o konkretnych klasach. Więc musisz mieć te kontenery w kodzie strony.
Zawsze też możesz użyć innej klasy niż "video-container". Po prostu przeanalizuj kod w którym jest wstawiony film. Klasa kontenera która bezpośrednio obejmuje iframe lub embed powinna zastąpić "video-container".