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.