input:
{% for car in closet %}
<img src="{{ asset('images/') }}{{ car.photo1 }}" />
{% endfor %}
html output:
<img src="/images/1bb8cee7cd58403ba84daee67d82fa869ec6052d.jpeg" />
How can I apply this from AvalancheImagineBundle:
<img src="{{ '/relative/path/to/image.jpg' | apply_filter('my_thumb') }}" />
I can't get this working because the path and filename are separated
Simply:
<img src="{{ (asset('images/') ~ car.photo1) | apply_filter('my_thumb') }}" />
Related
I am using the following code to output an image gallery from WordPress and Advanced Custom Fields using the Timber plugin.
{% if story.meta( 'gallery' ) %}
<div class="story__gallery">
<div class="gallery__row">
{% for image in story.meta( 'gallery' ) %}
{% if Image(image).width > Image(image).height %}
{% set dimension = 'gallery__item--horizontal' %}
{% else %}
{% set dimension = 'gallery__item--vertical' %}
{% endif %}
<figure class="gallery__item gallery__item--{{ Image(image).id }} {{ dimension }}">
<img src="{{ Image(image) }}" width="{{ Image(image).width }}" height="{{ Image(image).height }}" alt="{{ Image(image).alt }}" />
</figure>
{% if loop.index is divisible by(3) and not loop.last %}
</div><div class="gallery__row">
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
This version of the code is working, but now I am needing to implement some logic to output the gallery using the following HTML structure.
<div class="story__gallery">
<div class="gallery__row">
<figure class="gallery__item gallery__item--large"></figure>
<div class="gallery__cluster">
<figure class="gallery__item gallery__item--small"></figure>
<figure class="gallery__item gallery__item--small"></figure>
</div>
</div>
</div>
How would I go about working with the loop.index to wrap the two small figures in the gallery__cluster div and have it properly outputted in the gallery__row container?
I would set a variable outside of the loop and increment it by 1 each time, since you need to do different things each increment of the loop. Reset it every 3 loops. It's a lot of if statements, but it gets the job done. Note I have not tested the below since I don't have a component that matches yours to test but I think you can make it work.
{% set rowIndex = 0 %}
{% if story.meta( 'gallery' ) %}
<div class="story__gallery">
{% for image in story.meta( 'gallery' ) %}
{% set rowIndex = rowIndex + 1 %}
{% if rowIndex == 1 %}
<div class="gallery__row">
<figure class="gallery__item gallery__item--large">
<img src="{{ Image(image) }}" width="{{ Image(image).width }}" height="{{ Image(image).height }}" alt="{{ Image(image).alt }}" />
</figure>
{% if loop.last %}
</div>
{% endif %}
{% endif %}
{% if rowIndex == 2 %}
<div class="gallery__cluster">
<figure class="gallery__item gallery__item--small">
<img src="{{ Image(image) }}" width="{{ Image(image).width }}" height="{{ Image(image).height }}" alt="{{ Image(image).alt }}" />
</figure>
{% if loop.last %}
</div>
</div>
{% endif %}
{% endif %}
{% if rowIndex == 3 %}
<figure class="gallery__item gallery__item--small">
<img src="{{ Image(image) }}" width="{{ Image(image).width }}" height="{{ Image(image).height }}" alt="{{ Image(image).alt }}" />
</figure>
</div>
</div>
{% set rowIndex = 0 %}
{% endif %}
{% endfor %}
</div>
{% endif %}
I have some pics that I want to display by months.
But I my code I get the month on top of every pics.
How to avoid this ?
{% for media in medias %}
{% if media.date|date("m") == 10 and media.assetpath is not null %}
<h2>Photos october</h2>
<div class="col-xs-2">
<img class="img-responsive" src="{{ asset(media.assetpath) }}"/>
</div>
{% elseif media.date|date("m") == 11 and media.assetpath is not null %}
<h2>Photos november</h2>
<div class="col-xs-2">
<img class="img-responsive" src="{{ asset(media.assetpath) }}"/>
</div>
{% else %}
<h2>other month</h2>
<div class="col-xs-2">
<img class="img-responsive" src="{{ asset(media.assetpath) }}"/>
</div>
{% endif %}
{% endfor %}
Assuming that medias is an array sorted by date, the problem can be solved using a temporary variable:
{% set last_month = '' %}
{% for media in medias %}
{% set month = media.date('F')|lower %}
{% if last_month and month != last_month %}
<h2>Photos {{ month }}</h2>
{% endif %}
{% set last_month = month %}
<div class="col-xs-2">
<img class="img-responsive" src="{{ asset(media.assetpath) }}"/>
</div>
{% endfor %}
However, I would rather generate a more appropriate structure, e.g.:
$media = [
'November' => [
[ /* media 1 */],
[ /* media 2 */],
// ...
],
// ...
];
With this structure, the template code will look much cleaner:
{% for month, media in medias %}
<h2>Photos {{ month }}</h2>
{% for m in media %}
<div class="col-xs-2">
<img class="img-responsive" src="{{ asset(m.assetpath) }}"/>
</div>
{% endfor %}
{% endfor %}
Basically in their shopping cart I would like to display the image they upload to print but i can't seem to figure it out..... I know i need to add in something along the lines of <img src="http://path/to/thumbnails/myimage.jpg"> but i don't know what to add in place of "http://path/to/thumbnails/myimage.jpg" within this code to display the image they upload if there even is anything? All help appreciated! Thanks (sorry if this is a silly question and plain obvious)
{% comment %}
This is your /cart template. If you are using the Ajaxify Cart plugin,
your form (with action="/cart") layout will be used in the drawer/modal.
For info on test orders:
- General http://docs.shopify.com/manual/your-store/orders/test-orders
- Shopify Payments - http://docs.shopify.com/manual/more/shopify-payments/testing-shopify-payments
<!-- Bold: Options 4-1 -->
<script>function update_qty_builder(builder_id, qty){ jQuery('.'+builder_id+"_qty").val(qty.value); } function remove_product_builder(builder_id){ jQuery('.'+builder_id+"_qty").val(0); jQuery('.'+builder_id+"_qty").parents("form").submit(); }</script>
{% include 'bold-cart-handler' %}
<!-- // end Options 4-1 -->
{% endcomment %}
{% if cart.item_count > 0 %}
<form action="/cart" method="post" novalidate class="cart">
<div class="section-header">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
</div>
<div class="cart__row medium-down--hide cart__header-labels">
<div class="grid--full">
<div class="grid__item large--one-half push--large--one-half">
<div class="grid--full">
<div class="grid__item one-third medium-down--one-third">
<span class="h4">{{ 'cart.label.price' | t }}</span>
</div>
<div class="grid__item one-third medium-down--one-third text-center">
<span class="h4">{{ 'cart.label.quantity' | t }}</span>
</div>
<div class="grid__item one-third medium-down--one-third text-right">
<span class="h4">{{ 'cart.label.total' | t }}</span>
</div>
</div>
</div>
</div>
</div>
{% comment %}
Loop through products in the cart
{% endcomment %}
{% for item in cart.items %}
<!-- Bold: Options 4-2 -->
{% include 'boldoptions' with 'step2' %}
<!-- // end Options 4-2 -->
<tr style="{% include 'boldoptions' with 'step4' %}" class="{% include 'boldoptions' with 'step3' %}">
<div class="cart__row" data-id="{{ item.id }}">
<div class="grid--full cart__row--table-large">
<div class="grid__item large--one-half">
<div class="grid">
<div class="grid__item one-third">
<a href="{{ item.url | within: collections.all }}" class="cart__image">
{% comment %}
More image size options at:
- http://docs.shopify.com/themes/filters/product-img-url
{% endcomment %}
<!-- Bold: Options 4-5 -->
{% if builder[0] %}
<img src="{{ builder[1] }}" alt="{{ builder[0] }}" />
{% else %}
<img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
</a>
<!-- Bold: Options 4-6 -->
{% include 'boldoptions' with 'step6' %}
<!-- // end Options 4-6 -->
{% endif %}
<!-- // end Options 4-5 -->
</div>
<div class="grid__item two-thirds">
<a href="{{ item.url }}" class="h4">
{{ item.product.title }}
</a>
{% unless item.variant.title contains 'Default' %}
<br>
<small>{{ item.variant.title }}</small>
{% endunless %}
{% if settings.cart_vendor_enable %}
<p>{{ item.vendor }}</p>
{% endif %}
{% comment %}
Optional, loop through custom product line items if available
For more info on line item properties, visit:
- http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-product-page-Like-for-a-monogram-engraving-or-customization
{% endcomment %}
{% include 'product_customizer_cart' %}
{% if item.properties.size > 0 %}
{% for p in item.properties %}
{% unless p.last == blank %}
{{ p.first }}:
{% comment %}
Check if there was an uploaded file associated
{% endcomment %}
{% if p.last contains '/uploads/' %}
{{ p.last | split: '/' | last }}
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}
<a href="{% include 'boldoptions' with 'step9' %}" data-id="{{ item.id }}" class="{% include 'boldoptions' with 'step10' %} cart__remove" {% include 'boldoptions' with 'step11' %}>
<small>{{ 'cart.general.remove' | t }}</small>
</a>
</div>
</div>
</div>
<div class="grid__item large--one-half">
<div class="grid--full cart__row--table-large">
<div class="grid__item one-third">
<span class="cart__mini-labels">{{ 'cart.label.price' | t }}</span>
<span class="h5">{% include 'boldoptions' with 'step12' %}</span>
</div>
<div class="grid__item one-third text-center">
<span class="cart__mini-labels">{{ 'cart.label.quantity' | t }}</span>
{% comment %}
Added data-id for the ajax cart implementation only.
{% endcomment %}
<input type="number" name="updates[]" id="updates_{{ item.id }}" class="{% include 'boldoptions' with 'step7' %}" value="{{ item.quantity }}" min="0" data-id="{{ item.id }}" {% include 'boldoptions' with 'step8' %}>
</div>
<div class="grid__item one-third text-right">
<span class="cart__mini-labels">{{ 'cart.label.total' | t }}</span>
<span class="h5">{% include 'boldoptions' with 'step13' %}</span>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
<div class="cart__row">
<div class="grid">
{% comment %}
Optional, add a textarea for special notes
- Your theme settings can turn this on or off. Default is on.
- Make sure you have name="note" for the message to be submitted properly
{% endcomment %}
{% if settings.cart_notes_enable %}
{% assign noteSize = cart.note | size %}
<div class="grid__item large--five-twelfths">
<button type="button" class="text-link cart__note-add{% if noteSize > 0 %} is-hidden{% endif %}">
{{ 'cart.label.add_note' | t }}
</button>
<div class="cart__note{% if noteSize > 0 %} is-active{% endif %}">
<label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
</div>
</div>
{% endif %}
<div class="grid__item text-right{% if settings.cart_notes_enable %} large--seven-twelfths{% endif %}">
<p>
<span class="cart__subtotal-title">{{ 'cart.general.subtotal' | t }}</span>
<span class="h5 cart__subtotal">{{ cart.total_price | money }}</span>
</p>
<p><em>{{ 'cart.general.shipping_at_checkout' | t }}</em></p>
<input type="submit" name="update" class="btn--secondary update-cart" value="{{ 'cart.general.update' | t }}">
<input type="submit" name="checkout" class="btn" value="{{ 'cart.general.checkout' | t }}">
{% if additional_checkout_buttons %}
<div class="cart__additional_checkout">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
</div>
</div>
</div>
</form>
{% else %}
{% comment %}
The cart is empty
{% endcomment %}
<h2>{{ 'cart.general.title' | t }}</h2>
<p>{{ 'cart.general.empty' | t }}</p>
<p>{{ 'cart.general.continue_browsing_html' | t }}</p>
{% endif %}
<!-- Bold: Options 4-14 -->
{% include 'bold-cart-modal' %}
<!-- // end Options 4-14 -->
You have to include the full publicly reachable image path in the src attribute of the image tag
<img src="http://path/to/thumbnails/myimage.jpg">
{% extends '::base.html.twig' %}
{% block content %}
<div>
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{{ 'layout.logged_in_as'|trans({'%username%': app.user.username}, 'FOSUserBundle') }} |
<a href="{{ path('fos_user_security_logout') }}">
{{ 'layout.logout'|trans({}, 'FOSUserBundle') }}
</a>
{% else %}
{{ 'layout.login'|trans({}, 'FOSUserBundle') }}
{% endif %}
</div>
{% for type, messages in app.session.flashBag.all %}
{% for message in messages %}
<div class="{{ type }}">
{{ message|trans({}, 'FOSUserBundle') }}
</div>
{% endfor %}
{% endfor %}
<div>
{% block fos_user_content %}
{% endblock fos_user_content %}
</div>
{% endblock %}
for now my screen has an appearance just to appear buttons to login with facebook or gmail, like an example of how to do a more visual screen with the icons login and centralized.
Thank you.
<div class="customBtn"><a href="{{ path('hwi_oauth_service_redirect', {'service': 'facebook'}) }}">
{% image 'bundles/delivveweb/images/Facebook.png' %}
<img src="{{ asset_url }}">
{% endimage %}
</a></div>
<div class="customBtn"><a href="{{ path('hwi_oauth_service_redirect', {'service': 'google'}) }}">
{% image 'bundles/delivveweb/images/Google.png' %}
<img src="{{ asset_url }}">
{% endimage %}
</a></div>
<div class="customBtn"><a href="{{ path('hwi_oauth_service_redirect', {'service': 'linkedin'}) }}">
{% image 'bundles/delivveweb/images/in.png' %}
<img src="{{ asset_url }}">
{% endimage %}
</a></div>
I could do it this way to be a more customizable login menu also did a Provider and a controller to make the treatment of my User if someone needs to send a comment below to edit the answer.
I have a homepage wich dynamically loads a bunch of "posts" (similar to facebook wall).
There is the option to follow a post, but when someone clicks on the follow button, which has a counter on following people, I need to reload all the homepage to update this value. How can I update just the part corresponding to the post? Actually the post is in an extern hmtl.twig file which I render from the homepage code:
<div class="row">
<div class="col-md-6">
{% for sueno in suenos %}
{% if loop.index0 is even %}
{{ render(controller('SuenoBundle:Default:suenoFrontend', { 'sueno': sueno } )) }}
{% endif %}
{% endfor %}
</div><!--/col-md-6-->
This is the controller:
public function suenoFrontendAction($sueno)
{
return $this->render('SuenoBundle:Default:suenoFrontend.html.twig', array(
'sueno' => $sueno));
}
This the post html file:
<h4 class="text-center nombre-usuario">{{ sueno.usuario.nombre ~ ' ' ~ sueno.usuario.apellido }}</h4>
{% if sueno.necesitaAyuda == 1 %}
<p class="text-center texto-sueno"><img src="{{ asset('bundles/estructura/images/SOS.png') }}" width="25" height="25" alt="SOS" /></p>
{% endif %}
{% if sueno.rol == 'foto' %}
<img src="{{ asset('upload/images/' ~ sueno.fotoLink) }}" class="img-responsive img-thumbnail" alt="Responsive image">
{% elseif sueno.rol == 'video' %}
<div class="video-container"><iframe src="{{ sueno.linkVideo }}" frameborder="0" allowfullscreen=""></iframe></div>
{% endif %}
<h4 class="text-center titulo-sueno">{{ sueno.titulo }}</h4>
<h4 class="text-center quepido-sueno">{{ sueno.quePido }}</h4>
<p class="text-center texto-sueno info">{{ sueno.texto }}</p>
<br>
<div>
{% set size = sueno.usuariosColaboradores | length %}
{% set size2 = sueno.usuariosSeguidores | length %}
<p class="text-center opciones-sueno">
<img src="{{ asset('bundles/estructura/images/colaboradores.png') }}" width="20" height="20" alt="Colaboradores" /> {{ size }}
<img src="{{ asset('bundles/estructura/images/punto.png') }}" width="5" height="5" alt="punto" />
<img src="{{ asset('bundles/estructura/images/seguidores.png') }}" width="20" height="20" alt="Seguidores" /> {{ size2 }}
<img src="{{ asset('bundles/estructura/images/punto.png') }}" width="5" height="5" alt="punto" />
<img src="{{ asset('bundles/estructura/images/compartir.png') }}" width="20" height="20" alt="Compartir" />
</p>
</div>
<hr>
Here you can see the action correpsonding to follow a post(its in the previous code, I remark the line):
<img src="{{ asset('bundles/estructura/images/seguidores.png') }}" width="20" height="20" alt="Seguidores" /> {{ size2 }}
size2 value is the one to update. the controller called when clicking here is this(and where I suppose the failure is):
public function seguirAction($suenoid)
{
$em = $this->getDoctrine()->getManager();
$usuario = $this->getUser();
$sueno = $em->getRepository('SuenoBundle:Sueno')->findOneBy(array('id' => $suenoid));
$usuario->getSuenosSigue()->add($sueno);
$em->persist($usuario);
$em->flush();
// $suenos = $em->getRepository('SuenoBundle:Sueno')->findBy(array('usuario' => $usuario->getId()));
//esto hay que cambiarlo entero para conseguir los sueños apropiados
//return $this->render('EstructuraBundle:Home:home.html.twig', array('suenos'=> $suenos , 'usuario' => $usuario));
return $this->render('SuenoBundle:Default:suenoFrontend.html.twig', array(
'sueno' => $sueno));
}
The thing is that when this render happens, the post fills the full page.
What I want is just to re-render this post in the homepage