Home › Forum › Problemi Vari con WP › Immagine in evidenza anche su mobile
-
AutorePost
-
-
28 Marzo 2021 alle 7:27 #126406AnonimoInattivo
Salve
(sito tm-online.it uso tema altervista René)È possibile visualizzare l’immagine in evidenza anche nell’articolo mobile?
Una volta aperto l’articolo, infatti, compare solo su desktop e non su mobile.
-
28 Marzo 2021 alle 10:20 #126409AnonimoInattivo
Penso che ci sia qualche ‘if’ nel codice che gestisca questa cosa, forse perchè hanno notato che il ridimensionamento non sempre è ottimale. Oppure perchè stai usando la versione free del tema. Magari basta aggiungere del codice o toglierlo.
Io nel mio caso ho superato questo problema inserendo:
if (has_post_thumbnail()) { $image = ''; $title_attribute = get_the_title($post->ID); $image .= '<figure class="post-featured-image">'; $image .= '<a href="' . get_permalink() . '" title="' . the_title_attribute('echo=0') . '">'; $image .= get_the_post_thumbnail($post->ID, 'featured-blog-large', array( 'title' => esc_attr($title_attribute), 'alt' => esc_attr($title_attribute), )) . '</a>'; $image .= '</figure>'; echo $image; }
Nel file content-single.php. Ovviamente ne ho fatto un bckp e poi una volta funzionante l’ho messo nel mio tema child.
Ciao
-
28 Marzo 2021 alle 10:55 #126410AnonimoInattivo
Grazie, ma non c’è un modo meno invasivo per farlo? Magari con un CSS aggiuntivo da incollare? Non sono così esperto…
-
28 Marzo 2021 alle 14:06 #126411AnonimoInattivo
@media screen and (min-width:720px) {
.author-bio,
.entry-content,
.page .hentry .entry-header,
.post-navigation,
.show-comments-area,
.single .entry-footer,
.single .entry-header {
padding-left:10px;
padding-right:10px
}Potresti provare a portare il min-width a 555px se si vede nel tuo smartphone. È solo una prova. Ma sul mio funziona. Bisogna testare e testare 🙂
Con CTRL+F dentro l’editor vai cercare nel tuo bel file css questo valore min-width:720px e lo cambi. Dopo averlo salvato fai un refresh e vedi dal browser in visualizzazione smartphone se ti fa apparire l’img di anteprima.
Ciao -
28 Marzo 2021 alle 14:44 #126412AnonimoInattivo
Cosa intendi per “editor”? Dove lo trovo? Mi puoi guidare?
-
28 Marzo 2021 alle 16:47 #126414AnonimoInattivo
Bacheca –> Aspetto –> Personalizza –> Css aggiuntivo
ci copi ed incolli dentro il codice qui sotto e poi clicchi su pubblica.
Se funziona lo vedi subito quando ridimensioni la finestra del browser.
Se non funziona lo cancelli o lo risalvi vuoto.
Ti ripeto sto facendo dei test anch’io. Sono un principiante e sto sperimentando ed imparando con te 😉/test * per schermi piccoli */
@media screen and (min-width:480px) {
.author-bio,
.entry-content,
.page .hentry .entry-header,
.post-navigation,
.show-comments-area,
.single .entry-footer,
.single .entry-header {
padding-left:10px;
padding-right:10px
} -
28 Marzo 2021 alle 16:56 #126415AnonimoInattivo
No, non va. Ma non voglio farti perdere del tempo.
-
28 Marzo 2021 alle 18:27 #126417AnonimoInattivo
Ciao
come vedi da questo screenshot https://photos.app.goo.gl/a3RsZ1yJqsFiDnCT7 cambiando il valore si vede anche in dispositivo più piccolo. Bisogna solo capire dove poter modificare quella dimensione.
https://tutorial.altervista.org/impostazioni-tema-mobile/ questo tutorial che parla dei tre nuovi temi di altervista lo hai letto?
http://forum.it.altervista.org/wordpress/290882-immagine-evidenza-su-mobile.html
Vedo che stai battendo anche lì…. ottimo 🙂
tienimi aggiornatoCiao
Ciao
-
28 Marzo 2021 alle 19:23 #126419AnonimoInattivo
Grazie. Anche tu se scopri qualcosa fatti vivo!
-
29 Marzo 2021 alle 17:49 #126420AnonimoInattivo
Eccomi!
Allora. Ho aperto un account su altervista.
Ho visto che i temi, nello specifico il tuo fanno parte di quelli sviluppati dal team di altervista.
Quindi sono di loro proprietà. Tu li puoi usare ma sono ad uso esclusivo degli utenti di altervista.
Premesso questo allora.
Bisogna andare a modificare i parametri qui:
Aspetto –> Css Personalizzato non dove te lo facevo modificare io.
Copi ed incolli questo codice qui:
@media screen and (min-width:320px) {
.author-bio,
.entry-content,
.page .hentry .entry-header,
.post-navigation,
.show-comments-area,
.single .entry-footer,
.single .entry-header {
padding-left:10px;
padding-right:10px
}
.page .hentry .entry-header,
.single .entry-header {
margin:0 0 1.5rem
}
.page .hentry .entry-meta,
.single .entry-meta {
margin:1rem 0 0
}
.page .hentry .img-cont img,
.single .img-cont img {
display:block
}
.page .hentry .img-cont,
.single .img-cont {
margin:0 auto 1.5rem
}
.post-navigation .nav-links {
flex-flow:row nowrap;
justify-content:space-between;
align-items:flex-start
}
.post-navigation .nav-next,
.post-navigation .nav-previous {
width:50%
}
.post-navigation .nav-previous {
padding-right:10px;
margin:0;
text-align:left
}
.post-navigation .nav-next {
padding-left:10px;
text-align:right
}
.author-bio {
flex-flow:row nowrap
}
.author-avatar {
width:auto;
margin:0 20px 0 0
}
.author-avatar img {
margin:0
}
.author-content {
flex:1
}
.author-title {
text-align:left
}
.comment-form>.comment-form-author,
.comment-form>.comment-form-email {
width:calc(50% – .5rem)
}
.comment-form .comment-form-email {
margin-left:1rem
}
.comment-form>:not(.comment-notes):not(.logged-in-as) {
margin:1rem 0
}
.comment {
padding-left:1.5rem
}
.comment .children,
.comment.depth-1 {
padding-left:0
}
.comment.depth-1 {
margin-left:70px
}
.comment .comment-author .avatar {
width:50px;
height:50px;
float:inherit;
margin-right:inherit;
position:absolute;
top:0;
right:calc(100% + 20px)
}
}
@media screen and (min-width:720px) {
.author-bio,
.entry-content,
.page .hentry .entry-header,
.post-navigation,
.show-comments-area,
.single .entry-footer,
.single .entry-header {
padding-left:0;
padding-right:0
}
.page .hentry .entry-header,
.single .entry-header {
padding-top:10px
}
.post-navigation .post-title {
font-size:1.3125rem
}
.show-comments-area {
padding-top:40px
}
.show-comments-area .show-comments {
display:none
}
.comments-area {
display:block
}
.comments-area .comment-reply-title,
.comments-area .comments-title {
margin:0 0 1.5rem
}
}
@media screen and (min-width:1024px) {
.entry-content {
font-size:18px;
line-height:32px
}
.author-avatar {
margin-right:30px
}
}
Ho solo impostato il valore in px minimo più basso: 320px anzichè 720px 720px anzichè 1024px e 1024px anzichè 1280px a tutti i media screen.Mi sembra che funzioni.
Ciao
-
-
AutorePost
- Devi essere connesso per rispondere a questo topic.