Czy kiedykolwiek próbowałeś uzyskać dwa obrazy, aby siedzieć obok siebie w WordPress? Oszalałeś? Jeśli tak, nie jesteś sam. Wiele razy doprowadzało mnie to do szału.
Dobra wiadomość jest taka, że teraz może nie być tak wściekły, jak w przeszłości.
Zła wiadomość jest taka, że dobra wiadomość powyżej może nie mieć zastosowania w Twoim przypadku.
Nie martw się jednak, mamy więcej dobrych wiadomości – poniżej przedstawiamy alternatywne metody, jeśli najprostsze metody nie działają dla ciebie.
4 różne metody dla obrazów obok siebie
Mamy dla Ciebie cztery podstawowe metody.
Pierwsze i drugie metody poniżej, podczas gdy najłatwiejsze, nigdy nie działały w WordPress, a nawet teraz mogą nie działać dla niektórych.
Podamy Wam kilka alternatywnych metod.
Ponadto możesz uzyskać większą kontrolę dzięki tym alternatywnym metodom, a więc możesz nawet zdecydować się na te rozwiązania na początek.
1. Metoda Do Nothing
Oczywiście nie jest łatwiej niż nic nie robić, i to właśnie ta metoda pociąga za sobą.
Po prostu umieść swoje obrazy w edytorze obok siebie.
Jeśli ta metoda działa dla ciebie (może nie), obrazy pojawią się obok siebie, jak poniżej. Zauważ, że nie ma odstępu między obrazami.
Jak wspomniano powyżej, ta prosta metoda nigdy wcześniej nie działała. A przynajmniej nigdy nie było, kiedy próbowałem. I nigdy nie zadziałało dla nikogo, kogo znałem. Więc zgaduję, że nie powinno.
Ostatnio jednak zadziałało na mnie. Może coś się poprawiło. A może motywy, które wypróbowałem, były po prostu bardziej elastyczne. (Próbowałem go na kilku.)
Nie jestem pewien. I to nie ma znaczenia.
Jeśli to działa dla ciebie, to działa. Jeśli nie, nie martwiłbym się o to. Po prostu przejdź do innej metody.
2. Metoda Wbudowana
Nazwiemy to Metoda Wbudowana. Jest to tylko nieco bardziej skomplikowane niż pierwsza metoda, ale tak długo, jak rozmiar obrazów na to pozwala, powinien umieścić trochę miejsca między obrazami zamiast uruchamiać je razem. (Może za dużo miejsca. Zajmiemy się tym później.)
Mówiąc najprościej, możesz wyrównać obrazy za pomocą samego WordPressa, klikając przycisk lub wybierając opcję.
Można to osiągnąć na dwa sposoby.
a. przyciski w edytorze
Po zaimportowaniu obrazów do edytora wystarczy użyć przycisku wyrównaj w trybie edytora wizualnego. Użyj wyrównania do lewej dla pierwszego obrazu i wyrównania do prawej dla drugiego obrazu.
B. opcje w bibliotece multimediów
Zasadniczo to samo można zrobić za pomocą opcji w bibliotece multimediów. Po kliknięciu przycisku media w edytorze w celu zaimportowania zdjęć do posta, zanim je wstawisz, zauważysz kilka opcji u dołu po prawej stronie.
Wybierz lewy-wyrównaj dla pierwszego obrazu i prawy-wyrównaj dla drugiego obrazu.
Niezależnie od tego, czy wybierzesz pierwszą, czy drugą metodę powyżej, Twoje obrazy powinny wyglądać następująco.
Zauważysz, że jest sporo miejsca między dwoma obrazami. Ilość miejsca będzie zależeć od wielkości obrazów. Oczywiście im są mniejsze, tym więcej będzie między nimi przestrzeni. (Również, oczywiście, jeśli są zbyt duże, nie będą miały wystarczająco dużo miejsca, aby zmieścić się obok siebie.)
Po raz kolejny, nawet jeśli Twoje obrazy są wystarczająco małe, istnieje szansa, że coś po prostu nie zadziała dla Ciebie z tą metodą. Jeśli tak, nie przeklinaj go. Idź dalej.
3. Manualna metoda CSS
Jak sama nazwa wskazuje, ta metoda spowoduje ręczne wstawienie kodu CSS. Ta metoda daje również większą kontrolę pod względem ilości miejsca między obrazami.
W rzeczywistości istnieje wiele sposobów osiągnięcia tej metody, jak również. Omówimy dwie opcje.
A. In-Line CSS
Za pomocą tej metody umieszczasz styl CSS bezpośrednio w kodzie obrazu.
Przejdź do zakładki “tekst” w edytorze (sekcja kod HTML) i znajdź kod dla już wstawionych obrazów.
Bardziej niż prawdopodobne, będą dwie części dla każdego obrazu. Będziesz miał kod, który go łączy. Zacznie się tak:
I wtedy będziesz miał kod, który wciąga obraz. Zacznie się tak:
W drugiej części po img, umieść następujący kod CSS w
style = ” float: left; margin-right: 5px;”/
W sumie powinno to wyglądać tak:
Spowoduje to przesunięcie obrazu w lewo i daje 5px miejsca na prawo od obrazu. Możesz to zwiększyć, jeśli chcesz.
Zrób dokładnie to samo z drugim obrazem. Jeśli wypłyniesz ten w lewo, ustawisz go obok pierwszego. Ale ponieważ pierwszy ma margines 5px (lub więcej, jeśli go zmienisz), to nie będzie się z nim równać.
Produkt końcowy powinien wyglądać mniej więcej tak (ponownie, wszystko w zależności od wielkości zdjęć).
B. UŻYWANIE Div z CSS
Inną podobną opcją jest użycie CSS, ale zamiast umieszczać kod w samym kodzie obrazu, zawijasz każdy obraz za pomocą div, a potem stylizujesz div w arkuszu stylów.
Po pierwsze, stwórz unikalną nazwę “klasy” dla swojego div, może coś w stylu “side-by-side.”Następnie zawiń kod dla pierwszego obrazu w ten sposób:
Umieść następujący kod w arkuszu stylów.
.side-by-side { float: left; margin-right: 5px }
I to wszystko. Powinieneś uzyskać wynik jak w sekcji powyżej.
4. Użyj Kolumn
Ostatnią metodą jest użycie wtyczki Kolumnowej.
Wtyczka kolumnowa pozwoli Ci podzielić post na różne kolumny-na przykład dwie kolumny, które są każdą połową postu. Albo można podzielić go na dwie kolumny, gdzie jedna to jedna trzecia szerokości, a druga to dwie trzecie szerokości, itd.
Istnieje wiele wtyczek kolumnowych. Shortcodes Ultimate plugin jest jednym, na przykład.
Po zainstalowaniu wtyczki możesz na przykład rozłożyć dwie kolumny za pomocą shortcode. Każda kolumna zajmie połowę miejsca.
W poniższym przykładzie umieściłbyś każdy obraz tam, gdzie jest napisane ” … obraz tutaj ….”
[one_half] … image here … [/one_half] [one_half] … image here … [/one_half]
Na przykład, oto jeden obraz wewnątrz shortcodes.
Zrób drugi obraz w ten sam sposób.
I, oczywiście, wynik jest dwa obrazy side-by-side.
Pomieszane obrazy w edytorze
Jedną z rzeczy, o których należy pamiętać, jest to, że Twoje obrazy mogą wyglądać na pomieszane na różne sposoby w przypadku niektórych powyższych rozwiązań.
Nie ma na to żadnego rozwiązania. Tak długo, jak okazują się OK na frontendzie strony, to jest ważne.
Chciałbym jednak sprawdzić rzeczy w różnych przeglądarkach. Również, oczywiście, może chcesz zobaczyć, jak rzeczy wyglądają na urządzeniach mobilnych zbyt.
Wiele rzeczy, w tym motyw, może odegrać się na ostatecznym wyniku opublikowanej strony.
Miejmy jednak nadzieję, że przynajmniej jedno z powyższych rozwiązań zadziała dla Ciebie, a Szalone Dni po prostu próbowania, aby obrazy były obok siebie, dobiegną końca.
Tagi:
