I am positioning multiple images (one below other) on the top of a single image .
The number of images to be placed on the top is coming from back-end, so css that I applied to position one image on other is working only for one image and not for other images.
How to do so? Since I am getting only one image at the top . Basically three foreground images need to position vertically on one backgroundimage.
<div class="row">
{% for a in count %}
<div class="column">
<img src="{{ url_for('static', filename='building.jpg') }}" id="backgroundimage" title="Total Floors: 3
Total Rooms: 6" />
<p>{{ a }}</p>
{% for b in rows%}
<img src="{{ url_for('static', filename='building.jpg') }}" id="foregroundimage" title="Total Floors: 3
Total Rooms: 6" />
{% endfor %}
</div>
{% endfor %}
If I understood what you are trying to do, I would play with the CSS z-index value,
with the help of Jinja2 loop.index function.
So try this:
<div class="row">
{% for a in count %}
<div class="column">
<img src="{{ url_for('static', filename='building.jpg') }}" id="backgroundimage" title="Total Floors: 3
Total Rooms: 6" />
<p>{{ a }}</p>
{% for b in rows%}
<img style="z-index: -{{loop.index}};" src="{{ url_for('static', filename='building.jpg') }}" id="foregroundimage" title="Total Floors: 3
Total Rooms: 6" />
{% endfor %}
</div>
{% endfor %}
Worth to note.
loop.index
The current iteration of the loop. (1 indexed)
loop.index0
The current iteration of the loop. (0 indexed)
CSS z-index Property
Jinja2 For Variables
Related
I am looking to show a custom field (using the app Shopify Custom Fields) to show another image other than the collection image (we cannot use the collection image for reasons that are too long to write about). Right now using the custom field which is a text field (which we have as an absolute URL to the image we want to use) here:
<img src="{{ collection.metafields.custom_fields["collection_list_image_url"] }}" alt="{{ link.title }}"/>
To get the Collection image like normal, which does work I used:
<img src="{{ link.object.image.src | collection_img_url: 'master' }}" alt="{{ link.title }}"/>
For some reason the image is not showing up and after inspection it says img src is unknown. It does work if we use the normal collection image though. Is there something I need to add to get this custom field to show up dynamically for each collection in the menu nav (link list)?
I have the following code written:
<div class="collection-list">
{% for link in linklists.collection-list.links %}
<div class="box">
<a href="{{ link.url }}">
<img src="{{ collection.metafields.custom_fields["collection_list_image_url"] }}" alt="{{ link.title }}"/>
<div class="heading">
<h2>{{ link.title }}</h2>
<button type="button" class="btn btn-dark">shop now</button>
</div>
</a>
</div>
{% endfor %}
</div>
You need to reference link.object (and maybe account for the fact that it might not be a Collection). Nesting single quotes within the double quotes when you reference the metafield key is also better syntax:
<div class="collection-list">
{% for link in linklists.collection-list.links %}
{% if link.object == 'collection' %}
{% assign cf = link.object.metafields.custom_fields %}
<div class="box">
<a href="{{ link.url }}">
<img src="{{ cf['collection_list_image_url'] }}" alt="{{ link.title }}">
<div class="heading">
<h2>{{ link.title }}</h2>
<button type="button" class="btn btn-dark">shop now</button>
</div>
</a>
</div>
{% endif %}
{% endfor %}
</div>
Following the Timber docs, the single product page does not display the pictures gallery. How can I do that with Timber?
Using {{ product|print_r }}, I have found the answer, considering the product context, you can use:
{% for id in product.gallery_image_ids %}
<img src="{{ Image(id).src }}" />
{% endfor %}
I have a Jinja macro defined as follows.
globalmacros.html
{% macro SUINavMenu(leftlist=[],logo="images/Logo_WEB_450_250.png") %}
<div class="ui pointing secondary menu">
<div class="item">
<img src="{{ static({{ logo }}) }}">
</div>
{% for item in leftlist %}
<a class="item" href="{{ item[1] }}">
{{ item[0] }}
</a>
{% endfor %}
</div>
{% endmacro %}
dashboard.html
{% from "macros/globalmacros.html" import SUINavMenu %}
{% block navigation %}
{{ SUINavenu(leftlist=[["Home","/home/"],["New Bill","/newbill/"]],
logo="images/web_logo.png") }}
{% endblock navigation %}
I am importing the macro defined in "globalmacros.html" into "dashboard.html" and trying to pass the logo location. However I am not sure how to do it.
In a non-macro version, the following code works.
<img src=" {{ static('images/logo_web.png') }} "></img>
The above code in "globalmacros.html" doesnt work as Jinja does not process an {{}} inside another {{}}
What is the work around for this?
I've strong supposition that <img src="{{ static(logo) }}"> should work. If it doesn't I would report this as a bug.
I've got a few images, and I want to make a carousel of that.
But I do not want to loop over the images twice.
Can this be done?
My code is:
<div id="main-slider">
{% for image in images %}
<img src="/images/{{ image.url }}"/>
{% endfor %}
</div>
<div id="main-slider-nav">
{% for image in images %}
<img src="/images/{{ image.url }}"/>
{% endfor %}
</div>
As you can see, the loop is in there now twice. Is there a nice way to not do this?
If you prefer, you can build a string with the dynamic values (the lists of image tag) then use in the container div, as example:
{%set accumulator = '' %}
{% for image in images %}
{%set accumulator = accumulator ~ '<img src="/images/'~image.url~'"/>' %}
{% endfor %}
<div id="main-slider">
{{ accumulator|raw }}
</div>
<div id="main-slider-nav">
{{ accumulator|raw }}
</div>
Here a working twigfiddle sample
Hope this help
When displaying an image in the collection section and having product preview images associated with a certain product, I receive duplicate copies of the product because I have image previews. Is this because I'm not calling for the first featured image?
<img src="{{ collection.products.first.featured_image | product_img_url: 'medium' }}">
Both images go to the same product. I figured out that because I have a preview image and a featured image it displays two identical products.
Here's the full source:
<div class="collectionfront">
{% for product in products %}
{% for image in product.images %}
<img src="{{ collection.products.first.featured_image | product_img_url: 'medium' }}"><h2><span>{{ product.title }}</span></h2>{{ product.price | money_with_currency }}{% if product.available %}<form action="/products/{{ product.handle }}"><span><button type="submit" class="shop-btn">Shop</button></span></form>{% else %}<p>Sold Out!</p>{% endif %}
{% endfor %}
{% endfor %}
</div>
I think it's because you're looping through each product image. Try removing your inner for loop {% for image in product.images %}.
Also, if you are displaying a featured image for a product and not a collection, you probably want product.featured_image instead of collection.products.first.featured_image.