Issue with Hero background image size & position and Hero Slider

jamestagal commented 2 years ago

Hello @jimafisk I wonder whether you could please have a look at the background image in the hero section for me? It's size doesn't match that of the example site and it is index is wrong. I mean it is sitting over of section below whereas it should sit below.

The hero background image size of the example site is 1904x827 while currently on mine its 1904x1401

When look at the Javascript file, I see some code that refers to background images, see below. So I wonder if that is causing the issue?

  // Background-images
  $('[data-background]').each(function () {
    $(this).css({
      'background-image': 'url(' + $(this).data('background') + ')'
    });
  });

https://github.com/themefisher/educenter-hugo/blob/19840d74ab6cd6b1abedc6c4c7dd3a977cd54161/assets/js/script.js#L25-L30

Also could you help me with the Javascript for the Hero slider. I'm not sure how to approach implementing it. I see in the head tag of the html that there is reference to slick CSS but why then is there CSS properties in the Javascript file as below?

  //Hero Slider
  $('.hero-slider').slick({
    autoplay: true,
    autoplaySpeed: 7500,
    pauseOnFocus: false,
    pauseOnHover: false,
    infinite: true,
    arrows: true,
    fade: true,
    prevArrow: '<button type=\'button\' class=\'prevArrow\'><i class=\'ti-angle-left\'></i></button>',
    nextArrow: '<button type=\'button\' class=\'nextArrow\'><i class=\'ti-angle-right\'></i></button>',
    dots: true
  });
  $('.hero-slider').slickAnimation();

https://github.com/themefisher/educenter-hugo/blob/19840d74ab6cd6b1abedc6c4c7dd3a977cd54161/assets/js/script.js#L32-L45

Cheers, Ben

jimafisk commented 2 years ago

Hi @jamestagal!

It looks like you've done a good job of getting the markup and classes to match the demo site. I'm seeing various discrepancies in the display as well. I think it's because the hugo theme is using an older version of bootstrap (v4.4.1), while your plenti theme is using a newer version (v5.2.0). I tried reverting this in your <head> but still had style issues, they must be modifying it in there asset pipeline.

I'm able to get this closer to the demo site by just copying their styles directly over (https://github.com/jamestagal/plenti-educenter/pull/4/files). This is a little messy, so if I were approaching this from the perspective of making the theme more sustainable I'd probably rewrite these styles from scratch. Adding libraries can quickly bloat the application if you're not careful. The global.css file is currently 17,836 lines (includes the modified bootstrap), but I bet this could be rewritten with the exact same visual frontend in under 1,000 lines. It just would unfortunately take more time than I have at the moment to do that.

You could also try to track down why our bootstrap 4.4.1 doesn't look like their modified output. That might be a nice middle ground of making things more sustainable by abstracting the library again, without having to rewrite everything from scratch.

For my reference: Hugo theme: https://github.com/themefisher/educenter-hugo Demo site: https://demo.gethugothemes.com/educenter/

jamestagal commented 2 years ago

Hi @jimafisk Oh ok. Yes that's a bit of an issue with such as large CSS file. I will look at the the bootstrap version issue. Perhaps going with a more lightweight theme could be less time consuming. This web designer, Sadee, has a few nice education templates. Just a thought. See below. EduHome Demo site: https://codewithsadee.github.io/eduhome/ On Github https://github.com/codewithsadee/eduhome or Educator Source code: https://www.patreon.com/posts/source-code-60993085?utm_medium=clipboard_copy&utm_source=copy_to_clipboard&utm_campaign=postshare On Youtube: https://www.youtube.com/watch?v=1ygRRP-y9pw&t=90s or EduLand Demo site: https://codewithsadee.github.io/eduland/# Source code: https://github.com/codewithsadee/eduland

Also please see my previous issues I posted when you get time. Thanks. https://github.com/jamestagal/plenti-fitlife/issues/1 and https://github.com/jamestagal/edtechdesigner/issues/33

Ben

jamestagal commented 2 years ago

Hi @jimafisk After merging and pulling your pull request I am seeing some minor change. Now I can see the title text info on blog page and on individual post pages. That is progress! see below.

Question: What is the global.css_OFF file? What is its purpose?

Questions: After pulling this change from Github, I am getting some strange behaviour where the app is in a constant 'serve' cycle..I mean it builds without me making any change or saving. Also from the short screen capture you can see blogfolder within the Public folder appearing and then disappearing after or before each build! I haven't seen that behaviour before! Scary!

https://user-images.githubusercontent.com/6309595/188257976-3157318c-a23e-4c9c-9894-5e383273b467.mov

Question: How could I have multiple featured posts? I am up to your Youtube video: Plenti Bigspring: Part 16 (Featured Post) and have successfully added one featured post but the theme has 3 in the aside section. Would I add 3 different keys in each post-json file ? such as featured1 : true, featured2: true and featured3: true or is there any better approach?

See in the svelte file below. https://github.com/jamestagal/plenti-educenter/blob/main/layouts/content/blog.svelte or In Demo site in Featured Article section - https://demo.gethugothemes.com/educenter/site/blog/

UPDATE: I am thinking that as these features articles are placed within the aside on many different pages (blog, and individual post pages) I could create a featured component and then export the properties into each page as I need them? After that, this could also be replicated for the categories and tags which are also in the aside. Ben

jimafisk commented 2 years ago

Hi @jamestagal,

The EduHome, Educator and EduLand sites are nice! I think the EduCenter site could be done in a lightweight way as well, might just take some sussing out of the CSS libraries to simplify things.

Yeah that PR gets things looking better, the downside is it pulls the whole modified Bootstrap 4.4.1 library into the custom assets/global.css file and makes it really long - probably not the most desirable thing to do for sustainability (could make updates in the future more burdensome).

Question: What is the global.css_OFF file? What is its purpose?

That was just the old CSS file that you had originally created. It's not being referenced at all in the new PR, so you could just delete it if you want.

Questions: After pulling this change from Github, I am getting some strange behaviour where the app is in a constant 'serve' cycle

That is really weird, maybe it has something to do with that file being so long if the filesystem is only loading part of it initially, so fsnotify thinks it has changed. I'm really not sure though, what operating system are you using again?

Question: How could I have multiple featured posts?

This depends on how you want it implemented. Can you point to which page specific on the demo site has a featured post? You can list all upcoming posts by default, the "featured post" is typically if you want to pull a post to the front that is not necessarily one of the upcoming posts. I expect you would only need one featured key in each post, and you would change how you handle this in the template that's displaying the posts.

I am thinking that as these features articles are placed within the aside on many different pages (blog, and individual post pages)

Is this for something like the "Related Course" section on individual blog posts? You could create some sort of entity reference field where a post has an array of other post filenames that it's related to. I might opt for simply defining a list of tags instead and then related posts could just share common tags though.

jamestagal commented 2 years ago

Hi @jimafisk Thanks for replying. I am still feeling my way with all of this hence all the questions and uncertainty. :)

what operating system are you using again?

I am on MacOS (Monterey). By the way, I am refurbishing my old 2011 MacBook Pro and thought I would like to try Linux on it for something different. I see you have a series of videos on Ubuntu, would you recommend it still? when doing some research I see some people spruiking Pop OS and others but would be interested to know your take. But I think Ubuntu is probably just fine for a beginner like me.

Can you point to which page specific on the demo site has a featured post?

Actually, I have noticed that the routes are hidden on that demo site and not sure how they do that....Anyway, if you navigate to the Blog link in the nav and then scroll down, you will see the 3 Latest Articles on the right hand side. See below.

Also you can find the Categories and Tags on this page. Cheers, Ben

jimafisk commented 2 years ago

I am on MacOS (Monterey).

Ahh, yes I think there's a bug with fsnotify on mac. It does seem to be editor dependent though. Are you using a text editor like VSCode or command line text editor like Vim?

I see you have a series of videos on Ubuntu, would you recommend it still?

I still really like Ubuntu, but use the Unity desktop that you have to install yourself (it's easy!). I got used to it years ago and it's ingrained in my muscle memory so that's probably why I still use it, but I find that its ergonomics for keyboard shortcuts are unmatched. I don't like the default Gnome desktop that Ubuntu ships with these days nearly as much.

I see some people spruiking Pop OS

@stephanieluz uses this on her System76 laptop and seems to like it. I use her laptop from time to time and it reminds my of Gnome which is fine, but I just don't like it as much as Unity. Again, I'm probably just set in my ways, I've convinced a few people to switch to linux and they love Gnome / PopOS. My hunch is that most folks with have a preference for whatever OS they learn first.

you will see the 3 Latest Articles on the right hand side

So "latest" can be handled different than "featured." For this we basically need to pull all the articles, sort them, then just show the first 3. You can get the content of a specific type (let's call them articles in this example):

<script>
  export let allContent;
  let articles = allContent.filter(content => content.type === "article");

  const sortByDate = (items, order) => {
    items.sort((a, b) => { 
      // Must have field named "date" in content source to work.
      let dateA = new Date(a?.fields?.date);
      let dateB = new Date(b?.fields?.date);
      return (order == "oldest") ? (dateA - dateB) : (dateB - dateA);
    });
    return items;
  };
</script>

{#each sortByDate(articles) as article, i}
  {#if i < 3}
    <div>{article.filename}</div>
  {/if}
{/each}

(this is pseudo code that I haven't actually checked, but hopefully gives you an idea of how to get started)

jamestagal commented 2 years ago

Hi @jimafisk Thanks for all that info

Are you using a text editor like VSCode or command line text editor like Vim?

Yes I use VSCode.

Thank you providing all that information. I am keen to try out Linux and Unity Desktop does look good. I really like the System76 laptops. They look to be very premium and they have the benefit of being build to run Linux with PopOS (and others), expandable, fixable and I see they actively support an open ecosystem using CoreBoot. I will definitely consider one when I upgrade.

I will have a go at implementing the sort code for articles described above.

Thanks again Jim

jamestagal commented 2 years ago

Hi @jimafisk

I am trying to get this sort functionality to work on the blog page blog.svelte but can't get it to work. Here's my code within the aside. See the function logic as you had it but I added one more key publish to date as this is how I set it up. See those two lines:

        let dateA = new Date(a?.fields?.publish?.date);
        let dateB = new Date(b?.fields?.publish?.date);

I have only tried adding the sortByDate part to the first of the 3 latest posts. And only get back the two not included in that logic! :blush:

<div class="bg-white">
                    <h4 class="mb-4">Latest Article</h4>
                    {#each allContent.filter(content => content.fields?.featured) as post}
                        {#each sortByDate(articles) as article, i}
                        {#if i < 3}
                        <div>{article.filename}</div>
                            <div class="media border-bottom border-color pb-3 mb-3">
                                <a href="{post.path}}"><img class="mr-3 post-thumb-sm" src="/assets/{post.fields.image.source}" alt="{post.fields.image.alt}"></a>
                                <div class="media-body">
                                <a href="{post.path}">
                                <h5 class="mt-0">{post.fields.title}</h5>
                                </a>
                                {post.fields.publish.date}
                                </div>
                            </div>
                        {/if}
                        {/each}
                        <div class="media border-bottom border-color pb-3 mb-3">
                            <a href="{post.path}}"><img class="mr-3 post-thumb-sm" src="/assets/{post.fields.image.source}" alt="{post.fields.image.alt}"></a>
                            <div class="media-body">
                            <a href="{post.path}">
                            <h5 class="mt-0">{post.fields.title}</h5>
                            </a>
                            {post.fields.publish.date}
                            </div>
                        </div>
                        <div class="media border-bottom border-color pb-3 mb-3">
                            <a href="{post.path}}"><img class="mr-3 post-thumb-sm" src="/assets/{post.fields.image.source}" alt="{post.fields.image.alt}"></a>
                            <div class="media-body">
                            <a href="{post.path}">
                            <h5 class="mt-0">{post.fields.title}</h5>
                            </a>
                            {post.fields.publish.date}
                            </div>
                        </div>
                    {/each}
                </div>

Pls have a look when you can. Regards, Ben

jimafisk commented 2 years ago

Hi @jamestagal, can you add me as a collaborator on this repo? It's just easier for me to push changes directly, than to fork it and create a PR from a separate repo. Thanks!

jimafisk commented 2 years ago

This should work:

<div class="bg-white">
    <h4 class="mb-4">Latest Articles</h4>
    {#each sortByDate(allContent.filter(content => content.type === "posts")) as post,i}
        {#if i < 3}
            <div class="media border-bottom border-color pb-3 mb-3">
                <a href="{post.path}}"><img class="mr-3 post-thumb-sm" src="/assets/{post.fields.image.source}" alt="{post.fields.image.alt}"></a>                                                                                                    
                <div class="media-body">
                <a href="{post.path}">  
                <h5 class="mt-0">{post.fields.title}</h5>
                </a>
                {post.fields.publish.date}
                </div>
            </div>    
        {/if}
    {/each}  
</div>

This will show the events with the furthest date out first.

See screenshot

![latest_events](https://user-images.githubusercontent.com/5913244/191057685-bcb83877-5c2c-410a-89d8-5fba1f9dd738.png)

If you instead want the oldest, or events happening soonest, you can reverse the order like:

{#each sortByDate(allContent.filter(content => content.type === "posts"), "oldest") as post,i}

You'll have to do some additional date checking if you don't want to show any events that happened in the past.

jamestagal commented 1 year ago

Hi @jimafisk I am trying to modify the component file news.svelte to get the post data to display on the index page like we did with the blog.svelte above, having dynamic data coming from the 3 latest posts. So I have updated all posts.json files with the required fields and then removed the unnecessary data keys/fields from the index.json . See my recent commits.

All is good here and I don't get any errors in the code but It fails to build with the following message:

❯ plenti serve
███████▒▒▒ Building... 2022/09/25 20:22:20 build.go:154: 
Error in DataSource build step
Can't create props for content/index.json 
Can't render htmlComponent for layouts_content_index_svelte
TypeError: Cannot read property 'filter' of undefined
    at create_ssr:13:28
    at Object.$$render (create_ssr:1555:22)
    at create_ssr:13:168
    at each (create_ssr:1521:16)
    at create_ssr:13:12
    at Object.$$render (create_ssr:1555:22)
    at create_ssr:27:73
    at $$render (create_ssr:1555:22)
    at Object.render (create_ssr:1563:26)
    at create_ssr:1:58

It refers to the filter being undefined in layouts/content/index.svelte. Does that mean I need to declare it in this file?

Also by doing this, I see that there is duplication of the sortByDate function now in two files: blog.svelte and news.svelte so would it be better to separate this function out into its own component or scripts file and then just import the function logic into wherever it is required?

Ben

jimafisk commented 1 year ago

Hi @jamestagal,

The TypeError: Cannot read property 'filter' of undefined error was happening because the allContent magic prop wasn't actually getting passed to the component that was using it. I adjusted this so it's being passed to layouts/components/news.svelte from layouts/content/index.svelte.

I was also seeing this error related to the import Posts from './posts.svelte'; declarations you had in a couple of files:

Error in Gopack build step
Can't runPack on public/spa/ejected/router.js 
Can't runPack on public/spa/ejected/main.js 
Can't runPack on public/spa/ejected/layouts.js 
Can't runPack on public/spa/components/news.js 
Can't runPack on public/spa/posts.js 
Could not read file public/spa/posts.js to convert to esm
open public/spa/posts.js: no such file or directory

That's typically used to pull in a layout directly (in our case we only need the content). The error was happening because it wasn't able to resolve the path from the components folder. It would have needed to be something like import Posts from '../content/posts.svelte';, but we don't need it so I removed it completely.

I'm also working on a pre-release of Plenti where we rename _blueprint.json (https://github.com/plentico/plenti/issues/218) so I've removed that file to avoid a future error that you would run into:

Error in DataSource build step
Can't create props for content/blog.json 
Can't render htmlComponent for layouts_content_blog_svelte
TypeError: Cannot read property 'source' of undefined

jamestagal commented 1 year ago

Hi @jimafisk This is awesome! Thank you. Much appreciated!

I see that I also have to add the "Latest Articles" is all post pages. Do you think a good way to approach this is to put the following code that is within the blog.svelte file into a separate component and use a Svelte slot to share it into both posts.svelte and blog.svelte files?

{#each sortByDate(allContent.filter(content => content.type === "posts")) as post,i}
    {#if i < 3}
        <div class="media border-bottom border-color pb-3 mb-3">
            <a href="{post.path}}"><img class="mr-3 post-thumb-sm" src="/assets/{post.fields.image.source}" alt="{post.fields.image.alt}"></a>
            <div class="media-body">
            <a href="{post.path}">
            <h5 class="mt-0">{post.fields.title}</h5>
            </a>
            {post.fields.publish.date}
            </div>
        </div>
    {/if}
{/each}

jimafisk commented 1 year ago

Putting it in a separate component is a good idea! I think you could accomplish this without needing a slot though. Just pass the allContent object to the component and then handle it in the component itself:

<script>
  import LatestArticles from '../components/latest_articles.svelte';
  export let allContent;
</script>

<LatestArticles {allContent} />

Then in layouts/components/latest_articles.svelte:

<script>
  export let allContent;
</script>

<aside class="col-lg-4 order-1 order-lg-2"> 
  <div class="bg-white">
    <h4 class="mb-4">Latest Articles</h4>
    {#each sortByDate(allContent.filter(content => content.type === "posts")) as post,i}
      {#if i < 3}
        <div class="media border-bottom border-color pb-3 mb-3">
        <a href="{post.path}}"><img class="mr-3 post-thumb-sm" src="/assets/{post.fields.image.source}" alt="{post.fields.image.alt}"></a>
         <div class="media-body">
           <a href="{post.path}">
             <h5 class="mt-0">{post.fields.title}</h5>
           </a>
           {post.fields.publish.date}
          </div>
        </div>
      {/if}
    {/each}
  </div>
</aside>

jamestagal commented 1 year ago

Hi @jimafisk , You're a champion! Thank you for that....Yes your magic allContent prop is allPowerful! That worked a treat! I just needed to also import sortByDate into the layouts/components/latest_articles.svelte file for it to work! Then I was also able to remove that import statement from blog.svelte as it wasn't referenced there any longer!

import { sortByDate } from '../scripts/sortByDate.svelte';

We're slowing making progress Jim. I can't thank you enough for all this help.

I plan to move on to Plenti Bigspring: Part 17 (Pagination) BTW. These videos are a god send for helping me understand the basic workflow! I watch them multiple times :blush: Then add all other pages and tackle tags and categories.

Thanks again Jim. Ben

jimafisk commented 1 year ago

Yes your magic allContent prop is allPowerful!

:rofl:

I just needed to also import sortByDate into the layouts/components/latest_articles.svelte file for it to work!

Good catch!

These videos are a god send for helping me understand the basic workflow!

I'm glad to hear they're helpful! I'll need to make an updated series soon, to show some of the changes and CMS functionality.

jamestagal commented 1 year ago

Hi @jimafisk , Yes creating an updated series would be great... you've made a lot of process with the CMS since then. If there is anything i can do please let me know and I'll try my best to help.☺️

jamestagal commented 1 year ago

Hi @jimafisk How are you ?

I would like to ask for your help with understanding how to convert this tab component from the Javascript to a Svelte way to work in Plenti. After some research, I have come up with the following but it isn't working! 😊

<script>
let openTab = 1
function toggleTabs(tabNumber){
    openTab = tabNumber
}
</script>

I have only added the code to 2 list items below to get the ideas.

But in summary, I assigned the openTab with a number in each button then passed the on:click event and toggleTabs function. For instance;

<button class="filter-btn {openTab === 1 }" on:click={() => toggleTabs(1)}

Then, in the grid-list section, assigned each openTab a number to each block in the class.

 <li data-filter="shaving" style="display: block;" class="active {openTab === 1 ? 'block':'hidden'}">

I have only added the code to 2 list items below to get the ideas.

<section class="section pricing has-bg-image has-before" id="pricing" aria-label="pricing"
        style="background-image: url('./assets/images/pricing-bg.jpg')">
        <div class="container">

          <h2 class="h2 section-title text-center">Awesome Pricing Plan</h2>

          <p class="section-text text-center">
            Sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt labore dolore magna aliqua suspendisse
          </p>

          <div class="pricing-tab-container">

            <ul class="tab-filter">

              <li>
                <button class="filter-btn {openTab === 1 }" on:click={() => toggleTabs(1)} " data-filter-btn="all">
                  <div class="btn-icon">
                    <i class="flaticon-beauty-salon" aria-hidden="true"></i>
                  </div>

                  <p class="btn-text">All Pricing</p>
                </button>
              </li>

              <li>
                <button class="filter-btn {openTab === 2 }" on:click={() => toggleTabs(2)} " data-filter-btn="beauty-spa">
                  <div class="btn-icon">
                    <i class="flaticon-relax" aria-hidden="true"></i>
                  </div>

                  <p class="btn-text">Beauty & Spa</p>
                </button>
              </li>

              <li>
                <button class="filter-btn" data-filter-btn="body-treatments">
                  <div class="btn-icon">
                    <i class="flaticon-massage" aria-hidden="true"></i>
                  </div>

                  <p class="btn-text">Body Treatments</p>
                </button>
              </li>

              <li>
                <button class="filter-btn" data-filter-btn="face-washing">
                  <div class="btn-icon">
                    <i class="flaticon-spa" aria-hidden="true"></i>
                  </div>

                  <p class="btn-text">Face Washing</p>
                </button>
              </li>

              <li>
                <button class="filter-btn" data-filter-btn="meditations">
                  <div class="btn-icon">
                    <i class="flaticon-yoga" aria-hidden="true"></i>
                  </div>

                  <p class="btn-text">Meditations</p>
                </button>
              </li>

              <li>
                <button class="filter-btn" data-filter-btn="shaving">
                  <div class="btn-icon">
                    <i class="flaticon-razor-blade" aria-hidden="true"></i>
                  </div>

                  <p class="btn-text">Shaving</p>
                </button>
              </li>

            </ul>

            <ul class="grid-list">

              <li data-filter="shaving" style="display: block;" class="active {openTab === 1 ? 'block':'hidden'}">
                <div class="pricing-card">

                  <figure class="card-banner img-holder" style="--width: 90; --height: 90;">
                    <img src="./assets/images/pricing-1.jpg" width="90" height="90" alt="Hair Cutting & Fitting"
                      class="img-cover">
                  </figure>

                  <div class="wrapper">
                    <h3 class="h3 card-title">Hair Cutting & Fitting</h3>

                    <p class="card-text">Clean & simple 30-40 minutes</p>
                  </div>

                  <data class="card-price" value="89">$89</data>

                </div>
              </li>

              <li data-filter="shaving" style="display: block;" class="{openTab === 2 ? 'block':'hidden'}">
                <div class="pricing-card">

                  <figure class="card-banner img-holder" style="--width: 90; --height: 90;">
                    <img src="./assets/images/pricing-2.jpg" width="90" height="90" alt="Shaving & Facial"
                      class="img-cover">
                  </figure>

                  <div class="wrapper">
                    <h3 class="h3 card-title">Shaving & Facial</h3>

                    <p class="card-text">Clean & simple 30-40 minutes</p>
                  </div>

                  <data class="card-price" value="45">$45</data>

                </div>
              </li>

              <li data-filter="face-washing">
                <div class="pricing-card">

                  <figure class="card-banner img-holder" style="--width: 90; --height: 90;">
                    <img src="./assets/images/pricing-3.jpg" width="90" height="90" alt="Hair Color & Wash"
                      class="img-cover">
                  </figure>

                  <div class="wrapper">
                    <h3 class="h3 card-title">Hair Color & Wash</h3>

                    <p class="card-text">Clean & simple 30-40 minutes</p>
                  </div>

                  <data class="card-price" value="35">$35</data>

                </div>
              </li>

              <li data-filter="body-treatments">
                <div class="pricing-card">

                  <figure class="card-banner img-holder" style="--width: 90; --height: 90;">
                    <img src="./assets/images/pricing-4.jpg" width="90" height="90" alt="Body Massage"
                      class="img-cover">
                  </figure>

                  <div class="wrapper">
                    <h3 class="h3 card-title">Body Massage</h3>

                    <p class="card-text">Clean & simple 30-40 minutes</p>
                  </div>

                  <data class="card-price" value="56">$56</data>

                </div>
              </li>

              <li data-filter="beauty-spa">
                <div class="pricing-card">

                  <figure class="card-banner img-holder" style="--width: 90; --height: 90;">
                    <img src="./assets/images/pricing-5.jpg" width="90" height="90" alt="Beauty & Spa"
                      class="img-cover">
                  </figure>

                  <div class="wrapper">
                    <h3 class="h3 card-title">Beauty & Spa</h3>

                    <p class="card-text">Clean & simple 30-40 minutes</p>
                  </div>

                  <data class="card-price" value="27">$27</data>

                </div>
              </li>

              <li data-filter="face-washing">
                <div class="pricing-card">

                  <figure class="card-banner img-holder" style="--width: 90; --height: 90;">
                    <img src="./assets/images/pricing-6.jpg" width="90" height="90" alt="Facial & Face Wash"
                      class="img-cover">
                  </figure>

                  <div class="wrapper">
                    <h3 class="h3 card-title">Facial & Face Wash</h3>

                    <p class="card-text">Clean & simple 30-40 minutes</p>
                  </div>

                  <data class="card-price" value="63">$63</data>

                </div>
              </li>

              <li data-filter="body-treatments">
                <div class="pricing-card">

                  <figure class="card-banner img-holder" style="--width: 90; --height: 90;">
                    <img src="./assets/images/pricing-7.jpg" width="90" height="90" alt="Backbone Massage"
                      class="img-cover">
                  </figure>

                  <div class="wrapper">
                    <h3 class="h3 card-title">Backbone Massage</h3>

                    <p class="card-text">Clean & simple 30-40 minutes</p>
                  </div>

                  <data class="card-price" value="43">$43</data>

                </div>
              </li>

              <li data-filter="meditations">
                <div class="pricing-card">

                  <figure class="card-banner img-holder" style="--width: 90; --height: 90;">
                    <img src="./assets/images/pricing-8.jpg" width="90" height="90" alt="Meditation & Massage"
                      class="img-cover">
                  </figure>

                  <div class="wrapper">
                    <h3 class="h3 card-title">Meditation & Massage</h3>

                    <p class="card-text">Clean & simple 30-40 minutes</p>
                  </div>

                  <data class="card-price" value="74">$74</data>

                </div>
              </li>

            </ul>

          </div>

        </div>
      </section>

I must be missing something here. I know in this example the first tab shows all content from all prices but I was trying to get the basic functionality of one tab opening showing its corresponding content because I wanted to adapt this tab functionality and not necessarily show all in one tab. Ben

Update: I think I am missing the an event on the object? I see in this article using import Event Dispatcher like this,

   import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();

and in the template.

            <li on:click={() => dispatch('tabChange', item)}>
                <div class:active={item===activeItem}>{item}</div>
            </li>

I'n not sure how to do this. Ben

jimafisk commented 1 year ago

Hi @jamestagal,

Are you building out a new theme, or trying to copy a feature from the Barber theme into the Educenter theme? I don't think you'll need an event dispatcher for this, you could probably use a for loop with an if statement inside of it. Is there a repo with this code in it that I could take a look at? Thanks!

jamestagal commented 1 year ago

Hi @jimafisk Actually I was exploring a possible update to your Plenti.co site. 😊 https://github.com/jamestagal/plenti So I was wanting to use that tabs component from that Barber site to showcase Plenti's features. Also I thought having animated gifs in the content section below the tabs would really illustrate its features. I have added you as collaborator.
A couple of things. I was really wanting to make more of (emphasise ) the unique feature of Plenti, of editing your content on the page so I thought having your cool laptop gif more prominent would be highlight this more. The only issue I see as an issue is that the gif is very small and when it is large on the page it is pixelated. Let me know what you think so far! Ben

jimafisk commented 1 year ago

Wow it's looking awesome @jamestagal!

I had created that animated laptop gif a while back using inkscape and synfig: https://youtu.be/776j217f82s. I'll take a look through my assets to see if I can find those source files somewhere.

Thanks for adding me as a collaborator! I'm catching up on some client work this week so I may not be able to contribute for a bit, but will try to take a closer look soon!

jamestagal / plenti-educenter

Issue with Hero background image size & position and Hero Slider #3