Examples / tips for improvement of articles + icons layout

[@rjen]

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...

[lurkalot]

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/

[@rjen]

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

[lurkalot]

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.   

[@rjen]

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...

[@rjen]

Playing with some ideas...

just to get more feedback...

[lurkalot]

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.

[@rjen]

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

[lurkalot]

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.

[@rjen]

For now I have settled for the attached... hopefully some more suggestions come along

[@rjen]

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)

[tino]

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.

[@rjen]

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...

[@rjen]

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...

[jernatety]

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.

[@rjen]

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...

[lurkalot]

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"

[@rjen]

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?

[@rjen]

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?

[jernatety]

That looks really good.