The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Custom Topic Icons (using an URL)

4 posters

Go down

Solved Custom Topic Icons (using an URL)

Post by HaeDoesGraphics 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
HaeDoesGraphics
New Member

Female Posts : 11
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 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


Custom Topic Icons (using an URL) Slgray10

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

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

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

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

Female Posts : 11
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 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by HaeDoesGraphics 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
HaeDoesGraphics
New Member

Female Posts : 11
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 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
HaeDoesGraphics
New Member

Female Posts : 11
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 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by HaeDoesGraphics 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
HaeDoesGraphics
New Member

Female Posts : 11
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 TheCrow 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?
TheCrow
TheCrow
Manager
Manager

Male Posts : 6897
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by HaeDoesGraphics 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
HaeDoesGraphics
New Member

Female Posts : 11
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 TheCrow 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.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6897
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

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

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

Female Posts : 11
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 TheCrow 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
TheCrow
TheCrow
Manager
Manager

Male Posts : 6897
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Custom Topic Icons (using an URL)

Post by HaeDoesGraphics 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
HaeDoesGraphics
New Member

Female Posts : 11
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 July 20th 2016, 4:13 am

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


Custom Topic Icons (using an URL) Slgray10

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

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top


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