# Help with structuring a Tainacan site

**URL:** <https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816>\
**Category:** Geral\
**Created:** [Março 21, 2024, 5:06pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816 "2024-03-21T17:06:47Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![alehandrof](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/alehandrof/32/2230_2.png) [@alehandrof](https://tainacan.discourse.group/u/alehandrof)\
**Post date:** [Março 21, 2024, 5:06pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/1 "2024-03-21T17:06:47Z")

</div>

Hi folks,

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.

Any help would be much appreciated! 🙂

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Março 21, 2024, 8:45pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/2 "2024-03-21T20:45:43Z")

</div>

Hi @alehandrof, welcome to our forum!

> [@alehandrof](#):
>
> The built-in description field for a Tainacan collection does not allow any formatting.

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.

> [@alehandrof](#):
>
> 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.

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.

---

<div class="post-metadata">

**Author:** ![alehandrof](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/alehandrof/32/2230_2.png) [@alehandrof](https://tainacan.discourse.group/u/alehandrof)\
**Post date:** [Março 22, 2024, 8:37am UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/3 "2024-03-22T08:37:44Z")

</div>

> [@mateus.m.luna](#):
>
> 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.

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…

> [@mateus.m.luna](#):
>
> 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.

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?

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Março 22, 2024, 11:37am UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/4 "2024-03-22T11:37:43Z")

</div>

> [@alehandrof](#):
>
> Maybe just allowing Markdown might be safer!

Exactly, we’ll probably do something that allows what basic Markdown allows. But with a small wysiwyg UI for that.

> [@alehandrof](#):
>
> I have enable the breadcrumbs, but the breadcrumb leads back to the collection page, which doesn’t have the extended description we need.

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.

---

<div class="post-metadata">

**Author:** ![alehandrof](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/alehandrof/32/2230_2.png) [@alehandrof](https://tainacan.discourse.group/u/alehandrof)\
**Post date:** [Março 22, 2024, 12:06pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/5 "2024-03-22T12:06:07Z")

</div>

Hi Mateus,

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.

Edit: this is an example of the iframe I’m trying to embed: [SAMPLE 001: Interview with Georgia Davis Powers, April 26, 2013](https://ohmsviewer.amicalnet.org/viewer.php?cachefile=OHMS-Sample-001.xml)

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Março 22, 2024, 1:56pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/6 "2024-03-22T13:56:20Z")

</div>

> [@alehandrof](#):
>
> 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.

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.

> [@alehandrof](#):
>
> Is there a code snippet that can fix or replace that?

If you want to just change the breadcrumbs, then this should help:

> **[Change breadcrumb items programatically - Blocksy](https://creativethemes.com/blocksy/docs/code-snippets/change-breadcrumb-items-programatically/)**
>
> In some cases, you might want to forcefully change the breadcrumb items via code, to make them behave just the way you want them to. A simple example snippet

If you want to add a link somewhere else in the page, then maybe one one action would help you. For example:

```php
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;

> [@alehandrof](#):
>
> 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.

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.

 ![image](https://global.discourse-cdn.com/free1/uploads/tainacan/original/2X/7/716ddba32b3592939ef7c0df7632a9f6b70c4cb0.png)

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…

---

<div class="post-metadata">

**Author:** ![alehandrof](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/alehandrof/32/2230_2.png) [@alehandrof](https://tainacan.discourse.group/u/alehandrof)\
**Post date:** [Março 26, 2024, 6:40pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/7 "2024-03-26T18:40:11Z")

</div>

Hi Mateus!

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!

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Março 26, 2024, 7:14pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/8 "2024-03-26T19:14:59Z")

</div>

> [@alehandrof](#):
>
> Is there a way to adjust the Blocksy breadcrumb per collection (using the first part of the slug perhaps to identify the collection?)

If I am not mistaken, you could call this function to dynamically get the current collection link (needs testing):

```php
tainacan_get_the_collection_url()

```

> [@alehandrof](#):
>
> My temporary fix is to set up 307s (temporary redirects) to “/xyz-collection/” to “/xyz/”

Clever one actually… anyways, I’ll see if I find a moment to implement the expected behavior in the breadcrumb:

> <https://github.com/tainacan/blocksy-tainacan/issues/15>

> [@alehandrof](#):
>
> 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!

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?

---

<div class="post-metadata">

**Author:** ![alehandrof](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/alehandrof/32/2230_2.png) [@alehandrof](https://tainacan.discourse.group/u/alehandrof)\
**Post date:** [Março 28, 2024, 1:26pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/9 "2024-03-28T13:26:23Z")

</div>

Here are two public links.

This is from our actual collection, using the side-by-side layout that you suggested: [Afrasiab Khan – AMICAL Repository [alpha]](https://repository.amicalnet.org/voices-of-pashtun-students-collection/afrasiab-khan/)

This is an example item, with the OHMS iframe placed above the metadata: [Interview with Georgia Davis Powers (April 26, 2013) – AMICAL Repository [alpha]](https://repository.amicalnet.org/oh-example/sample-001-interview-with-georgia-davis-powers-april-26-2013/)

I really appreciate all the help! 😊

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Março 28, 2024, 2:55pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/10 "2024-03-28T14:55:17Z")

</div>

There might be one or more solution to this, with different levels of complexity…But let’s see:

From my understanding, the issue with today’s options is that they can only be relative units (vh). So you could via css set it fixed:

```css
[data-prefix="tnc_col_148_item_single"] .tainacan-media-component {
  --document-height: 1200px !important;
  --document-width: 100% !important;
}

```

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:

```css
.single .tainacan-media-component {
  --document-height: 1200px !important;
  --document-width: 100% !important;
}

```

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:  
 ![image](https://global.discourse-cdn.com/free1/uploads/tainacan/original/2X/e/eac0516469e018ffc1e3840fe165322bdf87da47.png)

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:

```css
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-content-embed {
    height: 1200px !important;
    widht: 100% !important;
}
:not(.wp-block-embed__wrapper) > .tainacan-has-aspect-ratio .tainacan-content-embed__wrapper::before {
    padding-top: 0px !important;
}
:not(.wp-block-embed__wrapper) > .tainacan-content-embed .tainacan-content-embed__wrapper {
    position: initial !important;
}

```

Let me know if this helps!

---

<div class="post-metadata">

**Author:** ![alehandrof](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/alehandrof/32/2230_2.png) [@alehandrof](https://tainacan.discourse.group/u/alehandrof)\
**Post date:** [Março 28, 2024, 6:08pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/11 "2024-03-28T18:08:03Z")

</div>

Hi Mateus,

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!

The code I ended up using:

```auto
[data-prefix="tnc_col_148_item_single"] .tainacan-media-component {
  --document-height: 1200px !important;
  --document-width: 800px !important;
}

[data-prefix="tnc_col_148_item_single"] .tainacan-media-component__swiper-main .swiper-slide-content .tainacan-content-embed {
    height: 1200px !important;
    width: 100% !important;
}
[data-prefix="tnc_col_148_item_single"] :not(.wp-block-embed__wrapper) > .tainacan-has-aspect-ratio .tainacan-content-embed__wrapper::before {
    padding-top: 0px !important;
}
[data-prefix="tnc_col_148_item_single"] :not(.wp-block-embed__wrapper) > .tainacan-content-embed .tainacan-content-embed__wrapper {
    position: initial !important;
}

```

Thank you again for all of the help!

How might I find out if the issue with the breadcrumbs is resolved natively?

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Março 28, 2024, 6:11pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/12 "2024-03-28T18:11:25Z")

</div>

Glad you could find a way 😃

> [@alehandrof](#):
>
> How might I find out if the issue with the breadcrumbs is resolved natively?

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.

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Abril 2, 2024, 1:11pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/13 "2024-04-02T13:11:59Z")

</div>

@alehandrof, I’m developing that breadcrumb feature. Can you test?

> **[tainacan-blocksy.zip](https://drive.google.com/file/d/1q8QgnJJ_czlS1GPud6km-PNcZjrOYCg2/view?usp=drive_link)**
>
> Google Drive file.

In the item page, if the cover page is enabled, the link to the collection should send you to the cover page.

---

<div class="post-metadata">

**Author:** ![alehandrof](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/alehandrof/32/2230_2.png) [@alehandrof](https://tainacan.discourse.group/u/alehandrof)\
**Post date:** [Abril 2, 2024, 1:48pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/14 "2024-04-02T13:48:24Z")

</div>

@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 🙂

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Abril 2, 2024, 1:53pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/15 "2024-04-02T13:53:51Z")

</div>

Nooooo that is a plugin, not a theme 😅

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!

---

<div class="post-metadata">

**Author:** ![alehandrof](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/alehandrof/32/2230_2.png) [@alehandrof](https://tainacan.discourse.group/u/alehandrof)\
**Post date:** [Abril 2, 2024, 5:38pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/16 "2024-04-02T17:38:21Z")

</div>

Ah, sorry about the mixup.

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.

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Abril 2, 2024, 5:55pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/17 "2024-04-02T17:55:15Z")

</div>

> [@alehandrof](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![alehandrof](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/alehandrof/32/2230_2.png) [@alehandrof](https://tainacan.discourse.group/u/alehandrof)\
**Post date:** [Setembro 3, 2024, 7:15pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/18 "2024-09-03T19:15:01Z")

</div>

Hi @mateus.m.luna ! I’d like to ask if there’s any timeline on supporting rich text in the description field, or if there’s another way I could include bold and an image in there.

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Setembro 3, 2024, 11:23pm UTC](https://tainacan.discourse.group/t/help-with-structuring-a-tainacan-site/1816/19 "2024-09-03T23:23:44Z")

</div>

Hi @alehandrof!

Unfortunately we didn’t have time to put rich text in our priority queue these days, as much as I would like it.

But for bold (and italic) you can actually wrap content with `<strong>` and `</strong>` tags, that will render the inner content as bold as it is not a security issue to render this kind basic tag.

Now regarding image, then things would start to get out of the “structured data” area and start to sound more like a post content… one of our possibly-incoming big features is the attachment-type metadata which would allow having images alongside metadata. We’re just not there yet, I’m sorry.

One alternative path that I can suggest you is to build pages with Gutenberg that display non-structured data and then render both the item metadata and the item gallery using Tainacan blocks. Have you tried that? It certainly won’t be enough for a long list of items but considering the amount that you had so far in the archive it seems doable to me.