These are the tools currently in use:
- Vuejs
- Jquery Packery with masonry layout
The project involves creating a page that pulls content from JSON and fills the homepage with posts, products, and pages in a single loop. Each object in the loop is arranged by date using lodash and added to the page whenever a user generates a new post, product, or page in the backend.
Clicking on a product triggers the display of information and a content box next to its container with product details. To achieve this interaction effect, only divs at the far left and right of the rows need to be targeted. Vue JS is used for rendering the content within a component. The following illustration depicts the current setup:
https://i.sstatic.net/QSNsh.jpg
The aim is to specifically target CSS properties on items situated at the extreme ends of the middle column. However, due to dynamic content flowing from left to right, ensuring accurate selection poses a challenge.
Below is the HTML markup being utilized:
<div id="start-grid">
<div class="grid__item grid_item-home large--one-third medium--one-whole no-padding" v-for="(key, index) in productsOrderBy" :class="{ influence: productsOrderBy[index].influence === true, about: productsOrderBy[index].about === true, product_item: productsOrderBy[index].vendor}">
<div v-if="productsOrderBy[index].vendor" class="shop-item">
<router-link v-bind:data-id="productsOrderBy[index].id" :to="'/products/'+ index" active-class="active" class="product grow">
<div class="inner-container relative">
<div class="pad-normal absolute top-0 left-0 z-2 large--one-whole product-color product-info">
<p class="univers uppercase smaller body-size">
Shop
</p>
<p class="lyon-text">{{productsOrderBy[index].title}}</p>
<p class="univers uppercase smaller body-size buy">
Buy now
</p>
</div>
<div @click="setActive($event)" v-bind:data-id="productsOrderBy[index].id" class="z-1 relative gallery grow" v-bind:id="productsOrderBy[index].id">
<img class="scale-with-grid archives-image" v-bind:src="productsOrderBy[index].images[0].src" v-bind:alt="productsOrderBy[index].images[0].id">
</div>
</div>
<transition
v-if="$route.params.id == index"
appear
name="slide-fade">
<div class="absolute z-3 top-0 grid__item large--one-whole card">
<router-view :key="$route.params.id"></router-view>
</div>
</transition>
</router-link>
</div>
<div v-else-if="productsOrderBy[index].about" :style="{ 'background-color': '+productsOrderBy[index].tags+' }" class="inner-container relative blog-index__block" :data-color="productsOrderBy[index].tags">
<div @click="playVideo($event)" class="pad-normal z-1 large--one-whole">
<p class="univers uppercase smaller body-size">
{{ productsOrderBy[index].title }}
</p>
<p class="lyon-text" v-html="productsOrderBy[index].content.html">
{{ productsOrderBy[index].content.html }}
</p>
</div>
</div>
<div v-else class="inner-container relative blog-index__block" :data-color="productsOrderBy[index].tags">
<div class="pad-normal z-1 large--one-whole">
<p class="univers uppercase smaller body-size">
Influence
</p>
<p class="lyon-text">
{{ productsOrderBy[index].title }}
</p>
</div>
<img class="scale-with-grid archives-image" v-bind:src="productsOrderBy[index].media.image">
</div>
</div>
</div>
I'm seeking advice on achieving this functionality. I've considered nth-child and nth-of-type selectors but they don't work due to the dynamic nature of the content. Therefore, I believe utilizing JavaScript to count items may offer a solution.