I am using Vichuploader to upload the photos of a category, the problem is that I need to retrieve the image from the css . Background-image and I don't know how to implement the code here.
{{asset ('images/services/')}}{{category.image}} for html template but css ??
style="background-image:url(images/services/image.jpg);"
Help me please.!
I am trying this suggestion :
<div class="row">
{% for category in categories %}
<div class="col-md-6 col-lg-6 ftco-animate">
<div class="block-7">
<div class="img prix"
style="background-image: url('{{
vich_uploader_asset(category, 'image') }}')">
</div>
</div>
</div>
{% endfor %}
</div>
but i have this error :
My Html have this error too:
My Code :
You can use vich_uploader_asset() in a twig file to generate the url for your image:
<div class="img prix"
style="background-image: url('{{ vich_uploader_asset(category, 'imageFile') }}')"
></div>
This twig function is documented here
Related
this is probably an easy one, I need help with an if statement so my button only shows on specific product types.
<button id="myBtn">Size Guide</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img style="margin:auto; width:100%" class="modal-size-chart" src="https://cdn.shopify.com/s/files/1/0278/2842/0746/t/3/assets/{{ product.vendor }}.jpg"></img>
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img style="margin:auto; width:100%" class="modal-size-chart" src="https://cdn.shopify.com/s/files/1/0278/2842/0746/t/3/assets/{{ product.vendor }}.jpg"></img>
</div>
</div>
{% if product.type == "myType" %}
<button id="myBtn">Size Guide</button>
{% endif %}
More information on product.type here
More information on if here
I'm using vue-slick-carousel to build a slider. I have an issue with image which I wrapped as a link. When I click on image redirect doesn't happen. Also I have a title under image which I wrapped as a link too, and with text it works great, but when I click on image it doesn't. It doesn't work only on mobile devices, on desktop when I click on image it makes redirect.
Here is my code:
<VueSlickCarousel
ref="slick"
v-bind="slickOptions"
class="post-category__slider"
>
<div
v-for="post in posts"
:key="`post-${post.id}`"
class="post-category__list-item"
>
<div class="row">
<div class="col-lg-6">
<div
class="post-category__list-item-image mb-4"
>
<a
:href="`/${item.slug}/${post.slug}`"
>
<img
:src="$store.state.env.panelUrl + post.get_thumbnail"
:alt="post.title"
>
</a>
</div>
</div>
<div class="col-lg-6">
<div class="d-lg-flex flex-lg-wrap flex-lg-column justify-content-lg-between h-100">
<div class="mb-4">
<h4 class="post-card__text-block-title">
<a :href="`/${item.slug}/${post.slug}`">
{{ post.title }}
</a>
</h4>
<div>
{{ post.short_story }}
</div>
</div>
</div>
</div>
</div>
</div>
</VueSlickCarousel>
Try adding pointer-events: none to the images. It should do the trick.
please share your properties for a better picture, also try adding only the property with its object something like this: :href="item.slug/post.slug", but for better reference provide your properties.
I'm creating a Go/Hugo Theme with Bootstrap 4 and in my index.html template file I have the code below to iterate through the articles posted:
<div class="col-12 col-md-12" id="main">
<div class="row">
{{- range .Paginator.Pages -}}
{{- if eq .Type "posts"}}
<div class="col-12 col-md-3 col-lg-3">
<figure><img src="{{ .Params.banner }}" /></figure>
<p>{{ .Summary }}</p>
</div>
{{- end -}}
{{- end }}
</div>
</div>
It's not quite ready yet but it already allows me to use a cover image, defined as a FrontMatter parameter, for something more creative than a blog-like style. Here, a sneak-peak.
As you can see there as Pagination implemented as well so I can see whatever is older the the last entries (defined in config.toml and accessed through .Paginator.Pages).
But I was thinking on get rid of this Pagination and transform this listing in a Carousel, but I don't if I would be able to do so with Hugo nor if it's possible to "plug n' play" a Carousel that would working with Bootstrap's existing markup.
How could I accomplish that?
If you can do it in HTML then you can do it with Hugo, so the answer is yes, it's possible. From a brief search on the net there seem to be dozens of carousel implementations for Bootstrap, so just choose one of those.
For example, with the carousel for Bootstrap v4 alpha on the Bootstrap site, you can make a carousel with this code:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Third slide">
</div>
</div>
</div>
Assuming that you have defined the parameters carouselimage and carouselimagealt in the front matter of all your articles, you could generate this HTML with Hugo by doing this:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
{{ $paginator := .Paginate (where .Data.Pages "Type" "posts") }}
{{ range $paginator.Pages }}
<div class="carousel-item active">
<img class="d-block img-fluid" src="{{ .Data.carouselimage }}" alt="{{ .Data.carouselimagealt }}">
</div>
{{ end }}
</div>
</div>
Also, I've made your page type here "posts" as you did in your question, but usually in Hugo it is "post", so you might want to check which one you need.
I want to have a dynamic sidebar for that I use javascript for the active class property to be running, and it works perfectly, but the problem is with the content level of each sidebar because they are different too
code html
<aside class="page-sidebar col-md-2 col-sm-4 affix-top">
<section class="widget">
<ul class="nav">
{% for tache in taches %}
<li class="">{{ tache.titre }}</li>
{% endfor %}
</ul>
</section>
</aside>
<div class="content-wrapper col-md-10 col-sm-8">
<div id="my" class="page-row">
{% include "FrontBundle:Default:my.html.twig" %}
</div>
</div>
I want to know if there is a solution to recover each sidebar to have access to its content e. Because in the twig my.html.twig I want to display the description of each "tache" {{tache.description}}
And thank you in advance
I have been creating a blog and I have made these cards but I want the content to stack side by side rather than on top of each other.
Here's an image:
http://imgur.com/KP7kThH
model.py
class ProjectPost(models.Model):
title = models.CharField(max_length=120)
author = models.ForeignKey('auth.User')
image_url = models.CharField(max_length=1000, blank=True, null=True)
text = models.TextField()
def __str__(self):
return self.title
views.py
def projects(request):
ProjectPosts = ProjectPost.objects.all()
return render(request, 'blog/projects.html', {'projectposts': ProjectPosts})
projects.html
{% extends 'blog/base.html' %}
{% block content %}
{% if user.is_authenticated %}
<div class="container-fluid">
<div class="row">
<div class="text-right">
<h1 class="glyphicon glyphicon-plus"></h1>
</div>
</div>
</div>
{% endif %}
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-10 ">
{% for projectpost in projectposts %}
<div class="projectposts">
<img src="{{ projectpost.image_url }}" id="projects_image" class="img-thumbnail"/>
<div class="page-header">
<h2>{{ projectpost.title }}</h2>
</div>
<footer>By: {{ projectpost.author }}</footer>
<p>{{ projectpost.text | truncatewords:50 }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
You have wrapped your for loop inside a col-lg-3 .... You need to put the column classes inside the loop, not outside it:
<div class="row">
{% for projectpost in projectposts %}
<!-- These columns need to be inside the for loop -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-10 ">
<div class="projectposts">
...
</div>
</div>
{% endfor %}
</div>
You may be able to remove one level of nesting and just put all your classes in one <div class="projectposts col-lg-3 col-md-3...">.