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

[Frans Bosman]

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

[Menno Luitjes]

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!

[Frans Bosman]

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
}

[Menno Luitjes]

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?

[Frans Bosman]

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 ***@***.***> 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 <#34 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AULeyQ2gNXuuIvEncTkkYnwex9H96n-Kks5uxWgagaJpZM4Yn2vC>.

[Menno Luitjes]

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

[Frans Bosman]

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 ***@***.***> 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 <#34 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AULeyQUvJ4tqSAXcRyfbxzX6SFQp40Goks5uxW3jgaJpZM4Yn2vC>.