Help with manually adjusting the layout of one page in the tidypics plugin?

Hello everyone,

as my username shows, I'm new at Elgg. I found it only this month and had not heard of it before. I installed Elgg and most of the plugins for version 6 and created a nicely working project site. I want to say thanks to the people who keep Elgg alive!

Since I'm not a programmer, my understanding of PHP is limited. If I read PHP code, I can roughly follow what is going on and can change small things like e.g. from true to false. I browsed through the Elgg PHP pages and read the documentation and I have an idea how it works and how it is all connected, but I lack the skills to go further. My hope is that someone can help me out with the following idea:

Plugin: Tidypics 5.0.2 (the version on Github that was updated to work with Elgg 6)

Elgg version: 6.1.1

Tidypics-area I want to manually adjust: "siteimagesall"

If I am allowed to post a link, you can view the page in question here.

(You might notice that the page doesn't show the titles for the pictures. I was able to hide that manually in the code (see below).)

What I am hoping for: create some kind of instagram-like layout for the output on "siteimagesall" through the following 4 (+1 bonus) changes:

1. Above the picture should be shown the username of the person who uploaded the picture (replacing the former title in the $heading area, but with normal (or smaller) text size) .

What I tried: I found out that the title on "siteimagesall" comes from the $heading parameter in the "summary.php" file. By setting it to "false" under "elgg_view_module", I was able to hide it. That's what you see in the link above. I tried changing $heading to $user to see what happens. It created a fatal error :D, but I feel like I'm in the right place. How can I show the username in (I assume) "summary.php"? And where can I change the text layout for the $heading area on "siteimagesall" from (I guess?) "h2" to normal (or small) text size?

2. The pictures in the overview list on "siteimagesall" should be bigger.

What I tried: I changed the "album views photo size (px)" on the plugin's settings page and on the plugin's "css.php" from 153x153 to 400x400, but to no effect. Where can I change the size for that list display?

3. There should only be one picture per "line".

What I tried: In the Inspector window, I found the generated HTML/CSS code for the area in question. It's one "ul class elgg-gallery tidypics-gallery" with "li class elgg-item"s in it. I'd like to change that to one "ul" per "item" like this:

not

<ul>
<li>photo 1</li>
<li>photo 2</li>
</ul>

but

<ul>
<li>photo 1</li>
</ul>
<ul>
<li>photo 2</li>
</ul>

Is this possible? If yes, how/where?

4. Under the picture (bottom left) should be the "like thumb" icon which is shown on the full picture page.

What I tried: nothing. But since the heading and picture are being "called" (?, I don't know if this is the correct term) into display in "summary.php", I thought that this might also be the place for showing the icon as well?

5. Bonus question: This is a specific question about the tidypics plugin. I actived the extended sidebar menu in the settings, and would like to change "recently viewed photos" to "recently added photos" which shows all pics from the last e.g. 30 days. I guess it's this code from "extended_menu.php":

elgg_register_menu_item('page', [
    'name' => 'A30_tiypics_recentlyviewed',
    'text' => elgg_echo('collection:object:image:recentlyviewed'),
    'href' => $base . 'recentlyviewed',
    'section' => 'B'
]);

Is this possible? If yes, how?

My apologies for the long text. If you are still reading: I appreciate it. Hopefully someone is able to help me out. While waiting for possible answers, I will keep trying things out for myself. The worst thing that could happen is another fatal error that I can easily revert.

Thank you for your help.

Kind regards, the elggnoob

  • Tip: Try this TidyPics fork for Elgg 6.

    This doesn't guarantee that your issues will be solved, but this fork is at least compatible with the latest Elgg.

  • Thank you for your reply. Your linked version is the one I installed.

  • Since I wasn't able to figure out how to create the design I was hoping for, I changed my plan and don't do it like instagram anymore. Instead I use it as intended with albums.

    But maybe someone can answer me this: How do I change the CSS for Tidypics? Testing with manual changes in the views/default/photos/CSS.php file of Tidypics won't do anything. Is this not the right file for it?

    I want to display the $title in the $heading smaller. Not as a <h2> (?), but normal sized text. I would like to add this to my own plugin as an overwrite, but I don't know what I have to overwrite, sorry.

  • Nikolai's reply to my other question in the "hide header" thread answers how to update the CSS. So there is no more need for a reply here. Thank you.

  • In case someone finds this thread and is wondering how it went:

    After one month of trying all kinds of things out, I actually succeeded: My "siteimagesall" page looks (kinda) like Instagram now. :)

    All changes happened in the "summary.php". The downside is that the changes in this file effect other views as well, e.g. all photo albums page and the album list. This is OK for me for now. But step by step I will try to correct this as well.

    This is what I did:

    1. Copied code I found in elgg/views/detail/object/elements/summary to add an image block view above the photo which created the area from the full view with the user icon, display name, date and social links.

    2. Set $header to false in the body view section, so that the title of the picture isn't shown.

    3. Added $image->description below the picture.

    4. Changed the thumbnail size from 153 pixels to 500 pixels on the admin settings page.

    5. Styled the max-width for the view to 500 pixels, so that all entries look the same, no matter how long the description or amount of tags.

    6. Added a <hr> to separate between entries. (This is only until I find a better solution to style the page more beautifully.)

    (7. I also found out how to get metadata to show under the picture to get the social links there. This would be even nicer than having them above the picture. But I wasn't able to hide the social links from the image block view I called above the picture, so I hid that lower metadata area again. If someone tells me how I can easily hide the social links from the image block view, please let me know.)

    And all of that without knowing anything about PHP! Just observing the code everywhere, reading the hints from Nikolai and the documentation, and, of course, a loooot of trial and error.