Login  |  Register
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome, Guest. Please login or register.
Did you miss your activation email?

October 24, 2020, 08:14:32 PM

Login with username, password and session length
Members
Stats
  • Total Posts: 191351
  • Total Topics: 20907
  • Online Today: 90
  • Online Ever: 1000
  • (October 07, 2020, 04:15:10 PM)
Users Online
Users: 0
Guests: 78
Total: 78

Author Topic: Examples / tips for improvement of articles + icons layout  (Read 759 times)

0 Members and 1 Guest are viewing this topic.

Offline @rjen

  • Support Team
  • *
  • Posts: 2602
    • FJR-club Nederland
Examples / tips for improvement of articles + icons layout
« on: September 06, 2020, 12:39:19 AM »
Testing for release 2.0.0 I came across the page layouts articles + icons and articles + icons2

These have been around a long time and tbf I do not like the layout and how it works on mobile devices: too much empty space .(see attachment)
I guess it is because the layouts are still from the time SMF (and TP) were not suited for responsive use.

I want to update the layouts so they are more up to date but I need some inspiration: what kind of layout would be desired ( for these layouts with article icons)

Examples of layouts from other sites with similar uses are welcome...
Running TP2.0.0 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 (latest Github)
Want to check what php version I am testing on? See: PHP Info

Offline lurkalot

  • Administrator
  • *
  • Posts: 7042
    • Camera Craniums
Re: Examples / tips for improvement of articles + icons layout
« Reply #1 on: September 06, 2020, 03:33:36 AM »
I agree it needs work, not sure the best way to handle this though.

I realise you're talking more about the layout side of things here, but the thing I find most frustrating and confusing is the way you apply the icon in the first place, especially custom icons.  I would prefer if it had an easy way to add a custom icon per article instead of the same generic icon on every one while showing on front page.

For layout, what about something along the lines of what Mick has done with  https://www.idesignsmf.com/  They are more header images than icons, but they do look good. 

A look at some of the Wordpress blogs out there is quite inspiring. https://wordpress.org/showcase/

Offline @rjen

  • Support Team
  • *
  • Posts: 2602
    • FJR-club Nederland
Re: Examples / tips for improvement of articles + icons layout
« Reply #2 on: September 06, 2020, 04:06:18 AM »
I’ll have a look at the layout first, then I can checkout the icons. AFAIK you can assign icons per article , I was looking at the forum topics now , where the default  image is needed if no attachment is present
Running TP2.0.0 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 (latest Github)
Want to check what php version I am testing on? See: PHP Info

Offline lurkalot

  • Administrator
  • *
  • Posts: 7042
    • Camera Craniums
Re: Examples / tips for improvement of articles + icons layout
« Reply #3 on: September 06, 2020, 04:17:51 AM »
I’ll have a look at the layout first, then I can checkout the icons. AFAIK you can assign icons per article , I was looking at the forum topics now , where the default  image is needed if no attachment is present

Yep, I wasn't suggesting you can't assign a icon per article, I was just pointing out it's a confusing process, especially for a new TP user, hence why I bolded the "easy way" in my post.   ;)

Offline @rjen

  • Support Team
  • *
  • Posts: 2602
    • FJR-club Nederland
Re: Examples / tips for improvement of articles + icons layout
« Reply #4 on: September 06, 2020, 06:23:58 AM »
For layout, what about something along the lines of what Mick has done with  https://www.idesignsmf.com/  They are more header images than icons, but they do look good. 

A look at some of the Wordpress blogs out there is quite inspiring. https://wordpress.org/showcase/

I like what Mick has done, and I can image setting it up in such a way, but we have some specifics to take into account:

1. In our forums we are dealing with many different admins, that may upload images of many different sizes: the layout should deal with those in a pretty consistent manner

2. The article layout may vary based on the chosen layout type: 1 column, 2 columns or even 3. It should look ok on all

3. The screen sizes vary: what looks nice on a small screen (with an image stretching across the width of the article) may look grotesque when the articles is full screen...
Running TP2.0.0 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 (latest Github)
Want to check what php version I am testing on? See: PHP Info

Offline @rjen

  • Support Team
  • *
  • Posts: 2602
    • FJR-club Nederland
Re: Examples / tips for improvement of articles + icons layout
« Reply #5 on: September 06, 2020, 06:47:46 AM »
Playing with some ideas...

just to get more feedback...
Running TP2.0.0 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 (latest Github)
Want to check what php version I am testing on? See: PHP Info

Offline lurkalot

  • Administrator
  • *
  • Posts: 7042
    • Camera Craniums
Re: Examples / tips for improvement of articles + icons layout
« Reply #6 on: September 06, 2020, 07:46:50 AM »
That's actually a vast improvement already @rjen, bringing the icon inside like that makes things more compact. 

Looking at your posts (on your live test site) with the attachment displaying as the icon, that looks nice too.  Only wish in some way it could pick up the first image embedded as an alternative, much like OG (Open Graph) does.  This would also make it usable when sharing those posts on Social Media,

I'm pretty sure that OG doesn't pick up the attachment, but does pick up the first image in the post as a thumbnail.  That basically means, if you share a post and also want a custom icon you have to have an attachment for your icon, and a embedded image for sharing the post so OG can add the thumbnail.

Offline @rjen

  • Support Team
  • *
  • Posts: 2602
    • FJR-club Nederland
Re: Examples / tips for improvement of articles + icons layout
« Reply #7 on: September 06, 2020, 08:06:18 AM »
I am not taking on the og image stuff now. I am thinking to maybe make the icon rectangular (landscape) instead of square... let’s see what it brings
Running TP2.0.0 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 (latest Github)
Want to check what php version I am testing on? See: PHP Info

Offline lurkalot

  • Administrator
  • *
  • Posts: 7042
    • Camera Craniums
Re: Examples / tips for improvement of articles + icons layout
« Reply #8 on: September 06, 2020, 09:07:54 AM »
I am not taking on the og image stuff now. I am thinking to maybe make the icon rectangular (landscape) instead of square... let’s see what it brings

Taking on the OG would be great, but not what I was saying. I meant Icon pulling from first image in post, rather than attachment.  That way you don't need two images to take advantage of OG when using mods such as Optimus as it would use the same image.

Offline @rjen

  • Support Team
  • *
  • Posts: 2602
    • FJR-club Nederland
Re: Examples / tips for improvement of articles + icons layout
« Reply #9 on: September 06, 2020, 12:49:06 PM »
For now I have settled for the attached... hopefully some more suggestions come along
Running TP2.0.0 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 (latest Github)
Want to check what php version I am testing on? See: PHP Info