New messages Members Forum rules Search
  • Page 1 of 1
  • 1
Forum moderator: kostova, Brazen  
uCoz Support Forum by uCozers » Coding » CSS » Displaying Photos by Specific User in Profile (sml[tutorial]Improvised tut to show how css can be your friend)
Displaying Photos by Specific User in Profile
kostovaDate: Monday, 2009 August 17, 1:31 AM | Message # 1
Font size: A | A |
Colonel
Group: Administrator
Message: 268
[ ]
Offline
First of all, you're going to have to create an Informer for Photos and either display it in random, dateA, dateB, or any of the options shown. Make sure to define a large number of photos to display if you have multiple users uploading pictures. It's going to be $MYINF_1$ in our example.

Next you're going to add this code into the informer you just created.

Code
<a href="$PHOTO_URL$" class="$USER$">$PHOTO$</a>

Notice how we have defined the class to the user whom uploaded a photo. If a particular user, let's say Admin uploads a photo, and his username is "tutorial", the informer would parse that code into:
< a href="/photo/entry-#-#-#" class="tutorial">

Now here comes the tricky part, create a global block and name it to remember what it is. In this instance, we're using the name: USERPHOTO > $GLOBAL_USERPHOTO$

Input the Informer code you just made (i.e. $MYINF_1$) into the $GLOBAL_USERPHOTO$.
This is the template for that:

Code
<div id="informer1">$MYINF_1$</div>
<style>
div#informer1 a {display:none;}
</style>

What happens here is the global block's css defines div#informer1 a as not displaying. The reason we're encasing the informer in div#informer1, is because if it was inserted in the informer, that would be too many elements heavy on the page loading times because the informer wants to display the number of photos you allowed it to show. So it would be easier to just encase it and the style below just one time. Also, we need a relative path to ensure the image is not displayable.

Finally, you can add the code into your User Personal Page template where ever you want.
User Personal Page:

Code
<html>
<head>
<title>Username: Tutorial (admin)</title>
</head>
<body>
<othercontent>blah blah this is $_USERNAME$'s page.</othercontent>
<?if($_PHOTO_ACTIVITY_URL$)?>
$GLOBAL_USERPHOTO$
<?else?>
This User has not uploaded any photos.
<?endif?>
</body>
</html>

We're not done yet. We still need one more style inside the header or anywhere else on the User Personal Page. It is recommended to put this in the header.

Code
...
<head>
<title>Username: Tutorial (admin)</title>
<style>
div#informer1 a.$_USERNAME$ {display:inline;}
</style>
</head>
...

And voila! You're done. Now you will only show photos uploaded by the user [tutorial].

If you don't understand this well. Let me explain it a little more...
The informer, like stated above has a class defined as the user who uploaded (i.e. $USER$). When it's in the global block, the style we provided, makes sure every image is not viewable [just hidden with css]. Although, when you put the global block into the User Personal Page, the style you have in the header will overwrite the global block's style, making it display. But there's a catch! The style has one little addition to it. And that's $_USERNAME$ (div#informer1 a.$_USERNAME$). Now what that does is simply specifies the User's page and cancel's out only the specific user's global block style.

There are many more ways to customize this, but I only gave the basics. I can give a condensed version if anyone's interested.
And there it is, your tutorial on how to display a picture uploaded by a user in that user's page.

Edited Byheysupp - Monday, 2009 August 17, 3:55 AM
 
jackassDate: Monday, 2009 August 17, 1:58 AM | Message # 2
Font size: A | A |
Major general
Group: Administrator
Message: 433
[ ]
Offline
Well I think this is very hard to understand biggrin

There is simpler way to do it, I will make a tutorial later when I will have time
I do it with java scripts smile

But heysupp, thanks for tutorial smile


 
kostovaDate: Monday, 2009 August 17, 2:32 AM | Message # 3
Font size: A | A |
Colonel
Group: Administrator
Message: 268
[ ]
Offline
Yes, javascript can be easier. But if the user doesn't have javascript enabled, this might be the better alternative.

The purpose was: Improvised tut to show how css can be your friend

Edited Byheysupp - Monday, 2009 August 17, 3:01 AM
 
LeekinzDate: Monday, 2009 August 17, 3:35 AM | Message # 4
Font size: A | A |
Lieutenant colonel
Group: uCozer
Message: 123
[ ]
Offline
You should show a screenshot of what it looks like, It'll inspire the users to create it.

 
kostovaDate: Monday, 2009 August 17, 3:53 AM | Message # 5
Font size: A | A |
Colonel
Group: Administrator
Message: 268
[ ]
Offline
Yes, but I don't have the usual forum-based layout for profiles. So user's can't really imagine what the current layout most have will look like.
 
uCoz Support Forum by uCozers » Coding » CSS » Displaying Photos by Specific User in Profile (sml[tutorial]Improvised tut to show how css can be your friend)
  • Page 1 of 1
  • 1
Search:


Copyrights uCozers 2009 - 2024 To TOP
Refresh Smileys Manager