Is it possible to move the header image that people can upload to their posts?

Hello,

[I use Elgg 6.1.1 with "Default Plus" theme.]

Users can upload individual header images for their posts in various plugins, e.g. blogs, pages, user profile or event manager.

This image is then inserted between the header of the site and the full body area, spanning the whole browser window with 100%. This doesn't suit the design of how I envision my site, thus I currently hide the "header upload" areas in the add/edit menus. But it's a waste of an otherwise interesting function. So I wonder:

Is it possible to move this header image into the actual post, for example between the title and description of a blog entry, so that it wouldn't span over other areas of the site like the sidebar?

As an example, please have a look at this image from WZM:

https://es.wzm.me/media/slider/1695/1694/preview-of-elgg-theme

Imagine the header image being shown under the name "Durward Murphy", between the <hr> line and the white text field ("Illo necessitatibus...", with the same width as the text field (I assume that's 100% of that profile entry).

Bonus question: Can the height and width of the header image be defined; as a random example, let's say, set to 500x500 pixels?

I found some files in the Elgg core under entity/icon which seem to be connected to this, but before I start trial & erroring my way around, I wanted to ask here first, if this is idea is possible at all, or would it complicte or break things.

Bonus bonus question: Where does the text "Leave blank to keep current header. Maximum allowed file size is 512 MB" in the add/edit pages come from? I couldn't find it.

Thanks for any tips you might have.

Regards,

the Elggnoob

  • 1 - Override these files:

    \vendor\elgg\elgg\views\default\page\default.php
    \vendor\elgg\elgg\views\default\page\elements\header.php
    \vendor\elgg\elgg\views\default\page\elements\header_image.php

    2 - Customize CSS

    Note: It's a default layout

    \vendor\elgg\elgg\views\default\page\default.php
    

    Changing this view will affect  on all site pages, not just the blog.

    Otherwise, you'll need to create a custom layout and specify it in the full blog view.

     

    Can the height and width of the header image be defined; as a random example, let's say, set to 500x500 pixels?

    All in CSS  ¯\_(ツ)_/¯

    Where does the text "Leave blank to keep current header. Maximum allowed file size is 512 MB" in the add/edit pages come from?

    1, 2, 3

  • Imagine the header image being shown under the name "Durward Murphy", between the <hr> line and the white text field ("Illo necessitatibus...", with the same width as the text field (I assume that's 100% of that profile entry).

    Check out live Demo ;)

  • Thanks once again for your reply and info!

    I found the necessary files and also the CSS to edit the class for the background-image and am now able to at least change the header area to hopefully suit my vision for my site. I will think about what I could do with the area. Maybe leaving it hidden is nonetheless the more suitable solution for me, as that individual header doesn't add anything valuable to my site. It just takes space that is not needed.

    Regarding my hope for this function: I think that it won't be possible. I would have to change the cropping aspect-ratio from "header" to 1:1 in order to create a square and then move the created cropped square image out of the header area and into the view of the plugins (under the title section). I don't think this is easily possible, if at all.

    So in order to get the option to have a very easy and noticeable "add image" option for the users in various plugins (e.g. blog, pages, event manager, profile), the correct method would most likely be to add a custom image upload field and add it to the form and full view of the plugins. That's beyond my capabilities for now. I add it to my wishlist. And yes, I know that it's possible to add an image to the description area with the CKEditor. The problem is just that for 90% of my users, this is apparently too difficult. They need an "in your face" upload button that says "put your photo here". ;)

    P. S. It states that the "Blog Tools" plugin adds the option to add an image to a blog. I don't see this option anywhere though. Was this option taken out?

Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking