Alternative to ItemList for multiple use in single page - laravel-5.4

I am creating a job portal, and in the homepage, there are 4 sliders in it which shows the following:
slider 1: featured companies
slider 2: recommended jobs
slider 3: jobs by country
slider 4: jobs by category/secor
Common for these 4 sliders are:
background image, a header title, sub-header, and a URL
What schema should I use for these?
I have tried to use ItemList, but it seems to fail on the Google Structured Data Testing Tool.
The Error I get is this:
Multiple ItemList markups on a page are not allowed.
This is a snippet for an ItemList. The four sliders will have similar format.
#if (!empty($countries))
<div itemscope itemtype="http://schema.org/ItemList">
<h2 class="mt-5" itemprop="name">Check Out This Featured Companies</h2>
<div class="featuredCompaniesDiv mb-5 pb-5">
<div class="row mb-5">
<div class="col-xs-12">
<div class="featuredCompanies">
<?php $countriesCount = 1; ?>
#foreach($countries as $country)
<div class="featuredCompanies--item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<meta itemprop="position" content="{{ $countriesCount }}">
<meta itemprop="name" content="{{ $country->company_name }}">
<meta itemprop="url" content="{{ action('PublicController#jobsByCountry', ['country' => $country->address_format]) }}">
<a class="inner-div" href="{{ action('PublicController#jobsByCountry', ['country' => $country->address_format]) }}">
<span class="post-featured-img">
<img src="/img/spacer.png" data-lazy="/img/cnt/{{ $country->iso_code_3 }}.jpg" alt="Buick Enspire" width="700" height="323">
</span>
<h3 class="top-h3">{{ $country->name }}
#if ($country->cnt == 1)
<small>({{ $country->cnt }} Job)</small>
#else
<small>({{ $country->cnt }} Jobs)</small>
#endif
</h3>
</a>
</div>
<?php $countriesCount++; ?>
#endforeach
</div>
</div>
</div>
</div>
</div>
#endif

Found an solution to this one via https://webmasters.stackexchange.com/questions/98556/what-is-the-correct-way-to-use-the-collectionpage-type-for-a-category-page
Error's now gone.
Here's the final code:
#if (!empty($countries))
<div itemscope itemtype="http://schema.org/CollectionPage">
<h2 class="mt-5" itemprop="name">Check Out This Featured Companies</h2>
<div class="featuredCompaniesDiv mb-5 pb-5" itemprop="hasPart">
<div class="row mb-5">
<div class="col-xs-12">
<div class="featuredCompanies">
<?php $countriesCount = 1; ?>
#foreach($countries as $country)
<div class="featuredCompanies--item" itemscope itemtype="http://schema.org/ItemPage">
<meta itemprop="position" content="{{ $countriesCount }}">
<meta itemprop="name" content="Jobs near {{ $country->name }}">
<meta itemprop="url" content="{{ action('PublicController#jobsByCountry', ['country' => $country->address_format]) }}">
<a class="inner-div" href="{{ action('PublicController#jobsByCountry', ['country' => $country->address_format]) }}">
<span class="post-featured-img">
<img src="/img/spacer.png" data-lazy="/img/cnt/{{ $country->iso_code_3 }}.jpg" alt="Buick Enspire" width="700" height="323">
</span>
<h3 class="top-h3">{{ $country->name }}
#if ($country->cnt == 1)
<small>({{ $country->cnt }} Job)</small>
#else
<small>({{ $country->cnt }} Jobs)</small>
#endif
</h3>
</a>
</div>
<?php $countriesCount++; ?>
#endforeach
</div>
</div>
</div>
</div>
</div>
#endif

Related

how to display <div> next to each other within a for loop?(laravel)

I'm working on a alumni portal where I need to display the committee member details. I need to print like 4 members in a line and next 4 in the next line. Any solution would be helpful.
<h2>Member Details</h2>
<div class="jumbotron container">
<div class="pull-right">
<a class="btn btn-primary" data-toggle="modal" id="mediumButton" data-target="#mediumModal" data-attr="{{ route('add_details')}}" title="Add Institute Details"> <i class="fas fa-plus-circle"></i>
</a>
</div>
<div class="container main" id="wrapper">
#foreach ($members as $member)
<div class="img-box">
<pre>
<img src="/uploads/image/{{ $member->image }}" width="100" height="100"/>
{{ $member->id }}<br/>
<a> {{ $member->name }}</a>
<!-- #if(($member->id) >=5 )
<span style="white-space: pre-line">
</span>
#endif
</pre> -->
</div>
#endforeach
</div>
</div>
if you use Bootstrap try this
<div class="row">
#foreach ($members as $member)
<div class="col-md-3">
<div class="img-box">
<pre>
<img src="/uploads/image/{{ $member->image }}" width="100" height="100"/>
{{ $member->id }}<br/>
<a> {{ $member->name }}</a>
</pre>
</div>
</div>
#endforeach
</div>
Add "display:grid;" to the container "div" tag You need to define the property.

Work with templates as frontend developer

I have accepted a job, in which I have to work on some html and css in frontend. However, the files I was given to work with seem to be interpreted by some kind of interpreter (I think Flask with Jinja2). All I have however are frontend files and I cannot figure out, how to debug my code without any interpreter.
F:.
├───static
│ ├───css
│ └───images
│ └───navigation
└───templates
├───admin
├───cart
├───home
├───order
├───partials
├───payment
├───product
├───ticket
└───user
above I have listed the folders I have to work with. Each folder only contains html files, that look like this for example:
<input id="navi-open" type="checkbox" name="" class="ct" />
<div id="navigation" class="column">
<label for="navi-open" class="navi-button">
<img src="{{ url_for('static', filename='images/cancel.png') }}" alt="" />
</label>
<div id="navigation-items" class="column h-sb">
<div class="category">
<a href="{{ url_for('home.home') }}" style="opacity:1"
class="navigation-item light {{ 'active' if current_page == 'homepage' else '' }}">
<div style="opacity:1" class="icon">
<img src="{{ url_for('static', filename='images/karma_blackwhite.png') }}" alt=""
style="filter: invert(0);" />
</div>
<div class="label">Homepage</div>
<div class="tooltip">Homepage</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('home.news') }}" class="navigation-item {{ 'active' if current_page == 'news' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/newspaper.png') }}" alt="" />
</div>
<div class="label">News</div>
<div class="tooltip">News</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('home.about') }}" class="navigation-item {{ 'active' if current_page == 'about' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/information.png') }}" alt="" />
</div>
<div class="label">About</div>
<div class="tooltip">About</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('home.reviews') }}"
class="navigation-item {{ 'active' if current_page == 'reviews' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/feedback.png') }}" alt="" />
</div>
<div class="label">Reviews</div>
<div class="tooltip">Reviews</div>
<div class="indicator"></div>
</a>
</div>
{% if current_user.is_authenticated %}
<div class="category">
<a href="{{ url_for('cart.cart') }}" class="navigation-item {{ 'active' if current_page == 'cart' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/shopping-cart.png') }}" alt="" />
</div>
<div class="label">Cart</div>
<div class="tooltip">Cart</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('ticket.view_all_tickets') }}"
class="navigation-item {{ 'active' if current_page == 'tickets' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/envelope.png') }}" alt="" />
</div>
<div class="label">Tickets</div>
<div class="tooltip">Tickets</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('user.notifications') }}" num="{{ current_user.notifications|length }}"
class="navigation-item {{ 'active' if current_page == 'notifications' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/chat-2.png') }}" alt="" />
</div>
<div class="label">Notifications</div>
<div class="tooltip">Notifications</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('order.view_all_orders') }}"
class="navigation-item {{ 'active' if current_page == 'orders' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/package-6.png') }}" alt="" />
</div>
<div class="label">Orders</div>
<div class="tooltip">Orders</div>
<div class="indicator"></div>
</a>
</div>
<div class="category">
<a href="{{ url_for('user.profile') }}"
class="navigation-item {{ 'active' if current_page == 'settings' else '' }}">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/settings.png') }}" alt="" />
</div>
<div class="label">Settings</div>
<div class="tooltip">Settings</div>
<div class="indicator"></div>
</a>
<a href="{{ url_for('user.logout') }}" class="navigation-item">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/logout.png') }}" alt="" />
</div>
<div class="label">Logout</div>
<div class="tooltip">Logout</div>
<div class="indicator"></div>
</a>
</div>
{% else %}
<label for="login" class="navigation-item">
<div class="icon">
<img src="{{ url_for('static', filename='images/navigation/login.png') }}" alt="" />
</div>
<div class="label">Login</div>
<div class="tooltip">Login</div>
<div class="indicator"></div>
</label>
{% endif %}
</div>
<input id="login" type="checkbox" name="" class="popup-controller" />
<div class="popup-wrapper">
<label for="login" class="popup-bg"></label>
<div class="popup">
<div class="popup-content">
<form id="auth-container" action="{{ url_for('user.login') }}" method="post">
{{ g.login_form.csrf_token }}
<div class="title-big">Log in to your account</div>
<div class="input-group">
<div class="input-wrapper">
<div class="input-field column"><input type="text" name="username" required="required"
placeholder="Username" />
<div class="input-label required">Username</div>
<div class="input-status"></div>
</div>
</div>
<div class="input-wrapper">
<div class="input-field column"><input type="password" name="password" required="required"
placeholder="Password" />
<div class="input-label required">Password</div>
<div class="input-status"></div>
</div>
</div>
</div>
<div class="action-btns btns row">
<button type="submit" class="button submit">Log in</button>
</div>
<div class="infos row h-sb">
Restore password
Create an account
</div>
</form>
</div>
</div>
</div>
</div>
I don't know how to work with this, if I just need to change frontend code...
Thanks
First of all, congratulations on your new job!
Did you try debugging the company's code using VScode? they have a great tutorial on how to debug python codes, and specifically Django code; Check https://code.visualstudio.com/docs/python/tutorial-django

Displaying items horizontally instead of columns

I need to make an index view for my posts, and I choose a photo gallery for that.In my controller I have paginate set at 10.Unfortunately, my column is divided by one, horizontally : https://imgur.com/a/8sUm5eb .
I want to make this to be divided by 2 columns, 5 items/column.Can you give me a little help with that?Thank you.
My view
<!-- Promo Block -->
<div class="container g-pt-100 g-pb-70">
<!-- News Section -->
<div class="u-heading-v3-1 g-mb-30">
<h2 class="h5 u-heading-v3__title g-color-gray-dark-v1 text-uppercase g-brd-primary">Latest News</h2>
</div>
#foreach($posts as $post)
<div class="masonry-grid-item col-sm-6 g-mb-30">
<!-- Blog Background Overlay Blocks -->
<article class="u-block-hover">
<div class="g-bg-cover g-bg-white-gradient-opacity-v1--after">
<img class="d-flex align-items-end u-block-hover__main--mover-down" src="/storage/{{ $post->image }}" alt="Image Description">
</div>
<div class="u-block-hover__additional--partially-slide-up text-center g-z-index-1 mt-auto">
<div class="u-block-hover__visible g-pa-25">
#foreach($post->tags as $tag)
<span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $tag->name }}</span>
<span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">·</span>
#endforeach
<h2 class="h4 g-color-white g-font-weight-600 mb-3">
<a class="u-link-v5 g-color-white g-color-primary--hover g-cursor-pointer" href="/post/{{ $post->id }}">{{ $post->caption }}</a>
</h2>
<h4 class="d-inline-block g-color-white-opacity-0_7 g-font-size-11 mb-0">
By,
<a class="g-color-white-opacity-0_7 text-uppercase" href="/post/{{ $post->id }}">{{ $post->user->username }}</a>
</h4>
<span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">·</span>
<span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $post->created_at->diffForHumans() }}</span>
<span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">·</span>
<span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $post->comments()->count() }} comments</span>
</div>
<a class="d-inline-block g-brd-bottom g-brd-white g-color-white g-font-weight-600 g-font-size-12 text-uppercase g-text-underline--none--hover g-mb-30" href="/post/{{ $post->id }}">Read more</a>
</div>
</article>
<!-- End Blog Background Overlay Blocks -->
</div>
#endforeach
</div>
</div>
<!-- End News Section -->
Make your first foreach like this
<div class="row">
Your foreach
</div>

how to add margin without ruining responsiveness

so I have three cards in one row but they are all stuck together without margin it looks ugly. I want there to be some margin between each card so I added margin but it ruins the responsiveness bootstrap provides. Thus I added padding only. Any help would be appreciated
<div class="row">
{% for all_episode in episode %}
<div class="col-6 col-md-4 card" style="padding:20px">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">
<img class="card-img-top" src='{{all_episode.image.url}}'>
</a>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">
<a href="{% url 'season_detail' slug=all_episode.season.slug %}">{{ all_episode.season }}
</a>
</span>
</small>
</div>
</div>
{% endfor %}
</div>
You can just tweak the card
<div class="row">
{% for all_episode in episode %}
<div class="col-6 col-md-4">
<div class="card" style="padding:20px">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">
<img class="card-img-top" src='{{all_episode.image.url}}'>
</a>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">
<a href="{% url 'season_detail' slug=all_episode.season.slug %}">{{ all_episode.season }}
</a>
</span>
</small>
</div>
</div>
</div>
{% endfor %}
</div>
Use Bootstrap Card Deck all cards will be in a row and responsive.
https://getbootstrap.com/docs/4.0/components/card/#card-decks

How to make columns not dependent on each other with Bootstrap?

There is a menu on the left with the effect of the accordion, on the right content is formed with a jinja. I need to do so that the height of the menu and the contents do not depend on each other.
as here: click
HTML:
<!-- menu -->
<div class="col-md-3">
<div class="wrapper">
<h1 class="header-tabs">Brands</h1>
<div class="tab">
{% for brand in brands %}
<button value="{{ brand.id }}">{{ brand.brand_name }
</button>
{% endfor %}
</div>
</div>
</div>
<!-- content -->
{% for sm in smartphones %}
<div class="col-md-2">
<img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">
</div>
<div class="col-md-5">
<h3 class="header-phone">{{ sm.brand }} {{ sm.model }}</h3>
<p descr-phone>{{ sm.description }}</p>
</div>
<div class="col-md-2">
<h4 class="price">{{ sm.price }}$</h4>
<input type="button" class="button-buy" value="Buy">
</div>
{% endfor %}
The usual way to achieve that is by nesting. Nesting must always be done using row-column pairs i.e. never nest a column directly inside another column.
So, in your case, you'd first create a column with the class col-md-9 then put a .row inside that column and then put all your content columns inside that newly created row.
Note that inside this newly created row you now have a total of 12 column units to work with.
Click "run code snippet" below and expand to full page for testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- menu -->
<div class="col-md-3">
<div class="wrapper">
<h1 class="header-tabs">Brands:</h1>
<div class="tab">
<!-- {% for brand in brands %}-->
<button value="{{ brand.id }}">
<!-- {{ brand.brand_name }-->
Brand Name
</button>
<!-- {% endfor %}-->
</div>
</div>
</div>
<!-- content -->
<div class="col-md-9">
<div class="row">
<!-- {% for sm in smartphones %}-->
<div class="col-md-3 mb-3">
<!-- <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
<img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-md-6">
<h3 class="header-phone">
<!-- {{ sm.brand }} {{ sm.model }}-->
Brand Model
</h3>
<p descr-phone>
<!-- {{ sm.description }}-->
Description
</p>
</div>
<div class="col-md-3 mb-3">
<h4 class="price">
<!-- {{ sm.price }}$-->
$1,000
</h4>
<input type="button" class="button-buy" value="Buy">
</div>
<div class="col-md-3 mb-3">
<!-- <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
<img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-md-6">
<h3 class="header-phone">
<!-- {{ sm.brand }} {{ sm.model }}-->
Brand Model
</h3>
<p descr-phone>
<!-- {{ sm.description }}-->
Description
</p>
</div>
<div class="col-md-3 mb-3">
<h4 class="price">
<!-- {{ sm.price }}$-->
$1,000
</h4>
<input type="button" class="button-buy" value="Buy">
</div>
<div class="col-md-3 mb-3">
<!-- <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
<img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-md-6">
<h3 class="header-phone">
<!-- {{ sm.brand }} {{ sm.model }}-->
Brand Model
</h3>
<p descr-phone>
<!-- {{ sm.description }}-->
Description
</p>
</div>
<div class="col-md-3 mb-3">
<h4 class="price">
<!-- {{ sm.price }}$-->
$1,000
</h4>
<input type="button" class="button-buy" value="Buy">
</div>
<!-- {% endfor %}-->
</div>
</div>
</div>
</div>
Also note the use of the spacing class mb-3 (margin-bottom 3 units).
The img-fluid class makes the images responsive.
Reference:
https://getbootstrap.com/docs/4.0/layout/grid/#nesting