Support » Allmänna frågor » Image header, responsiv twentyseventeen

  • Hej!

    • webbutveckling på min egen dator MAMP
    • Använder mig av child-theme till twentyseventeen

    Beskrivning av mitt problem:
    Jag försöker ladda upp en image header i wordpress som jag vill ska bli responsiv(fungera i mobil, ipad, dataläge). Men även fast jag fixar till min image header och klipper till den så att det är 2000px i bredd x 1200px i höjd som är för just twentyseventeen temat. Så visas det inte som det ska.
    Det jag vill är att visa hela bilden i mobilläget, inte bara en inzoomad bild.(tre hundar är på bilden, den i mitten syns).

    Jag vet inte vad mer jag kan göra och behöver hjälp.

    Vad jag har gjort hittills(massor mer men skriver några):
    • Jag har letat massor på google för en lösning och försökt att hitta rätt klass för vart jag ska nå ”image header” och vad jag vet är det:

    .twentyseventeen-front-page.has-header-image .custom-header-media{
         height: 400px !important; // skriv in önskad höjd
      
        
    } 

    Detta var en av sakerna jag hitta som i alla fall rörde min kod så det hände något men jag har fortfarande samma problem och har hört att !important inte är så bra att använda om man inte verkligen måste.

    • Jag försökte att ändra om bilden i photoshop för att göra den mindre och ha vitt runtom så att den skulle möjligtvis se bättre ut, utan resultat.

    • Jag läste på en länk jag hittat på google att twentyseventeen hade svårt med fokuserade image header bilder och själva temat funkade bättre responsivt om det var en dekorerad image header istället? Dock vill jag ha en image header som är på just mina tre hundar, så hur ska jag gå tillväga?

    • På en annan länk på google var det om en funktion som hette wp_is_mobile():

    if(wp_is_mobile()){
      //show image
    }
    else{
     // show video
    }

    och styla med:

    .wp-custom-header iframe,
    .wp-custom-header img,
    .wp-custom-header video {
        display: block;
        height: auto;
        width: 100%;
            height: 400px;
    }

    men jag vet inte om jag är på rätt spår eller om jag tänker för djupt nu?

    • Har också försökte när jag trycker på Appearance -> header -> Add new image
    att ta crop på själva ”image header” som jag laddat upp men de funkar fortfarande inte att visas som jag vill.

    Många sökningar senare i google och fortfarande ingen lösning och behöver nu råd och hjälp.

    • Detta ämne redigerades för 3 år, 6 månader sedan av dragoness390.
