News:

Wondering if this will always be free?  See why free is better.

Main Menu

Images in Board Descriptions

Started by Senkusha, January 27, 2023, 06:51:12 AM

Previous topic - Next topic

Senkusha

I'm not sure what's happening here, but I decided to try adding some pizazz to my site by adding some img tags to my board descriptions.  They are all 150x200 sized png file, yet, all the images show up as different sizes.   See the attached screenshots.

You cannot view this attachment. 
You cannot view this attachment.
--Senkusha
The Anime Brigade
Anime-style Role Playing Games and Discussion.
(SMF v. 2.1.4, PHP v. 8.0)

DeadMan...

I do believe that's because of the table you made.
You need to set the table to a specific width, which should solve the issue.
As it is now, the boards with longer text is causing it to use the most table space.
I tell it how I see it... Don't like it? Hit Alt+F4!

Sir Osis of Liver

You can add width and/or height parameters to [img] tags.

  [img width=300]https://domain.com/pics/cat.jpg[/img]
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Senkusha

Okay, I'll try that. I was unaware I could use width tags with the table bbc.
--Senkusha
The Anime Brigade
Anime-style Role Playing Games and Discussion.
(SMF v. 2.1.4, PHP v. 8.0)

Senkusha

So I tried using [img width=150] and it didn't do anything.
Tried using and I got all my pictures to display as the correct size, but there was (picture)
(description text), so it broke my table.
[/td][/tr][/table]

You cannot view this attachment.
--Senkusha
The Anime Brigade
Anime-style Role Playing Games and Discussion.
(SMF v. 2.1.4, PHP v. 8.0)

Kindred

Why are you even putting the images into the description?
Use css to show them
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Diego Andrés

Try with just the image, no tables, no format.
[img]link to image[/img]Description

And then add to your css

.board_description {
  display: flex;
  gap: 0.5em;
  align-items: center;
}
.board_description img.bbc_img {
  width: 50px;
  height: 50px;
}

The align-items is optional.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Senkusha

Quote from: Kindred on January 27, 2023, 08:03:46 PMWhy are you even putting the images into the description?
Use css to show them
It's an idea I had when I finally noticed that I can add BBC tags to descriptions and IMG was one of them.  Besides, I don't really understand CSS.

Quote from: Diego Andrés on January 27, 2023, 09:07:03 PMTry with just the image, no tables, no format.
[img]link to image[/img]Description

And then add to your css

.board_description {
  display: flex;
  gap: 0.5em;
  align-items: center;
}
.board_description img.bbc_img {
  width: 50px;
  height: 50px;
}

The align-items is optional.
I originally tried it without the table, but that didn't provide the look I wanted.  I wanted the text to the right of the image, not just to start on the right and along the bottom of the image to wrap around.

I'll try the CSS suggestion tonight.  Thank you!

(That would be in the index.css or custom.css?)

--Senkusha
The Anime Brigade
Anime-style Role Playing Games and Discussion.
(SMF v. 2.1.4, PHP v. 8.0)

Steve

You could try one and if that doesn't work, remove it and try the other.  ;)
DO NOT pm me for support!

Julius_2000

Hey, could I make a suggestion? Would you mind having the pictures taking the position of the board icon bubbles instead of being within the description itself? It would look a bit "cleaner" in my opinion. I did something similar with our forum:
You cannot view this attachment.


Senkusha

Quote from: Julius_2000 on January 28, 2023, 02:21:58 PMHey, could I make a suggestion? Would you mind having the pictures taking the position of the board icon bubbles instead of being within the description itself? It would look a bit "cleaner" in my opinion. I did something similar with our forum:
You cannot view this attachment.


I would love to do that, but it's a lot of work, especially when there is software update, I'd have to redo it everytime.  I tried a mod (but that was for 1.1, back in the day, that I liked a lot), but that isn't compatible for 2.1.x.
--Senkusha
The Anime Brigade
Anime-style Role Playing Games and Discussion.
(SMF v. 2.1.4, PHP v. 8.0)

Senkusha

For now, I just added this to the Index.css file.  Works pretty well. :)

.board_description {
  display: flex;
  gap: 0.5em;
  align-items: top;
}
.board_description img.bbc_img {
  width: 100px;
  height: 100px;
}


You cannot view this attachment.
--Senkusha
The Anime Brigade
Anime-style Role Playing Games and Discussion.
(SMF v. 2.1.4, PHP v. 8.0)

Kindred

In 2.1.x, it is purely css. Not a single code change
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Senkusha

