Custom Topic Icons (using an URL)
4 posters
Page 1 of 1
Custom Topic Icons (using an URL)
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?
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
Re: Custom Topic Icons (using an URL)
The topic was posted in the wrong section, so I have moved it to the correct section.
|
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Custom Topic Icons (using an URL)
Thank you for moving it, I apologize for it being in the wrong section!
Re: Custom Topic Icons (using an URL)
Hi @HaeDoesGraphics,
It's possible to achieve, but it depends on which method you want to use. These are the possible solutions :
Aside from jury rigging with JavaScript, Forumotion doesn't have native support for user-generated topic icons, sadly.
It's possible to achieve, but it depends on which method you want to use. These are the possible solutions :
- 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. - 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.
Re: Custom Topic Icons (using an URL)
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?
Re: Custom Topic Icons (using an URL)
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. ^_^
Wondering, in follow up, if there was a snippet of coding to go with this feature and where it would go. ^_^
Re: Custom Topic Icons (using an URL)
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 :
and replace it with :
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
If you need to restrict the size of the custom icons, use this CSS :
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 -->
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';
});
If you need to restrict the size of the custom icons, use this CSS :
- Code:
.custom_ticon {
max-height:30px;
max-width:30px;
}
Re: Custom Topic Icons (using an URL)
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.
The URL only displays as a URL and not the image, even when using the [img] tags.
Re: Custom Topic Icons (using an URL)
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?
So you want an image of the member's choice to be shown on the topics list as an image of the specific topic?
Re: Custom Topic Icons (using an URL)
@Luffy: Exactly. Yes
+ I really like the description being on here and I do appreciate you taking some time to help out Ange!!
+ I really like the description being on here and I do appreciate you taking some time to help out Ange!!
Re: Custom Topic Icons (using an URL)
@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.
If that's what you want then i can share the codes with you.
Re: Custom Topic Icons (using an URL)
@Luffy: That is exactly what I am looking for Thank you for offering to share!
Re: Custom Topic Icons (using an URL)
Okay,
Go to your templates and edit the Topic_List_Box template:
Find:
Replace it with:
Find:
Save and publish the template. Then go to your CSS and add this:
Lastly, add this as your Javascript with placement In all the pages:
Any further styling changes are in your hand!
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}"/>
Find:
- Code:
{L_DESCRIPTION}
- Code:
Topic Image
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!
Re: Custom Topic Icons (using an URL)
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!
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!)
Re: Custom Topic Icons (using an URL)
Problem solved & topic archived.
|
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum