Automatic slide when new post with specific tag or category is added #17 formatting

[fbosman]

Thank you for this great improvement!

I do have some remarks about the formatting. If the text of the post is larger then the available area on the slide, then we lose text on top and bottom, can you define overflow:hidden for this case? Can you set the height of the image to 100% so that the images are not cut off in case of large images?

regards,

Frans

[mennolui]

Hi Frans,

Text: I agree it does not look the best when text does not fit the screen. Did you find a solution that works well both for texts that do and don't fit? If so could you share a CSS snippet?

Image: Can you show me what is the problem? The featured image is cropped to a square, but that is intentional. If you want to send me input privately you can use this form: https://foyer.tv/send-info/

Thanks!

[fbosman]

Hi Menno, I'm not a css hero, but I made these adjustments and it looks rather ok now: -slide-field-date { display: none; }

.foyer-slide .foyer-slide-field.foyer.foyer-slide-field-title { font-size: 8rem; } .foyer-slide.foyer-slide-recent-posts .inner .foyer-slide-fields .foyer-slide-field-content { padding: 1.5rem 1rem; font-size: 3rem; } .foyer-slide.foyer-slide-recent-posts .inner figure img { width: auto; height: 100%; object-fit: unset; } .foyer-slide.foyer-slide-recent-posts .inner figure img { width: auto; height: 100%; -o-object-fit: unset; object-fit: unset; } .foyer-slide.foyer-slide-recent-posts .inner .foyer-slide-fields { display: block }

[mennolui]

Hey Frans,

This positions the title and content at the top of the slide. I like the idea of the title and content being positioned in the middle as this will make any slide look good (except the ones with too much text ;-) ). So for the time being I will keep this as the default.

Images being cut off: Still not sure what the problem is. Can you show me?

[fbosman]

Hi Menno,

As told, I’m not a css wizard… With these additions it runs ok now for our purpose: https://johannesdedoper.net/foyer/kerk/ https://johannesdedoper.net/foyer/kerk/ The image had 100% height and width. The images we use are often not good in size and did not fit well. By using 100% height and a auto width we always get the complete image on the screen.

Regards,

Frans

Op 21 nov. 2018, om 15:50 heeft Menno Luitjes notifications@github.com het volgende geschreven:

Hey Frans,

This positions the title and content at the top of the slide. I like the idea of the title and content being positioned in the middle as this will make any slide look good (except the ones with too much text ;-) ). So for the time being I will keep this as the default.

Images being cut off: Still not sure what the problem is. Can you show me?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mennolui/wp-foyer/issues/34#issuecomment-440689590, or mute the thread https://github.com/notifications/unsubscribe-auth/AULeyQ2gNXuuIvEncTkkYnwex9H96n-Kks5uxWgagaJpZM4Yn2vC.

[mennolui]

Thanks for the link, always cool to see how people use Foyer!

I see what you mean with images not being prefect size, they are smaller than 1080x1080 pixels. Foyer does not handle images that are too small very well. One trick, if you really can not find images large enough, is editing them in Photoshop for example and increase the size to at least 1080x1080 (or 1920x1080 for backgrounds). Then you don't need the CSS that stretches your images out of proportion.

Best, Menno

[fbosman]

Hi Menno,

Thanks for the suggestions, but… we publish the posts in a grid on the home-page and try to keep the images as small as possible to have a reasonable load time. If we use images that size the website will load slower. It’s a trade off…

But I do agree that some images are not good enough.. We’e now using DigitalSignage.com http://digitalsignage.com/ for our screens using a rss-feed of our site, but will switch over to foyer in time.

Regards,

Frans

Op 21 nov. 2018, om 16:14 heeft Menno Luitjes notifications@github.com het volgende geschreven:

Thanks for the link, always cool to see how people use Foyer!

I see what you mean with images not being prefect size, they are smaller than 1080x1080 pixels. Foyer does not handle images that are too small very well. One trick, if you really can not find images large enough, is editing them in Photoshop for example and increase the size to at least 1080x1080 (or 1920x1080 for backgrounds). Then you don't need the CSS that stretches your images out of proportion.

Best, Menno

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mennolui/wp-foyer/issues/34#issuecomment-440700243, or mute the thread https://github.com/notifications/unsubscribe-auth/AULeyQUvJ4tqSAXcRyfbxzX6SFQp40Goks5uxW3jgaJpZM4Yn2vC.