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, 09:16:02 PM

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

Author Topic: Examples / tips for improvement of articles + icons layout  (Read 765 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

Offline @rjen

  • Support Team
  • *
  • Posts: 2602
    • FJR-club Nederland
Re: Examples / tips for improvement of articles + icons layout
« Reply #10 on: September 06, 2020, 01:34:53 PM »
I created the commits for the changes, but they are now part of the PR that is awaiting review from tino.

As soon as that is done I will merge them in (I hope)
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 tino

  • Developer
  • *
  • Posts: 2090
Re: Examples / tips for improvement of articles + icons layout
« Reply #11 on: September 06, 2020, 02:34:44 PM »
I put a couple of comments on the pr yesterday. I think what you’ve done is the best way. I would prefer the get attachment to be it’s own function as we can call it elsewhere from other functions, but I can change that later.

Offline @rjen

  • Support Team
  • *
  • Posts: 2602
    • FJR-club Nederland
Re: Examples / tips for improvement of articles + icons layout
« Reply #12 on: September 06, 2020, 02:41:00 PM »
Where did you put those comments? I am not seeing them in github. But if it is ok with you I’ll merge the PR.

Need to do more changes on the layouts : articles and avatars seems funny too...
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 #13 on: September 08, 2020, 01:27:20 AM »
As for the article icons.

1. I noticed that the upload limit is hard-coded to 180Kb (even though the text says it is 500Kb).
2. When uploading an image it creates a thumbnail of 128 x 128 (a value we are not using anywhere)
3. The original image is stored in the folder too, but not used anywhere

I am thinking to
1. add a setting to the article settings to allow the admin to set it's own file size
2. add a setting for the icon thumbnail
3. See if we can delete the original images since all they do is take up space...
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 jernatety

  • Sr. Member
  • ****
  • Posts: 340
Re: Examples / tips for improvement of articles + icons layout
« Reply #14 on: September 11, 2020, 01:07:57 PM »
For now I have settled for the attached... hopefully some more suggestions come along

I like that you're reconciling the formatting. I always thought the icon was a little weird where it's placement is plus having the avatar. I made a slight modification to rjens 1st layout by rearranging the info, removing the avatar and moving the print page down.


Offline @rjen

  • Support Team
  • *
  • Posts: 2602
    • FJR-club Nederland
Re: Examples / tips for improvement of articles + icons layout
« Reply #15 on: September 11, 2020, 02:29:09 PM »
Yeah, I also find that showing both the image AND icon is a bit too much for the Articles + Icons layout. I think I will remove the avatar completely there.

The Print page function seems a bit out of place on the category page and frontpage. I think I will only show that on the single article pages...
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 #16 on: September 11, 2020, 03:25:42 PM »
Yeah, I also find that showing both the image AND icon is a bit too much for the Articles + Icons layout. I think I will remove the avatar completely there.


You can just turn them off in front page settings. "Show avatars in forum-topics"

Offline @rjen

  • Support Team
  • *
  • Posts: 2602
    • FJR-club Nederland
Re: Examples / tips for improvement of articles + icons layout
« Reply #17 on: September 11, 2020, 03:33:17 PM »
I know, but I think many admins may not remember that and may complain about it. So  I am considering to remove the from the articles + icons layouts only.

Or maybe we can put the author  and avatar in a more suitable place in those 2 layouts?
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 #18 on: September 11, 2020, 04:08:41 PM »

I like that you're reconciling the formatting. I always thought the icon was a little weird where it's placement is plus having the avatar. I made a slight modification to rjens 1st layout by rearranging the info, removing the avatar and moving the print page down.

Having problems putting the article info on separate lines: the code is setup in such a way that it affects all layouts. Need to think about that...

Just throwing some ideas in the mix...

What about something like this?
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 jernatety

  • Sr. Member
  • ****
  • Posts: 340
Re: Examples / tips for improvement of articles + icons layout
« Reply #19 on: September 12, 2020, 01:37:57 PM »
That looks really good.