I'm trying add Lightbox plugin to my proyect, I need to use it on users images, but when I load the page Ligthbox another div without images which have position absolute and superimpose on all page. So, plugin
behavior continues being normally. You can see the problem on this image:
Lightbox2 Bad Behavior
The funniest thing that I have other page with Lightbox implemented, but there is no problems. I use the exactly same code on both parts of proyect, so here you have:
{% if image != null and image != '' %}
<a id="avatar" href="{{ asset(item.getWebPath) }}" data-lightbox="image" data-title="{{ 'field.avatar'|trans }}">{{ image }}</a>
{% endif %}
{% set image2 = entity_field(item, 'path2', definition_fields['path2']) %}
{% if image2 != '' and image2 != null %}
<a id="handwriting" href="{{ asset(item.getWebPath2) }}" data-lightbox="image" data-title="{{ 'field.image_writting'|trans }}">{{ image2 }}</a>
{% endif %}
{% endif %}
This block have Twig code, but the main it's just on the links. Do you find any problem or have any ideas?
Do you have http:// at the beginning of your url inside the Twig string? Need the full path to load correctly. Greetings.
Related
I'm building my first Timber Wordpress theme and using the timber-starter-theme. I have a custom content type with custom fields (fields added using WCK plugin). I haven't touched single.php file, just building the twig template. 'team_church_slide' is a repeating field to add images to go into a Slick carousel. My template section is:
{% set slickSlider = post.team_church_slideshow %} {# the field group #}
{% set slickSlide = post.get_image('team_church_slide') %} {# the field #}
{% if slickSlider %}
<div class="slick-slider">
<ul>
{% for slides in slickSlider %}
<li><img src="{{ slickSlide.src }}" alt="{{ slickSlide.alt }}"></li>
{% endfor %}
</ul>
</div>
{% endif %}
This returns the image correctly, but three copies of the first image, not the three different images which are uploaded. If I remove an uploaded image, two copies of the first image are shown.
Is there something to change in the twig to get all the images?
Figured this out thanks to something in this post:
Get first row from ACF Repeater using Timber
Here's my final working template section:
{% set slickSlider = post.team_church_slideshow %}
{% if slickSlider %}
<div class="slick-slider">
<ul>
{% for slides in slickSlider %}
{% set slickSlide = TimberImage(slides.team_church_slide) %}
<li class="slide">
<img src="{{ slickSlide.src }}" alt="{{ slickSlide.alt }}">
</li>
{% endfor %}
</ul>
</div>
{% endif %}
The only real change was 'post.get_image' to 'TimberImage' & moving the set inside the for-loop.
I am using Ajax in my Django project to implement some simple searching. In my template folder, I have created an html file called "ajax_search.html" where I write how I want my objects to be displayed on a page. Right now it looks like this:
{% if puzzles.count > 0 %}
{% for puzzle in puzzles %}
<a href="{% url 'puzzle' puzzleID=puzzle.id %}">
{{puzzle.title}}
</a>
<br>
{% endfor %}
{% elif search_len < 3 %}
{% else %}
No puzzles match the search
{% endif %}
This works fine, but I wanted to style it to look better. Is there any way I could import some CSS into this template?
Thank you!
I've got a problem with showing thumbnails using Liipimaginebundle in TWIG template.
I'm rendering an index:
return $this->render('ad/index.html.twig', array(
'ads' => $ads,
));
and in index.html.twig I'm using FOR loop to show thumbnails related to ads.
{% for ad in ads %}
//with parameter - doesn't work
{% set img = ad.mainPhoto %}
<img src="{{ img | imagine_filter('thumb') }}" />
//working fine
<img src="{{ asset('/uploads/2.png') | imagine_filter('thumb') }}" />
{% endfor %}
mainPhoto stores a path to photo related to current ad - for example:
/uploads/2.png
While using an "img" parameter, I've got an exception:
An exception has been thrown during the rendering of a template ("Parameter "path" for route "liip_imagine_filter" must match ".+" ("" given) to generate a corresponding URL.").
What is the correct way to define the path in this case?
You are passing only the path as a string to the imagine_filter, add the asset and it should work:
{% for ad in ads %}
{% set img = ad.mainPhoto|default %}
{% if img <> "" %}
<img src="{{ asset(img) | imagine_filter('thumb') }}" />
{% endif %}
{% endfor %}
I'm freshly new with Django CMS. I'm able to resize something by CSS in Django but that process slows me down so I think it would be faster by using Django CMS. Ok now I got the Welcome page with Django CMS, then I start by adding a picture and surprised that there is not an option to resize it. I found something like sorl_thumbnail package but can't figure out how to integrate the code to my template. Here is from the tutorial of sorl_thumbnail:
{% load thumbnail %}
{% thumbnail item.image "100x100" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
In my feature.html template:
{% extends "base.html" %}
{% load cms_tags staticfiles sekizai_tags menu_tags %}
{% block content %}
<div>
{% placeholder "feature" %}
</div>
<div>
{% placeholder "content" %}
</div>
{% endblock content %}
The tutorial of sorl_thumbnail is useless, it doesn't say where to put their code. I tried to paste the whole thing but no luck. Can you guys help please!
djangocms-picture plugin is rather basic, please check cmsplugin-filer (https://pypi.python.org/pypi/cmsplugin-filer/0.10) plugins for more advanced image plugin
I would also recommend cmsplugin_filer_image as mentioned by #yakky
See: https://github.com/stefanfoulis/cmsplugin-filer/tree/develop/cmsplugin_filer_image
But if you want to continue use djangocms-picture, you'll need to override the plugin template.
Copy the snippet below to cms/plugins/picture.html in your template directory.
{% load thumbnail %}
<span class="plugin_picture{% if picture.float %} align-{{ picture.float }}{% endif %}">
{% if link %}<a href="{{ link }}">{% endif %}
{% thumbnail picture.image "100x100" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
{% if link %}</a>{% endif %}
</span>
I'm attempting to make a form that builds a slider. It can have any number of images and I'd like to show a preview of already-uploaded images. Getting the multiple image field set up was easy enough, but I'm getting caught up on showing a preview of the image.
I'm using this template to render the "Slider Image" field:
{% block form_widget_simple %}
{% spaceless %}
<div class="form-widget slider">
{% set type = type|default('text') %}
{% if type == 'file' and value is not empty %}
<img src="{{ value }}" width="200"/><br/>
{% endif %}
<input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
</div>
{% endspaceless %}
{% endblock form_widget_simple %}
The value variable is always empty on file input types, so I'm not sure how I can get at the url of the uploaded images. I am using a custom field type that simply adds a file field and hooks up the data source (which is just a simple wrapper around Symfony\Component\HttpFoundation\File\File). If you need this code let me know, but its all boilerplate stuff so I doubt you do.
Thanks in advance.
Symfony2 FileType doesn't have value, its owerwritten in buildView method.
https://github.com/symfony/symfony/blob/master/src/Symfony/Component/Form/Extension/Core/Type/FileType.php#L28
But you access it via forms.vars.data
{% if type == 'file' and form.vars.data is not null %}
{# Here you should somehow generate url to file but let assume
you have it in "/path/to/file/" folder that is accessible through web server #}
<img src="/path/to/file/{{ form.vars.data.name }}" /><br/>
{% endif %}