I'd like to add 360 photos in posts in a jekyll web page. I already know that there are some services where I can store those and then add the photo to the post with the iframe structure.
What I want is to have the photos stored in the server folders (images) and add the photo as a frame or as a background using panolens.js
For example in this case they do this editing the index.html. What I'd like is to get this via jekyll post markdown or in other way. For example something like this:
My solution was to define a liquid array of photos URLs right in the post; careful to indent the array elements and put a space after the - sign
---
layout: post
title: Photos
gallery:
- https://path/to/photos/photo1.jpg
- https://path/to/photos/photo2.jpg
- https://path/to/photos/photo3.jpg
---
and then in the post.html layout I just display them with my preferred style, the minimal is this but of course, you can use your preferred gallery slideshow:
{% for image in page.gallery %}
<img src="{{ image }}" />
{% endfor %}
Related
I am using Flask and wtforms to create a web page "index.html" that loads multiple forms. The selection of forms that are rendered depend on dropdown selections, and a variable "serviceid" updated from an API call. The form selection and rendering is handled in an included file "form_select.html", which requires "serviceid" value to pick the correct form. I am having trouble figuring out how to refresh the forms based on updated serviceid values without doing a full page reload.
I can use something like this with jinja2 include to render "form_select.html" and pass the "serviceid" variable so the right form is rendered:
<div id="loadform"> {% include './form_select.html' with serviceid %} </div>
This is working on first load, but I need to select a new form when the user selects a new value from a dropdown. I am running a script based on mydropdown.onchange, which first obtains the correct "serviceid" value, but now I need to rerender just the loadform div with this value.
I have tried approaches along the lines of the following - but I cant seem to figure out how to deliver this jinja2 with .innerHTML.
document.getElementById('loadform').innerHTML = `
{% with serviceid=serviceid %}
{% include './form_blocks.html' %}
{% endwith %}
`;
There is probably a better way to do this, but the examples I can find don't include passing in a variable. Can I use innerHTML for this, or is there a better way?
On a store im working on, when you follow a link to a specific variant (/products/the-product?variant=12345678901) the image on the product page is the featured image of the product. It needs to be the variant image of the selected variant.
How do I go about doing this? I've tried editing product.liquid to:
{% assign featured_image = product.selected_or_first_available_variant.featured_image %}
{% assign featured_image = variant.image %}
but neither work.
How should I do this?
The proper way to target this is the following.
{% assign featured_image = product.selected_or_first_available_variant.image | img_url: 'master' %}
Refer to the Variant Object documentation: https://help.shopify.com/themes/liquid/objects/variant
[Edited for more clarity]
My problem is more of an architecture problem, I have thoughts of many ways to do what I need to but can't figure out which one is correct/the best, so here it is.
I fetch some xml from a remote webserver using ajax, then parse it with jquery.What I want is that when the page is first rendered I have some "loading" gifs, one for each ajax request i'll be making , then when the data is fetched, it appears on the page.
The things is I want to have jquery post these data to the view to render it. ( This is for the other developers who will be using my app, who don't know much of javascript and prefer to write python/html to code the way they want the data to be displayed and make use of the django template engine for custom tags and stuff)
The question is how can I distinguish between the first loading of the page where we have no data and the second time where we have the data. I don't want to have to refresh the page at any time. I thought of having something in the template like :
{% block content %}
{% if not data %}
it's the first loading of the page,we have to fetch the data.
<p> My first item : some loading logo </p>
<script>
call a static script that gets the data then appends it to the html/post it back.
</script>
{% endif %}
{% if data %}
the data had already been fetched so we can display it, something like :
<p> My first item : {{first item}} </p>
{% endif %}
{% endblock %}
I have looked on other questions but it is usually updating with data from the database. Sorry if the question is too specific but I want to really have a good design of the problem before starting to write code and I'm a bit lost. Thank you .
Why do you want to send the parsed data back to the server just for transforming it into Html ?
Why not just use some kind of Javascript based rendering library that can do this ? Your appliation would perform faster since you don't need to execute an extra request.
Django tags and context dict are resolved when template is rendered for the first time.
AJAX is used to post/fetch data withoud page reload, so after AJAX request your page will not be reloaded - and django template renderer will have no possibility to show updated data.
But you could use jQuery get() or post() to retrieve rendered template from other django view and integrate it into current page.
This template must be rendered at request on /ajax/fetch/:
{% block content %}
{% if not data %}
it's the first loading of the page,we have to fetch the data.
<p> My first item : some loading logo </p>
<script>
call a static script that gets the data then appends it to the html/post it back.
</script>
{% else %}
the data had already been fetched so we can display it, something like :
<p> My first item : {{first item}} </p>
{% endif %}
{% endblock %}
And this is sitting on your main page:
<script [include jquery here]></script>
<script>
$(function(){
$("#get_data_please").click(function(){
$.get('/ajax/fetch/', function(data) {
// this is called on ajax success
$('#ajax_result').html(data);
});
});
});
</script>
...
Click to get data
<div id="ajax_result">
Here all will be loaded
</div>
I don't even know what title use to this question. I'm starting with web programming and I don't even know what technology should I use to do this.
I have a database with doctrine in symfony2. This database has galleries and each gallery has images (two tables OneToMany relation).
I'm passing an array of galleries to a twig template where I show them in a select, so I can choose one and add more images to the gallery, add new galleries or delete them using the submit buttons.
That is working now with this template:
<select class="listGalleries" id="listGalleries" name='id' size="10">
{% for gallery in galleries %}
<option value="{{gallery.id}}" >{{gallery.name}}</option>
{% endfor %}
</select>
That goes inside the form.
Now, what I want to do is everytime I do click in one item of the select, show, in the same webpage, all the images of the gallery selected.
I don't know which technology should I use. Can I do it with twig? Do I have to learn ajax? I guess I have to go to the database to read the data of the pictures that belongs to that gallery, but I don't know how to do it or if symfony2 offers me a better solution.
Every advice will be appreciated.
"Dynamically" can't be done in twig, since after its rendering there is no way to change the output.
You can do in two ways in my opinion:
Use twig to loop within galleries and output them, then use some javascript like bootstrap tabs to display each gallery when changing option. in bootstrap you would do this way (assuming the gallery->images relations is in $gallery->images):
<div class="tab-content">
{% for gallery in galleries %}
<div class="tab-pane active" id="gallery{{ gallery.id }}">
{% for image in gallery.images %}
<img src="{{ image.url }}" class="img-polaroid">
{% endfor %}
</div>
{% endfor %}
</div>
now using javascript like
$("select#listGalleries").change(function () {
$("select option:selected").each(function () {
$("#gallery" + $(this).attr('value')).tab('show');
});
})
Otherwise you can use ajax to return the gallery images after having selected a gallery from the and render the gallery images somewhere on the page. This could be done in two ways, render the html within symfony and just place the output in the page with javascript or return just a json (using something like this) and create the html within javascript (I personally use a lot pure).
I'm using Django and I want my users to confirm that they really want something to be deleted. I'm considering pure Django solution (no Javascript confirmations).
According to what I think,I can create a new page containing "Yes" and "No" buttons. If user presses "Yes", my site will go on and delete the object from the database.
Is it the right way to do deletion without using Javascript? How would you implement the feature if you were me?
I would use Django's built in DeleteView, which will display a confirmation page for an HTTP GET request and perform deletion for an HTTP POST request.
The documentation gives this example:
from django.views.generic.edit import DeleteView
from django.core.urlresolvers import reverse_lazy
from myapp.models import Author
class AuthorDelete(DeleteView):
model = Author
success_url = reverse_lazy('author-list')
I'd recommend reading the documentation for the SingleObjectMixin which explains how to customise the way the view finds the object to delete (the default is to look for an URL keyword argument called pk), and for the TemplateResponseMixin which explains how to customise the template that is used (the default is 'myapp/author_check_delete.html').
This is just one of a number of class-based generic views that make basic operations (displaying a page for a single model instance, for a list of model instances, and handling editing, deletion etc.) very quick and easy to implement.
If you wanted to enhance this with JavaScript later you could always write some unobtrusive JS that detects links to the deletion confirmation page (by looking for a class, or a particular URL) and adds a click handler that pops up a confirmation dialog and then sends a POST request to the URL in the link's href attribute. You would also need to modify the view slightly to return a JSON object when request.is_ajax() is True, so that your JS would know if the deletion had succeeded or failed, which would probably involve overriding one of the methods inherited from the DeletionMixin.
That sounds fine. What I have done a couple of times is to create a confirmation template that can be used anywhere in the application:
{% extends 'base.html' %}
{% block content %}
<div class="confirmation-box">
<p>{{ message }}</p>
<div>
Cancel
<form action="{{ action_link }}" method="post">
<input type="hidden" name="next" value="{{ prev_link }}" />
<input type="submit" value="Send" />
</form>
</div>
</div>
{% endblock %}
You pass to it:
A confirmation message for the user (message)
The url to the page you are in (prev_link)
The url that should be called to perform the action (action_link)
If the user cancels the action, then she/he goes back to the original page.
If the user confirms, then the prev_link is passed as a hidden parameter, so the view can redirect the user to the original page after performing the action (although this is completely optional of course).
Which is pretty much what you propossed in your question.