Board List Images Varying Per Category/Board

[Riley]

RESOLVED!

Hey there! I'd like to ask for any advice anyone may have about using images in board remodels. I made my board list remodel for a new hypothetical RP forum tonight, but have no idea where to go from here.

I'd like to have a different in my board list remodel for one category, the Clans one, where each of the boards in said category will feature a different 130x100 image. I currently use one class for every board that just has the one 130x100 and its corresponding bio div class.

Here's a visual of what I'm dealing with with an explanation of what I'm going for:

I've seen this done in other forums before (and won't link them out of respect of their owners), and am interested in where I should begin to start developing this for my own forums!

I'm aware of the images in board descriptions plugin, but after playing with it for a bit I realized I wasn't able to get what I wanted with that plugin.

Here is the link to my forum to see it as it is now. All the subboard images are the same since I have no clue how to go about this whole process.

I appreciate any input! Thanks!

Riley

[Kami]

This would be fairly easy to do with template modifications. How familiar are you with the layout templates / HTML in general? (Just querying to see how in depth my answer needs to be).

[Riley]

Feb 8, 2021 8:08:25 GMT -8 Kami said:

This would be fairly easy to do with template modifications. How familiar are you with the layout templates / HTML in general? (Just querying to see how in depth my answer needs to be).

Pretty familiar! I just don't know where to begin! Just so much as pointing me in the right direction with an idea of what sort of code I should be using and where will help! Thank you!

[Kami]

Feb 8, 2021 10:00:47 GMT -8 Riley said:

Feb 8, 2021 8:08:25 GMT -8 Kami said:

This would be fairly easy to do with template modifications. How familiar are you with the layout templates / HTML in general? (Just querying to see how in depth my answer needs to be).

Pretty familiar! I just don't know where to begin! Just so much as pointing me in the right direction with an idea of what sort of code I should be using and where will help! Thank you!

Gotcha! So, this would be a really good place to combine board ID with if/else statements.

You would start by structuring the HTML where the board images appear to show the special images, then the "not special" images, something like so:

{if $[board.id] == 1}
  (special image here)
{else}
  (regular image here)
{/if}

Since you'll have more than one images, you'd use elseif, like so:

{if $[board.id] == 1}
  (special image 1 here)
{elseif $[board.id] == 2}
  (special image 2 here)
{else}
  (regular image here)
{/if}

If these are on / off icons that would need to show a different style of image if there are new posts versus no new posts, you could do one of two things:

1. My preferred way of doing this is just an opacity increase/decrease. You can use if/else statements within HTML to add a class based on conditions, like so:

<img src="URL of image" class="board_image_class {if $[board.is_new]}new_post_class{/if}" />

Then add the properties of .new_post_class (or whatever you want to call it) in your stylesheet. Note that you can upload the image to your theme images and pull the URL off of that.

2. Or, you can upload two different images to the forum theme and use the image variables that will appear in the variable tree on the right of the templates under the "theme" branch", and swap it out that way, like so:

{if $[board.is_new]}
  $[theme.image.image_name_here_new]
{else}
  $[theme.image.image_name_here_old]
{/if}

You can use either of these methods as the content for (special image here) in the initial setup as well. (:

Hope this gets you where you need to go! Feel free to let me know if you need additional assistance.

[Riley]

Feb 8, 2021 10:19:23 GMT -8 Kami said:

Feb 8, 2021 10:00:47 GMT -8 Riley said:

Pretty familiar! I just don't know where to begin! Just so much as pointing me in the right direction with an idea of what sort of code I should be using and where will help! Thank you!

Gotcha! So, this would be a really good place to combine board ID with if/else statements.

You would start by structuring the HTML where the board images appear to show the special images, then the "not special" images, something like so:

{if $[board.id] == 1}
  (special image here)
{else}
  (regular image here)
{/if}

Since you'll have more than one images, you'd use elseif, like so:

{if $[board.id] == 1}
  (special image 1 here)
{elseif $[board.id] == 2}
  (special image 2 here)
{else}
  (regular image here)
{/if}

If these are on / off icons that would need to show a different style of image if there are new posts versus no new posts, you could do one of two things:

1. My preferred way of doing this is just an opacity increase/decrease. You can use if/else statements within HTML to add a class based on conditions, like so:

<img src="URL of image" class="board_image_class {if $[board.is_new]}new_post_class{/if}" />

Then add the properties of .new_post_class (or whatever you want to call it) in your stylesheet. Note that you can upload the image to your theme images and pull the URL off of that.

2. Or, you can upload two different images to the forum theme and use the image variables that will appear in the variable tree on the right of the templates under the "theme" branch", and swap it out that way, like so:

{if $[board.is_new]}
  $[theme.image.image_name_here_new]
{else}
  $[theme.image.image_name_here_old]
{/if}

You can use either of these methods as the content for (special image here) in the initial setup as well. (:

Hope this gets you where you need to go! Feel free to let me know if you need additional assistance.

It's worked! All it needs is some tweaking on my end to fit the new structuring. Thank you so much!

This thread's been resolved!

[Kami]

Yay, glad you got it going. You're welcome! :D