Visar 1 svar - 1 till 15 (av 15 totalt)
  • Moderator tobifjellner (Tor-Bjorn Fjellner)

    (@tobifjellner)

    WordPress-hemmapulare, Projektledare, Författare, Översättare och Vänlig Själ

    Tyvärr. Sättet Twentyseventeen hanterar hero-bilden gör det svårt att styra vad som faktiskt kommer att synas.
    Någon besöker webbplatsen med en telefon i upprätt läge och får en hög och smal bild. Nästa person har en högupplöst pekplatta i liggande läge.
    Om man vill att något säkert ska finnas med i bilden behöver man placera detta ganska mitt i bilden. Beroende på besökarens skärmstorlek (och formfaktor) kommer olika mycket att skalas av på sidorna och i över- och nederkant.

    Jag lyckades faktiskt göra en ”fuling” på ett ställe. Det visade sig att för smalare skärmar växlar temat in en bild med lägre upplösning. Och just i de fallen ville jag ha huvudmotivet placerat lite annorlunda i bilden. Jag använde ftp för att till webbplatsen tanka upp en annorlunda beskuren bild i just det formatet. WordPress tror fortfarande att det är exakt samma bild i olika upplösningar, och det kan ju elektronerna få tro… 🙂

    Moderator tobifjellner (Tor-Bjorn Fjellner)

    (@tobifjellner)

    WordPress-hemmapulare, Projektledare, Författare, Översättare och Vänlig Själ

    Förtydligande om bildstorlekarna:
    När man tankar upp en bild till WordPress så brukar WordPress nästan alltid skapa några varianter av samma bild i mindre upplösning. Dessa kommer att ha liknande filnamn som huvudbilden, men med tillägg av bildens mått i pixlar. Det var en av dessa bilder med särskilt angivet mått som jag ersatte med en annorlunda beskuren bild.

    Det där att hitta rätt med CSS-klasser kan vara lurigt.
    Jag vill passa på att skjuta in en kommentar här om raden
    .twentyseventeen-front-page.has-header-image .custom-header-media{
    När man skriver flera klasser efter varandra utan mellanslag mellan måste ALLA de uppräknade klasserna finnas på objektet för att regeln ska tillämpas. De första två klasserna .twentyseventeen-front-page och .has-header-image måste alltså båda ha lagts in för html-objektet för att regeln inte ska ignoreras.
    När en klass står efter ett mellanslag som ” .custom-header-media” anger detta att denna klass måste höra till ett objekt som är underordnat objekt med de klasser som angavs innan.

    Parametern !important säger att CSS-regeln SKA tillämpas om den stämmer in på ett objekt. Annars är standardbeteendet att CSS-regler som mer specifikt pekar ut målobjektet har förtur. (Allra specifikast är CSS-kod som ligger inline, d.v.s. direkt i html-koden.)

    Trådstartare dragoness390

    (@dragoness390)

    Tack för svar Tor-Björn

    * Kan du möjligtvis förklara lite mer hur du utförde ”fuling” lösningen med File Transfer Protocol för jag förstod inte riktigt hur du utförde den för att det skulle funka?
    * Var det någon kod du tog in i styling? Eller hur menar du?
    * Hur får man just File Transfer Protocol att funka i wordpress när man har sitt projekt lokalt i sin dator?

    Moderator tobifjellner (Tor-Bjorn Fjellner)

    (@tobifjellner)

    WordPress-hemmapulare, Projektledare, Författare, Översättare och Vänlig Själ

    1. Jag laddade upp bilden i full upplösning för användning som Hero-bild.
    2. WordPress skapade automatiskt några versioner av samma bild i mindre storlek.
    3. Jag märkte att när skärmen är smalare (inom ”mobil” bredd) lade temat in en av varianterna i mindre storlek. Då skapade jag en alternativt skuren bild i just samma, mindre storlek, och via ftp ersatte jag den av WordPress genererade bilden med min alternativa (och gav alltså filen exakta samma namn som WordPress hade genererat).
    4. För att kolla behövde jag tvinga min webbläsare att ladda om hela sidan, eftersom den annars trodde att jag redan hade bilden (eftersom filnamnet inte ändrats…)

    För detta behövde jag inte ändra någon CSS.

    FTP är ett protokoll för att via internet hantera filer som befinner sig på en dator någon annanstans. Om du jobbar lokalt i din egen dator är det mycket enklare, eftersom du direkt kommer åt filerna direkt med din egen filhanterare. Om du t.ex. fill ändra något i wp-config.php kan du direkt öppna filen i Notepad++ i stället för att först behöva tanka hem filen via FTP (och utan att du behöver tanka upp resultatet till webbservern).
    Du behöver bara ha koll på var webbservern förvarar sina filer.
    XAMPP kanske lägger filerna under C:\xampp\htdocs
    Local by Flywheel kanske lägger dem under C:\Users\windows-user-id\Local Sites\webbplatsnamn\app\public
    o.s.v.

    Trådstartare dragoness390

    (@dragoness390)

    1. Hero bild? Menar du header bild? Huvudbild?
    3.
    * Hur skapar jag alternativt en skuren bild i wordpress?
    * Eller gjorde du det vid sidan om i tex photoshop?
    * Ska jag ändra i wp-config.php med notepad och ändra sökvägen, för att ladda upp bilden jag vill använda? Jag tittade i config.php men hittade ingenting med bilduppladning enbart angående databas.
    * Blir sökvägen då såhär: Den här datorn/C:/windows/MAMP/htdocs/wordpress/wp-content/uploads ?

    * Kan du inte skicka bildligt hur jag ska gå tillväga istället jag har lättare att förstå att jag går rätt då?

    Moderator tobifjellner (Tor-Bjorn Fjellner)

    (@tobifjellner)

    WordPress-hemmapulare, Projektledare, Författare, Översättare och Vänlig Själ

    Hero är en stor bild som täcker större delen av skärmen… modern webbslang. Men ja, jag menade sidhuvudsbilden.

    Sidan jag behövde fixade jag till vid sidan om. Jag använder det fria programmet Gimp för bildbearbetning, det beter sig lite annorlunda men har ungefär samma funktioner som Photoshop.

    wp-config.php har inget med detta att göra. Den filen ställer in några globala saker för WordPress, och det allra viktigaste den gör är att tala om för WordPress hur man får kontakt med databasen.

    När du laddar upp din sidhuvudsbild via WordPress läggs den där WordPress placerar uppladdade filer. Exakt var det är kan variera en del, beroende på olika inställningar, men standardinställningen är att den hamnar någonstans under /wp-content/uploads, ofta i separata mappar för olika år och månader.

    När huvudbilden väl var uppladdad gjorde jag webbläsarens fönster smalare och kollade exakt vilken URL den smalare bilden hade fått. Sedan snickrade jag till en alternativ bild med exakt samma storlek som jag gav samma namn och laddade upp via ftp direkt till samma mapp och ersatte den ursprungliga bilden av samma storlek.

    Hoppas det klarnar nu.

    Trådstartare dragoness390

    (@dragoness390)

    Tack åter igen för svar Tor-Björn

    Ledsen för sent svar, jag hade en deadline igår som jag var tvungen att fixa med först.

    * Menar du att du gjorde en ny bild med exakt samma mått
    * Någon ändring på bilden(snickra).
    * Sedan kopierade du den nya bilden(ctrl C)
    * Gick in till wordpress /wp-content/uploads
    * Klistrade in och ersatte den bilden som var i den mappen?

    För just det testade jag och ingenting verkar hända

    Testade följande:
    * Ändrade bilden på 300X180(gav samma namn)
    * Ändrade bilden på 768X461(gav samma namn)

    Ingen skillnad i mobil och ipad läget

    Det verkar som den bara utgår från 2000 X 1200 bilden och bara zoomar in mot mitten på dom resterande lägerna

    • Det här svaret redigerades för 3 år, 6 månader sedan av dragoness390.
    Trådstartare dragoness390

    (@dragoness390)

    Uppdatering:

    * Jag laddade upp bilden igen och ”croppade” den annorlunda
    * Sedan började jag göra det som du sa igen
    * Ingen skillnad
    * Sedan la jag det åt sidan och började istället koda lite
    * Höll på med att fixa custom fields font-size
    * Märkte att bilden upptill hade ändrats så som jag ville ha det på två av lägerna(mobil samt ipad)
    * Men på desktop så blev bilden smalare och inte lika hög

    • Det här svaret redigerades för 3 år, 6 månader sedan av dragoness390.
    Trådstartare dragoness390

    (@dragoness390)

    Uppdatering:
    * Försökte fixa desktop bilden med att göra den lite större i höjd inom 1024X614
    * Trodde det skulle fixa problemet
    * Det ändrades med bilden blev glad men dom andra lägerna återgick till det gamla
    * Försökte då backa så att jag åtminstånde hade 2 av 3 rätt
    * Även fast jag sparade alla filer då det funkade med mobil samt ipad läget och ersatte dom bilderna som jag ändrade på som skapade att det blev fel så samla fel igen kommer att vänta och se ifall att det tar lite tid att ”uppdatera” och hoppas att det återgår.

    Så problemet kvarstår (frustrerande).

    Trådstartare dragoness390

    (@dragoness390)

    Uppdatering:
    * Tittade nu runt och upptäckte att på min front-page så har mobil samt ipad fel(inzoomat) men desktop är rätt.
    * Kollade sedan på en annan php sida Troyfakta.php där var mobil samt ipad rätt men desktop fel.

    Moderator tobifjellner (Tor-Bjorn Fjellner)

    (@tobifjellner)

    WordPress-hemmapulare, Projektledare, Författare, Översättare och Vänlig Själ

    Oj. Rörigt värre. Jag är inte säker på att jag hängde med i alla svängar. 🙂
    En sak som kan spöka när du pysslar med detta är att eftersom filnamnet inte ändrats kan din webbläsare få för sig att den redan har bilden sparad lokalt…
    Man kan behöva tömma cache eller tvinga omladdning av hela sidan (ctrl-F5 i många webbläsare).

    Moderator tobifjellner (Tor-Bjorn Fjellner)

    (@tobifjellner)

    WordPress-hemmapulare, Projektledare, Författare, Översättare och Vänlig Själ

    I värsta fall kan du behöva rota djupare.
    Just nu (tror jag) att twentyseventeen huvudsakligen tittar på hur brett fönster webbplatsen visas i för att avgöra vilken bild som läggs in.

    Om man vill kan man med hjälp av s.k. media quieries i CSS begränsa vissa regler till att enbart gälla för vissa typer av skärmar.

    Googla på ”Media query CSS” så hittar du massor.

    Trådstartare dragoness390

    (@dragoness390)

    * Jag tömde inte cache men jag gjorde (ctrl-F5 i många webbläsare) precis efter och det funkade inte

    * Media query CSS använder jag redan i min kod för att göra den responsiv men problemet är att jag inte hittar rätt klass för just image header.

    * Sedan vad jag i såna fall ska skriva in under den klassen för att få det att funka enbart width och height eller något mer?

    Moderator tobifjellner (Tor-Bjorn Fjellner)

    (@tobifjellner)

    WordPress-hemmapulare, Projektledare, Författare, Översättare och Vänlig Själ

    Hej, nu har vi nått utkanten för vad jag kan bidra med. Vi får se om någon annan har några idéer. Och kommer du själv på något får du gärna fylla på i tråden för dem som kommer efter oss och fastnar med liknande saker.

    Media query låter dig t.ex. specificera att visst innehåll bara visas på skärm, så att en bakgrundsbild inte kommer med vid utskrift på skrivare, exempelvis.
    När det gäller att särskilja olika typer av skärmar går man i första hand på hur brett fönstret är. Höjden vet jag inte ens om man kan använda rakt av. Men orienteringen (portrait-landscape) finns tydligen.

    Trådstartare dragoness390

    (@dragoness390)

    Ok då får det vara som det är, tack Tor-Björn för försök till hjälp i alla fall. Jo jag använder mig av Media query men jag fick inte till det med image header ändå var därför jag skrev till dig. Jag kommer inte leta mer efter svar för kommer att ta ett annat projekt nu men om någon annan har någon idé som kan hjälpa någon annan eller vem vet annat wordpress projekt skriv gärna.

Visar 1 svar - 1 till 15 (av 15 totalt)
  • Ämnet ”Image header, responsiv twentyseventeen” är stängt för nya svar.