Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New attribute page_img: logos for for pages and sections #290

Open
wants to merge 20 commits into
base: main
Choose a base branch
from

Conversation

PhilReedData
Copy link
Contributor

@PhilReedData PhilReedData commented Oct 11, 2024

As discussed, I have borrowed the image page attribute from RO-Crate and used a new page_img attribute for pages to show a graphic such as a logo to the side of the page title. It also shows on the section navigation cards. There is no change to the rendered HTML in either place unless the page_img attribute appears in the front-matter of a page.

More details and images are described in a Google Doc.

This has been tested on a branch of the FAIRDOM website, and in the ETT site itself. I used the following code in _config.yml to make a remote call:
remote_theme: PhilReedData/elixir-toolkit-theme@page-img-007

This is a fork from version 3.2.0. I did not mean to change the Gemfile.lock file.

To do

  • Further testing on other sites.
  • Tweak the image sizes for mobile viewport and particularly wide/narrow images.
  • Perhaps a flag to turn the feature off in section navigation and/or pages.

Sample images

More images in the linked Google Doc above.
image
image
imageimage
image
image

@bedroesb
Copy link
Member

@PhilReedData Hey! Sorry it took so long to look at your pull request. I played around with some bootstrap classes. Could you have a look in how it behaves on your deployment?

@PhilReedData
Copy link
Contributor Author

Thanks, I certainly will try that locally. Which remote call should I use now? To a particular tag/release of ETT?

@bedroesb
Copy link
Member

this is your branch still !

@bedroesb
Copy link
Member

@PhilReedData remote_theme: PhilReedData/[email protected]

@PhilReedData
Copy link
Contributor Author

Excellent, thank you. This is working really well for me.
image
image

image
image

@bedroesb
Copy link
Member

bedroesb commented Nov 22, 2024

I don't think you have pulled the latest version of your branch? can you check?

Sorry something behaved different than I expected, you do have the latest version , let me check!

@PhilReedData
Copy link
Contributor Author

Ah okay. I thought I had a later version because of the way the logo appears above the heading on the mobile view, that's changed from my code (changed for the better).

@bedroesb
Copy link
Member

@phil, can you point me to a place/branch where you try out the FAIRDOM Seek website with this version of the theme? The second screenshot show the logo to be be squeezed for example. and I think I want to play a little bit more with the spacings.

@PhilReedData
Copy link
Contributor Author

@bedroesb
Copy link
Member

bedroesb commented Dec 4, 2024

@PhilReedData I just discovered where I got confused. You are manually overwriting on the FAIRDOM website, the _includes/section-navigation-tiles.html. If you delete that one you can see my new version.

@bedroesb
Copy link
Member

bedroesb commented Dec 4, 2024

I think most of the weird thing are gone now:

image

image

@bedroesb
Copy link
Member

bedroesb commented Dec 4, 2024

It's still giving me trouble with the TOC, Maybe we should make use of the TOC and put it above?

image

@PhilReedData
Copy link
Contributor Author

I deleted the local 'section-navigation-tiles.html' file, I don't know why we had that. Your code appears to be working now.
image
image

That is a good point about the TOC, I didn't think of that. Yes, putting it within the column of the TOC at the top sounds wise, the same (max) width. Is that a conditional statement? to include the logo where it is, unless there is a TOC in which case put it there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Allow the inclusion of page image metadata to be displayed in the section navigation tiles
2 participants