The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Custom Topic Icons (using an URL)

View previous topic View next topic Go down

Solved Custom Topic Icons (using an URL)

Post by HaeDoesGraphics on July 18th 2016, 6:49 pm

Basic Stuff:
Forum URL: canvasforums.com
Version: phpbb2 (subsilver)
Role: Founder

Wanting to Inquire About:
When a user makes a new topic, if there's a way to incorporate a URL field for the topic icon. So, instead of having options at the top of the new post (for instance, like on FM Forums you can add a "solved" icon as a pre-loaded option) there'd be a custom text box where you can paste in a URL and that becomes the topic icon for that thread.

I have seen it done, and I am trying to figure it out.

Anyone have any insights?


Last edited by HaeDoesGraphics on July 20th 2016, 2:05 am; edited 1 time in total

HaeDoesGraphics
New Member

Female Posts : 9
Reputation : 1
Language : English
Location : Indianapolis, Indiana, USA

http://canvasforums.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by SLGray on July 18th 2016, 8:53 pm

The topic was posted in the wrong section, so I have moved it to the correct section.
Please read our forum rules: ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35629
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by HaeDoesGraphics on July 18th 2016, 8:58 pm

Thank you for moving it, I apologize for it being in the wrong section!

HaeDoesGraphics
New Member

Female Posts : 9
Reputation : 1
Language : English
Location : Indianapolis, Indiana, USA

http://canvasforums.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by Ange Tuteur on July 18th 2016, 9:29 pm

Hi @HaeDoesGraphics,

It's possible to achieve, but it depends on which method you want to use. These are the possible solutions :


  1. Create a field in the topic creation which allows the user to place an URL that will serve as the topic icon. This URL will then be added to the topic title and parsed with JavaScript client-side.
    Down side : To search engines and noscript users they will see the URL for the topic icon in your title, which will look a little off, especially in searches.

  2. In this method we can utilize the description field for the topic icon URLs and of course parse them client-side with JavaScript.
    Down side : This will only display in the topic list.


Aside from jury rigging with JavaScript, Forumotion doesn't have native support for user-generated topic icons, sadly.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by HaeDoesGraphics on July 18th 2016, 9:50 pm

I believe the second method is the one I'm trying to achieve.. Basically the user will be allowed to post a URL of an image when they create a new topic. And that topic image will only be displayed in the topic list of our forum?

HaeDoesGraphics
New Member

Female Posts : 9
Reputation : 1
Language : English
Location : Indianapolis, Indiana, USA

http://canvasforums.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by HaeDoesGraphics on July 19th 2016, 9:50 pm

Bumping, I was watching the clock all day today. LOL.

Wondering, in follow up, if there was a snippet of coding to go with this feature and where it would go. ^_^

HaeDoesGraphics
New Member

Female Posts : 9
Reputation : 1
Language : English
Location : Indianapolis, Indiana, USA

http://canvasforums.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by Ange Tuteur on July 19th 2016, 11:04 pm

Sorry, I'm not on here that often anymore, especially recently due to my ongoing project.

Anyway, go to Admin Panel > Display > Templates > General and open the topics_list_box template.

Find :
Code:
         <!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
         <!-- END switch_description -->

and replace it with :
Code:
         <!-- BEGIN switch_description -->
         <span class="genmed topic-desc">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
         <!-- END switch_description -->
Be sure to save and publish the template.


Next go to Admin Panel > General > Messages > Config > Allow topic descriptions > Yes > Save


After this go to Modules > JavaScript codes management and create a new script with the following settings.

Placement : In all the pages
Code:
$(function() {
  // startup variables
  var form = document.post,
      desc = $('.topic-desc'),
      i = 0,
      j = desc.length,
      html,
      icon;
 
  // addition of custom ticon field
  if (form && form.description) {
 
    $(form.description).after('<br/><input class="post" type="text" name="custom_ticon" placeholder="Custom topic icon" style="width:450px;margin-top:3px;"/>');
 
    $(form).submit(function() {
      var val = this.custom_ticon.value;
   
      if (val) {
        this.description.value += '[custom_ticon=' + val + ']';
      }
    });
  }
 
 
  // parse topic icon
  if (j) {
    for (; i < j; i++) {
      html = desc[i].innerHTML;
 
      if (regex.test(/\[custom_ticon=.*?\]/i)) {
        icon = html.replace(/.*?\[custom_ticon=(.*?)\].*/i, '$1');
        desc[i].innerHTML = html.replace(/\[custom_ticon=.*?\]/gi, '');
 
        $(desc[i]).closest('tr').find('td').eq(1).append('<img src="' + icon + '" align="middle" class="custom_ticon"/>');
      }
    }
  }
 
  'par ange tuteur';
});
This will add an extra field below the description field for URLs + it will also parse the icons in the topic list.


If you need to restrict the size of the custom icons, use this CSS :
Code:
.custom_ticon {
  max-height:30px;
  max-width:30px;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by HaeDoesGraphics on July 19th 2016, 11:53 pm

Okay codes are in and the additional box displayed - however, are the code for the "topics_list_box template" you posted the same? I might be blind.

The URL only displays as a URL and not the image, even when using the [img] tags.

HaeDoesGraphics
New Member

Female Posts : 9
Reputation : 1
Language : English
Location : Indianapolis, Indiana, USA

http://canvasforums.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by Luffy on July 20th 2016, 12:05 am

Hello @HaeDoesGraphics,

So you want an image of the member's choice to be shown on the topics list as an image of the specific topic?






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by HaeDoesGraphics on July 20th 2016, 12:09 am

@Luffy: Exactly. Yes Very Happy

+ I really like the description being on here and I do appreciate you taking some time to help out Ange!!

HaeDoesGraphics
New Member

Female Posts : 9
Reputation : 1
Language : English
Location : Indianapolis, Indiana, USA

http://canvasforums.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by Luffy on July 20th 2016, 12:11 am

@HaeDoesGraphics i know of some codes that will change the description field into that image field. For example if a member want's to add an image, they can simply add the image url to the description field and that image will be displayed to the topic list preview as that image.
If that's what you want then i can share the codes with you.






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by HaeDoesGraphics on July 20th 2016, 12:18 am

@Luffy: That is exactly what I am looking for Smile Thank you for offering to share!

HaeDoesGraphics
New Member

Female Posts : 9
Reputation : 1
Language : English
Location : Indianapolis, Indiana, USA

http://canvasforums.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by Luffy on July 20th 2016, 12:29 am

Okay,

Go to your templates and edit the Topic_List_Box template:
Find:
Code:
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}

Replace it with:
Code:
<img class="hanckidesc" src="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}"/>
Save and publish. Then go to the posting_body template in the "Post and Private Messages" template list option:
Find:
Code:
{L_DESCRIPTION}
and change it to
Code:
Topic Image
or anything you want for that field to be called instead of Description.
Save and publish the template. Then go to your CSS and add this:
Code:
img.hanckidesc { float: right !important }
img.hanckidesc {
  max-width: 150px !important;
  max-height: 50px !important;
  margin-top: -10px !important;
}

Lastly, add this as your Javascript with placement In all the pages:
Code:
$(document).ready(function() {
    $.getScript('https://raw.github.com/lokesh/lightbox2/master/js/lightbox.js');
});
$(function () {
        $('input[name="description"]').change(function () {
            var ValidFileExtension = ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF', 'bmp','BMP'];
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), ValidFileExtension) == -1) {
            alert("Sorry, the allowed file extensions are: '.jpeg','.jpg', '.png', '.gif', '.bmp'");
        }
    })
})

Any further styling changes are in your hand! Wink






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by HaeDoesGraphics on July 20th 2016, 1:44 am

WOO! We are getting there!

Hopefully my last question, @Luffy: Where would the overall CSS live?
I have looked in HMTL/JS pages and templates.

EDIT:
It was in the colors menu!
THIS WORKED PERFECT!! This has made my WHOLE day!
Thank you so much for the help, folks!

This 100% solved & bookmarked!


Last edited by HaeDoesGraphics on July 20th 2016, 2:03 am; edited 1 time in total (Reason for editing : Found the solution!)

HaeDoesGraphics
New Member

Female Posts : 9
Reputation : 1
Language : English
Location : Indianapolis, Indiana, USA

http://canvasforums.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by SLGray on July 20th 2016, 4:13 am

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35629
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum