I’ve been setting up Tainacan, but have ran into some customization issues.
Here’s what I’m trying to do:
I would like to have a main page for each collection that includes a description with light formatting (paragraphs, bold, lists, links).
Each item within the collection includes a link back to the collection’s main page.
This seems like it should be simple, but I’ve run into some issues:
The built-in description field for a Tainacan collection does not allow any formatting. That’s okay (I thought), I can just create a regular static page and add a block that lists the items. But then I can’t figure out how to add a way for the user to return from the item to that static page.
That is true. You can use <strong> and <em> tags, but that’s all. We do have plans to offer a mini editor in these area do allow more inputs. Currently, allowing more markup inside the textarea could be a security issue, so we’re holding that issue for a while.
Yes, that would be the recommended approach. You can define the page as the “Collection cover page” and inside it use the Faceted Search block to render the item list.
Now, regarding adding a link in the item page template… that depends on your theme. It should provide some breadcrumb or an option to add this link. If you are using Tainacan Interface or Blocksy (with the integration plugin) they both have breadcrumbs. A more prominent link could be added via PHP hooks. If you tell me which one are you using I can give you some code snippet for that.
This would be a great feature! This would solve my issue and I think would make the collection descriptions more attractive. (Maybe just allowing Markdown might be safer!)
But for the moment…
We are using Blocksy. I have enable the breadcrumbs, but the breadcrumb leads back to the collection page, which doesn’t have the extended description we need. Can I alter the breadcrumbs somehow to lead back to the static page that describes the collection? Would that require a code snippet?
Exactly, we’ll probably do something that allows what basic Markdown allows. But with a small wysiwyg UI for that.
Is it leading back to the collection items list even if you configure the page as the Collection cover (Tainacan Admin → Collection Settings → Enable cover page)? If yes then we would need a code snippet. Good news is Blocksy has several hooks in its code so we can add extra content in multiple places in the single item template.
Ooh, that’s a nice feature, I hadn’t noticed that!
I set up a cover for the collection, but the breadcrumb in the item takes me back to the collection items list, not the cover. (I tried creating a new item and turning the breadcrumbs on-and-off again, just in case there’s a caching thing.)
Is there a code snippet that can fix or replace that?
In addition to this issue, there’s another thing I would appreciate some help with. We’re using Tainacan to display oral history collections, by embedding OHMS Viewer through an iframe as each item’s document.
I can set the dimensions of the iframe, but then that is wrapped up in a smaller block that I can only give a relative size to (vh). I would like to be able to make that block be the exact same size as the iframe, so the user can just see the whole iframe (OHMS Viewer) without needing to scroll.
Yeah I checked here and this is the behavior now, but is should be possible, I’ll see if I add this to our pipeline as well.
If you want to just change the breadcrumbs, then this should help:
If you want to add a link somewhere else in the page, then maybe one one action would help you. For example:
function my_page_hero_custom_after_title() {
echo '<a href="www.my-collection-link.com">Back to collection</a>;
}
add_action('tainacan-blocksy-single-item-after-title', 'my_page_hero_custom_after_title');
Would add a link right after the title section of the page;
Can you share a link of a page where you are trying this? Overall my suggestion for that kind of content would be to use the Item page layout that puts the item document and attachments aside the metadata.
This way you could allow the viewer to be as height as the page.
It is a bit hard to style things that come inside iframes since their height might vary on the container. That dimensions feature that you mentioned is used to calculate the aspect ratio of the responsive wrapper that is added but the width will vary according to screen size and other stuff…
Thanks for the code snippets. As far as I understand them, they would both change (or provide) links for all collections, but I have different cover pages for different collections. So that doesn’t quite work for me. Is there a way to adjust the Blocksy breadcrumb per collection (using the first part of the slug perhaps to identify the collection?)
My temporary fix is to set up 307s (temporary redirects) to “/xyz-collection/” to “/xyz/”
As for the iframe, I understand the potential issues, but I would very much like to hardcode the height. If you can suggest a snippet for that, I would be grateful!
If I am not mistaken, you could call this function to dynamically get the current collection link (needs testing):
tainacan_get_the_collection_url()
Clever one actually… anyways, I’ll see if I find a moment to implement the expected behavior in the breadcrumb:
There might be one solution via .css or maybe we’ll need filters to disable the responsive wrapper that we add there. Just to make sure which is better, can you provide me a public link of your item page so I can do some testing in the browser?
The tnc_col_128_item_single is the item post type for collection of ID 128. You can check the collection ID in the URL when you access the admin collection area. For a more generic approach, that would affect all items from all collections:
That sets the “default” dimensions for the document area. Still if you do that you’ll notice that in smaller screens, the scrollbar will appear… so if you dig into the HTML you’ll see that there is one DIV:
This div, alongside it’s parent, allow us to build responsive iframes. It detects, based on the width and height values that you set on the document settings, which is the approximate aspect ratio (1/2 in this case). So if you’re in a container smaller than the width set, it proportionally adjusts width and height. This is how YouTube Does. That only works for a known set of aspect ratios, however. So to get rid of this, it will be a bit more hacky:
After a bit of tweaking, I got a solution that seems adequate. I settled on using 600x1200px for the iframe and scoping the CSS to the specific collection, which uses that iframe. I’ll have to add additional selectors for any further such collections we add, but that’s not a problem.
Since it’s in a 1:2 aspect ratio I thought it might work without all this finagling, but anyway, I’m glad it works!
You can subscribe to the GitHub issue. Once it is solved I’ll close it. We’re a bit busy with other stuff right now but one day I’ll take a look at it.
@mateus.m.luna I uploaded the theme to /wp-content/themes and in the WP dashboard activated “Tainacan Support for Blocksy”. This resulted in breaking the site with this message: “There has been a critical error on this website.”
I’m new to WordPress, so do let me know if there’s something else I should’ve done instead
I hope you have access to your folder, I believe you do… if yes, then you can remove tainacan-blocksy from /wp-content/themes and then move it to wp-content/plugins. Let me know if this solves!
Yes, the breadcrumbs now support the cover page! That’s great, thank you!
On a somewhat related note, there are 2 pages with identical content:
https://repository.amicalnet.org/voices-of-pashtun-students/ (the original static page)
https://repository.amicalnet.org/collections/voices-of-pashtun-students-collection/ (a page created when I use the cover feature)
I’m not sure why the second page needs to be created at all, but thankfully its metadata points to the canonical URL (the first one), so it’s not really a problem. I just found it odd.
The second page “exists by default” in the WordPress permalinks structure it is the post type template/archive. We keep it accessible because the user may be interested on using the cover page to merely introduce some of the items using blocks and then leave a link to the full, complete faceted search list.
