Hello,
I want to change forum User Picture size in my theme.
Default size is
width - 35
height - 35
I want this change only on front page Site News forum.
width - 150
height - 150
How can i achieve this? Please help me.
Thanks in advance.
You can only do this if the uploaded pictures by the user are at least 150 x 150 otherwise you will get pixelation. Then use CSS with the 'pagelayout-frontpage' (either a similar ID or class) to target the img tag with hopefully something like 'user-picture' and set the width and height attributes. Off the top of my head, that is roughly what the selector names are.
Thank you for reply.
I am using already image size 333 × 500
and write css also
#site-news-forum .forumpost .picture img.userpicture {
width:150px !important;
height:150px !important;
}
Still same issue.
Thank you in advance.
Chrome developer tools: https://developer.chrome.com/devtools - I've found are really useful for figuring out what is not working CSS wise.
I don't know for sure, but I believe the CSS is just stretching the image. In my theme, to output a user picture in my header, I write something like this on PHP:
echo $OUTPUT->user_picture($USER, array('size' => 45));
The above code outputs the user image with a size of 45px by 45px. Haven't taken a look, but there's probably an output renderer you can override to make the actual size of the image bigger with PHP.
Thank you for your reply Joseph,
You are right we need to override OUTPUT renderer, can you please give some example that how to override OUTPUT renderer in my case?
I don't think there is a renderer for this in moodle/mod/forum/renderer.php
However you could try looking in moodle/lib/outputrenderers.php about lin 2332...
if (empty($userpicture->size)) {
$size = 35;
} else if ($userpicture->size === true or $userpicture->size == 1) {
$size = 100;
} else {
$size = $userpicture->size;
}
Hope this helps?
Mary
Thank you Mary.
I found code in moodle/lib/outputcomponents.php line no 159
public $size = 35;
When i change this size here it effects in my moodle user picture size,
But i want to change user picture size in my theme , not in moodle
Please help me how can i use this code in my theme.
you can see my theme renderer file attached here.
My moodle Version is Moodle 2.7.2+ (Build: 20141010)
Thank you in advance.
In your profile it says you are a professional Moodle Theme Designer/Developer...with those skills you should know how to navigate about the page to derive the original CSS...surely?
From there it should be easy to get to where you want to go to!
In case you don't then try this...
#site-news-forum .forumpost .row .left {
width: 180px;
}
#site-news-forum .forumpost .row .left.picture img {
height: 150px;
width: 150px;
}
Thank you for your reply Mary,
Actually I am not taking about image stretching, I need actual image size 150/150 px
Thank you again.
Sorry to resurrect a dead thread, but I'm pretty sure I'm working on essentially the same that Mahek was working on. I'm trying to use CSS to manipulate the size of the avatar image in the header bar and the larger user image at the top of the profile page as I create a custom theme based on the Clean theme in Moodle 2.9. Mahek noted that using CSS simply stretches the image to the desired length and width (in this case 180px, or 150px by 150 px), but because you're stretching an image that's already been rendered smaller by Moodle (100 x 100 or 35 x 35 respectively) the resolution of the image is destroyed regardless of the actula resolution of the uploaded picture.
Mary pointed to a place in outputrenderers.php (lines 2431-2436 in Moodle 2.9) that seemed promising (it assigns the sizes 35 and 100 to the userpicture), but changing the values here makes no difference on the actual Moodle site--the "natural size" of the image still reads either 35 x 35 or 100 x 100 in the browser regardless of changing these values, and it is still stretched and distorted by CSS.
There is another place in outputrenderers.php that DOES change the natural size of the profile page image. On line 3965, changing the "100" in the line
$imagedata = $this->user_picture($user, array('size' => 100));
to "180"
$imagedata = $this->user_picture($user, array('size' => 180));
makes the natural size of the profile page image 180 x 180. Is there a renderer somewhere that can be overridden that will change the size of the avatar image? (That's the one whose natural size is 35 x 35.)
(I'm very new to this, so I might be missing something simple. I'm currently working on creating a custom theme for our high school site.)
Hi Kevin,
I have just made an interesting observation. In Moodle we can choose to use Gravatar as an Avatar holding repository. Normally the user icon is called for by Moodle and the returned image is dependent on the url used.
For example: this is my Gravatar made bigger by just altering the url to 180px;
=180&d=mm
https://secure.gravatar.com/avatar/fa47dc71d12895ce6ee12711fd8736aa?s=180&d=mm
But that is not solving the problem for you, unless you can find a way to alter that URL.
Just a thought
Mary
Thanks for the reply, Mary. I read a lot of comments about Gravatar as I was researching this problem--definitely seems like something I should look into.
I seem to have solved my problem, although neither the method of finding the solution nor the solution itself are very pretty. I opened every .php file in the lib folder in Moodle, then searched them for "35", the natural size of the small avatar. In outputcomponents.php on line 181 I found
public $size = 35;
which I changed to
public $size = 80;
because I needed it to be at least 75px by 75px. This had the effect of changing the actual size of the image in the html to 80px by 80px (like expected), which my CSS shrank down to 75px by 75px (as expected), but when I analyzed it in Chrome it says that the natural size (which seems to determine the resolution) of the image is 100px by 100px (which is unexpected, but doesn't really matter anyway).
I'm just starting to learn how to use renderer overrides which seems to be the right way of doing things in a theme, and I think I can override things in outputrenderers.php, but I'm not sure if I can override the outputcomponents.php lines. So I'll probably just change the value in outputcomponents.php.
Hi Kevin,
As you have found overriding renderers is reletively streight forward if you find the right outputrenderers.php function to alter. Outputcomponants.php is something very different, however, it might be one of those occasions that you can manipulate the function in yours themes lib.php file.
It is surprising what you can do in the lib.php file. I am still learning in that respect!
Here is something I just remembered which I found some years ago and have used this in my older themes. It is this line in the Splash theme.
https://github.com/moodle/moodle/blob/MOODLE_25_STABLE/theme/splash/layout/general.php#L95
The above link points to the part of the code that adds a change in the size of the image to be displayed. This might work for you especially if you want to use a bigger user picture.
Cheers
Mary
The Moodle tutorial on overriding renderers is really helpful, but it doesn't quite address what I'm trying to do. In the Moodle 2.9 Clean theme, there is already an output renderer override built in, designed to override a renderer in bootstrapbase to make the breadcrumb trail look right. This built in override is
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
require_once($CFG->dirroot . '/theme/bootstrapbase/renderers.php');
class theme_mytheme_core_renderer extends theme_bootstrapbase_core_renderer {
public function context_header($headerinfo = null, $headinglevel = 1) {
if ($headinglevel == 1 && !empty($this->page->theme->settings->logo)) {
return html_writer::tag('div', '', array('class' => 'logo'));
}
return parent::context_header($headerinfo, $headinglevel);
}
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
This is a necessary override for the appearance of the breadcrumb trail. But I also need to override the renderer in /lib/outputrenderers.php that affects the size of the profile pic. I can accomplish this with
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
include_once($CFG->dirroot . "/lib/outputrenderers.php");
class theme_mytheme_core_renderer extends core_renderer {
/**Copy and paste lines 3936 to 3983 of /lib/outputrenderers.php, changing the size in line 3965.*/
public function context_header($headerinfo = null, $headinglevel = 1) {
global $DB, $USER;
$context = $this->page->context;
blah blah blah
$imagedata = $this->user_picture($user, array('size' => 200));
blah blah blah
}
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Each of these renderer overrides works individually--overriding either the bootstrapbase "core renderer" to make the breadcrumb trail look right, or the ouputrenderers "core renderer" to make the profile picture bigger, but I can't figure out how to run both of them at the same time and make them both work. I think the problem is that, when I designate the class with the correct syntax (theme_mytheme_core_renderer) they have the exact same class, but I don't know how to designate different classes for each and still make them work.I'm really very new to this, and I don't know much about php, so it's likely a very simple thing that I don't understand how to do. Any help would be appreciated.
Hi,
The way you do this is NOT call the ourtputrenderers.php but just use the same as clean theme does to extend theme_bootstrapbase_core_renderer like so...
require_once($CFG->dirroot . '/theme/bootstrapbase/renderers.php');
public function context_header($headerinfo = null, $headinglevel = 1) {
global $DB, $USER;
$context = $this->page->context;
blah blah blah
$imagedata = $this->user_picture($user, array('size' => 200));
blah blah blah
}
}
This is assuming you are using the whole of this function?
https://github.com/lazydaisy/moodle/blob/master/lib/outputrenderers.php#L3944-L3987
Hope this helps?
Mary
Thanks! It works now.
I'm pretty sure I was incorrect before about what was causing the problem with the breadcrumb trail. Correctly designating
theme_mytheme_core_renderer extends theme_bootstrapbase_core_renderer
fixed everything.
Thanks again for your help!
Hi,
I did not comment about the breadcrumb as that is part of the navigation functions elsewhere. And as the render class in Clean theme is new and I have not spent much time working with it, I did not feel qualified to comment either way. However, renderers are something I do work with in themes and so found that an easy one to fix.
Glad it is all working as you want it to be.
Cheers
Mary