WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) »  Preview Pics For Posts

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Preview Pics For Posts Empty Preview Pics For Posts Sat Jul 28, 2012 7:20 pm

medlsc

medlsc
Registered Member
Registered Member
Hi guys. I would like to ask how to put an image before every topic. Like the picture below.

Preview Pics For Posts Dsdads10

I use phpbb3 version.



Last edited by medlsc on Sun Jul 29, 2012 3:01 pm; edited 1 time in total

http://med-lab-scietists.free-forums.biz/

2 Preview Pics For Posts Empty Re: Preview Pics For Posts Sat Jul 28, 2012 9:21 pm

ankillien

ankillien
Administrator
Administrator
Hi,

You can use topic icons for that. Admin CP > Display > Pics management > Topic icons

3 Preview Pics For Posts Empty Re: Preview Pics For Posts Sun Jul 29, 2012 2:10 pm

medlsc

medlsc
Registered Member
Registered Member
Sorry for my mistake ankillien. I mean the first big picture, not the small icons.

Preview Pics For Posts Fsfsd10

http://med-lab-scietists.free-forums.biz/

4 Preview Pics For Posts Empty Re: Preview Pics For Posts Sun Jul 29, 2012 2:29 pm

ankillien

ankillien
Administrator
Administrator
Yes. I think it can be done with topic icon from admin panel. Thats the only way to add an icon to a topic on Forumotion, I think.

Once added, we can make it look the way we want using CSS and templates.

5 Preview Pics For Posts Empty Re: Preview Pics For Posts Sun Jul 29, 2012 2:37 pm

medlsc

medlsc
Registered Member
Registered Member
Ankillien i understand what you mean. As you see every topic has a different picture. I want when i post a theme with a picture inside, this picture to appear automatically before every post at the topic list.

I use phpbb3 verion and i can't change the template.

http://med-lab-scietists.free-forums.biz/

6 Preview Pics For Posts Empty Re: Preview Pics For Posts Sun Jul 29, 2012 4:00 pm

ankillien

ankillien
Administrator
Administrator
We can try to make a script that catches the first image from the first post of a topic and display it as the icon.

7 Preview Pics For Posts Empty Re: Preview Pics For Posts Sun Jul 29, 2012 11:32 pm

medlsc

medlsc
Registered Member
Registered Member
ok ankillien Smile If you have time do it. Smile

http://med-lab-scietists.free-forums.biz/

8 Preview Pics For Posts Empty Re: Preview Pics For Posts Tue Jul 31, 2012 10:05 am

ankillien

ankillien
Administrator
Administrator
I'm working on it but it may take some time. I'll let you know once I come up with a solution. Smile

9 Preview Pics For Posts Empty Re: Preview Pics For Posts Sat Aug 04, 2012 11:43 am

ankillien

ankillien
Administrator
Administrator
Ok,
Try this on a test board.

Add this to the CSS first...

Code:
.dterm {
position: relative;
padding-left: 80px !important;
}
.topicon {
position: absolute;
top: 10px; left: 45px;
}
.topicon img {
width: 25px; height: 25px;
}

And add this code via javascript code management...

Code:
$(function(){
    $('.dterm').each(function(){
        var topicLink = $(this).children('.topic-title-container').children('.topic-title').children('.topictitle').attr('href');
        $(this).append('<div class="topicon"><img src="http://r26.imgfast.net/users/3111/11/99/51/avatars/857-92.jpg" /></div>');
        $(this).children('.topicon').load(topicLink +' .post:first .content img:first');
    });
});

It will grab the first image from a topic and display before topic title.
And if there is no image in the first post, it will display a sample/placehilder image before topic.

10 Preview Pics For Posts Empty Re: Preview Pics For Posts Sat Aug 04, 2012 2:06 pm

medlsc

medlsc
Registered Member
Registered Member
Unfortunately, it,s not working Ankillien. I done whatever you said.

I put the css code in the css stylesheet. Then i add the previously code in javascript code management and i chose the option ''in the topics''

But i can see that something has change in the home page (forum) not in the topics ( fora)

Preview Pics For Posts Dasfs10

i think that the css code works well and the problem is it in the javascript code.

http://med-lab-scietists.free-forums.biz/

11 Preview Pics For Posts Empty Re: Preview Pics For Posts Sat Aug 04, 2012 2:39 pm

ankillien

ankillien
Administrator
Administrator
The option 'in the topics' won't work. You have to put it for 'all the pages'.

For the spacing issue on homepage.

Replace this code in the CSS above...

Code:
.dterm {
position: relative;
padding-left: 80px !important;
}

with this...

Code:
.topiclist .dterm {
position: relative;
padding-left: 80px !important;
}

Hope it works.

12 Preview Pics For Posts Empty Re: Preview Pics For Posts Sat Aug 04, 2012 3:28 pm

medlsc

medlsc
Registered Member
Registered Member
It's not working ankillien Sad

http://med-lab-scietists.free-forums.biz/

13 Preview Pics For Posts Empty Re: Preview Pics For Posts Sat Aug 04, 2012 3:44 pm

ankillien

ankillien
Administrator
Administrator
Link to the site?

EDIT:

The spacing issue will be solved if you use .topics .dterm instead of .topiclist .dterm in the CSS.

The topic image should appear as I have tried on my test board.

14 Preview Pics For Posts Empty Re: Preview Pics For Posts Sat Aug 04, 2012 7:56 pm

medlsc

medlsc
Registered Member
Registered Member
the forum link: http://medlabsc.forumotion.com/

I solved the spacing issue but i have problem with topics, Not display the topic image.

Can you give me your's test board link ?

http://med-lab-scietists.free-forums.biz/

15 Preview Pics For Posts Empty Re: Preview Pics For Posts Sat Aug 04, 2012 9:24 pm

ankillien

ankillien
Administrator
Administrator
Are you sure you have added the javascript?
I can't find it in your source code!

16 Preview Pics For Posts Empty Re: Preview Pics For Posts Sat Aug 04, 2012 9:28 pm

medlsc

medlsc
Registered Member
Registered Member
Look now ankillien.

Preview Pics For Posts Rerwer10

http://med-lab-scietists.free-forums.biz/

17 Preview Pics For Posts Empty Re: Preview Pics For Posts Sat Aug 04, 2012 10:26 pm

ankillien

ankillien
Administrator
Administrator
I think some other javascript is conflicting with this script.

18 Preview Pics For Posts Empty Re: Preview Pics For Posts Wed Nov 13, 2013 10:13 pm

Petermichael


Registered Member
Registered Member
i also tried a lot but it didn`t work after that i put another java script in it now it`s working good.

19 Preview Pics For Posts Empty Re: Preview Pics For Posts Mon Nov 18, 2013 1:44 pm

mocharlamanoj


Registered Member
Registered Member
good information thank you guys

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) »  Preview Pics For Posts

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