Quote from: Kindred on January 28, 2023, 06:32:54 PMIn 2.1.x, it is purely css. Not a single code change
I like that a lot!  It makes things really easy.  And doing the image in the description means I only need one image instead of two or three (New, not new, and Child board new).
--Senkusha
The Anime Brigade
Anime-style Role Playing Games and Discussion.
(SMF v. 2.1.4, PHP v. 8.0)

Diego Andrés

FYI align-items: top is not a thing.
It would be start.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Julius_2000

Quote from: Senkusha on January 28, 2023, 06:07:59 PM
Quote from: Julius_2000 on January 28, 2023, 02:21:58 PMHey, could I make a suggestion? Would you mind having the pictures taking the position of the board icon bubbles instead of being within the description itself? It would look a bit "cleaner" in my opinion. I did something similar with our forum:
Meta_Forum.jpg


I would love to do that, but it's a lot of work, especially when there is software update, I'd have to redo it everytime.  I tried a mod (but that was for 1.1, back in the day, that I liked a lot), but that isn't compatible for 2.1.x.

Actually, it's not that complicated, made with purely CSS and should not be affected by updates.

They way I did it is:
I figured out the names of each board that SMF generates with my browser's Dev tool and then I assigned images with "content" to these boards and adjusted the elements' look to my needs.

For instance:

#board_1 .board_icon a {
    content: url(../images/icons/Chems/Mouth.svg);
}

For .board_icon a, I specified a width and set height to auto
.board_icon a {
    display: inline-block;
    width: calc(70px + (80 - 70) * (100vw - 721px) / (3840 - 721));
    height: auto;
    padding: 0 10px;
}

For your images just make sure that they have the same aspect ratio (just crop them with an image processing tool) to make them equally proportioned. If not, you can also set the width/height individually for each board_icon a of course. I just made svg images that all have the same size so I can use global dimensions. If your cropped images have as well the same size, you could do that, too, like in my example.

Since the board icons are actually a sprite with 4 images indicating whether there are new posts, replacing them with your own images would maybe require you to create some sort of indicator with CSS. SMF assignes a .board_on/ .board_off class to each board. I use a small orange dot and a short animation so it would catch anyone's attention.
You cannot view this attachment.

So you could use that or a border or whatever as an indicator.


Kindred

alternatively, you could set board_off and board_on2 to use a background or an overlay color in CSS instead of a whole separate image.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Senkusha

Quote from: Julius_2000 on January 28, 2023, 02:21:58 PMHey, could I make a suggestion? Would you mind having the pictures taking the position of the board icon bubbles instead of being within the description itself? It would look a bit "cleaner" in my opinion. I did something similar with our forum:
Meta_Forum.jpg

Actually, it's not that complicated, made with purely CSS and should not be affected by updates.

They way I did it is:
I figured out the names of each board that SMF generates with my browser's Dev tool and then I assigned images with "content" to these boards and adjusted the elements' look to my needs.

For instance:

#board_1 .board_icon a {
    content: url(../images/icons/Chems/Mouth.svg);
}

For .board_icon a, I specified a width and set height to auto
.board_icon a {
    display: inline-block;
    width: calc(70px + (80 - 70) * (100vw - 721px) / (3840 - 721));
    height: auto;
    padding: 0 10px;
}

For your images just make sure that they have the same aspect ratio (just crop them with an image processing tool) to make them equally proportioned. If not, you can also set the width/height individually for each board_icon a of course. I just made svg images that all have the same size so I can use global dimensions. If your cropped images have as well the same size, you could do that, too, like in my example.

Since the board icons are actually a sprite with 4 images indicating whether there are new posts, replacing them with your own images would maybe require you to create some sort of indicator with CSS. SMF assignes a .board_on/ .board_off class to each board. I use a small orange dot and a short animation so it would catch anyone's attention.
indicator.png

So you could use that or a border or whatever as an indicator.

How would I put like a green border around a New topic, and a red border around a NoNew topic?
--Senkusha
The Anime Brigade
Anime-style Role Playing Games and Discussion.
(SMF v. 2.1.4, PHP v. 8.0)

Senkusha

Sorry for the double post.  But I just discovered this alignment issue.  Where do I fix this at?  I would want the text to be top-aligned.

Thank you!

You cannot view this attachment.
--Senkusha
The Anime Brigade
Anime-style Role Playing Games and Discussion.
(SMF v. 2.1.4, PHP v. 8.0)

Kindred

.board_icon a.board_on {
  border: 2px red solid;
}

.board_icon a.board_on2 {
  border: 1px red solid;
}

.board_icon a.board_off {
  border: 2px green solid;
}
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Advertisement: