I'm using the flexslider to create a carousel of pictures and use channel entries to populate the list items (images) that the flexslider uses to create the carousel.
Now I want to add a link to a pdf on al those list items that I have in a matrix field in the channel and that works also but only for the first list item.
Anybody knows why this is?
<div class="flexslider">
<ul class="slides">
{exp:channel:entries channel="lr_press"}
{if press_slider_switch != ""}
{press_artikel}
<li><img src="{press_beeld}" alt="{title}" /></li>
{/press_artikel}
{/if}
{/exp:channel:entries}
</ul>
</div>
Related
Prestashop option to hide unavailable attributes on product page doesn't work when attribute groups are used, for example color and size (for clothing shops).
I need to keep showing all possible combinations, but grey out (or strikethrough) the combinations with no stock.
Like this:
I tried several things.
In Prestashop 1.6 the following piece of code worked to apply css class (.out-of-stock-float-left) to unavailable combinations:
{elseif $group.group_type == 'radio'}
<ul id="group_{$id_attribute_group}">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
{if {$group.attributes_quantity[{$id_attribute|intval}]} > 1} <!-- product in stock -->
<li class="input-container float-left">
<input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}"
name="group[{$id_attribute_group}]"
value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
<span class="radio-label">{$group_attribute.name}</span>
</li>
{else} <!-- product out of stock -->
<li class="input-container out-of-stock-float-left">
<input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}"
name="group[{$id_attribute_group}]"
value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
<span class="radio-label">{$group_attribute.name}</span>
</li>
{/if}
{/foreach}
</ul>
{/if}
When changing combinations there is an ajax request. I don't know how to grey out combinations with no stock and make them not clickable.
Thanks
Using a simple request I'm trying to get from this html page some information stored in "alt". The problem is that, within each instance, the information is separated in multiple lines that start with "img", and when I try to access it, I can only read the first instance of "img" and not the rest, but I'm not sure how to do it. Here's the HTML text:
<div class="archetype-tile-description-wrapper">
<div class="archetype-tile-description">
<h2>
<span class="deck-price-online">
Golgari Midrange
</span>
<span class="deck-price-paper">
Golgari Midrange
</span>
</h2>
<div class="manacost-container">
<span class="manacost">
<img alt="b" class="common-manaCost-manaSymbol sprite-mana_symbols_b" src="//assets1.mtggoldfish.com/assets/s-d69cbc552cfe8de4931deb191dd349a881ff4448ed3251571e0bacd0257519b1.gif" />
<img alt="g" class="common-manaCost-manaSymbol sprite-mana_symbols_g" src="//assets1.mtggoldfish.com/assets/s-d69cbc552cfe8de4931deb191dd349a881ff4448ed3251571e0bacd0257519b1.gif" />
</span>
</div>
<ul>
<li>Jadelight Ranger</li>
<li>Merfolk Branchwalker</li>
<li>Vraska's Contempt</li>
</ul>
</div>
</div>
Having said that, what I'm looking to get from this is both "b" and "g" and store them in a single variable.
You can probably grab those <img> elements with the class "common-manaCost-manaSymbol" like this:
imgs = soup.find_all("img",{"class":"common-manaCost-manaSymbol"})
and then you can iterate over each <img> and grab the alt property of it.
alts = []
for i in imgs:
alts.append(i['alt'])
or with a list comprehension
alts = [i['alt'] for i in imgs]
How can I use the aria-attribute aria-labelledby for combo box (input+autocomplete list) correctly?
According to the W3C, the aria-labelledby property provides the user with a recognizable name of the object.
I've found the following example on W3C:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="ex1-label">
</div>
<ul aria-labelledby="ex1-label"></ul>
</div>
But I've noticed that aria-labelledby isn't descriptive. Values in aria-labelledby for different element are used the same.
Maybe I can use aria-labelledby like this:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="textBox">
</div>
<ul aria-labelledby="autocomplete-list"></ul>
</div>
The WAI ARIA attribute aria-labelledby is used when you can't use the normal <input> + <label> combination to label a form element, e.g. because you are using a custom form element. In other words, it is used in situations where you can't use the <label>'s for attribute to define a label for the input (e.g.
<input id="communitymode" name="communitymode" type="checkbox"> <label for="communitymode">communiti wiki</label>; note that the for attribute's value refers to the input's id attribute.)
With aria-labelledby, your reference works in the opposite direction as the for attibute: you tell the browser or the screen reader where to find the "label" for the form control it has just encountered.
<div class="combobox-wrapper">
<div>
<span id="combolabel">Select your country:</span>
<input type="text"
aria-labelledby="combolabel">
</div>
<ul aria-labelledby="combolabel"></ul>
</div>
In the above code sample, both the <input> element and the <ul> element are labelled by the <span> element with id "combolabel".
Remember the first rule of ARIA is don't use ARIA when native HTML elements exist. If you are trying to create an accessible autocomplete box try this:
http://wet-boew.github.io/v4.0-ci/demos/datalist/datalist-en.html
It does not use ARIA and follows all applicable W3C rules and guidelines.
I'm having trouble wrapping my head around how to create a dynamic menu with GWcode categories in ExpressionEngine. I would like the menu to go a certain depth only for current {segment_2} (parent) category and the rest of the parent categories to just stay a depth of 1.
For instance, if the url was: domain.com/products/medical-tables-cabinets/eta-classic-series/ it would output this:
<ul class="nav-menu">
<li>Power Tables</li>
<li class="active submenu">Medical Tables & Cabinets
<ul class="nav-submenu">
<li>ETA Alpha Series</li>
<li class="active submenu">ETA Classic Series
<ul class="nav-submenu">
<li>Entry A</li>
<li>Entry B</li>
<li>Entry C</li>
</ul>
</li>
<li>Style Line Cabinet Models</li>
<li>Echo Image Series</li>
<li>Bariatric Series</li>
<li>Family Practice</li>
<li>Treatment & Bedside Cabinets</li>
<li>Managed Care Quick Cabinets</li>
<li>Recovery Couches</li>
</ul>
</li>
<li>Pediatric Equipment</li>
<li>Medical Seating</li>
<li>Blood Drawing Chairs</li>
<li>Tubular Steel & Accessories</li>
<li>Physical Therapy Equipment</li>
<li>Kangoo by Clinton</li>
<li>Training Room Furnishings</li>
<li>Index by Model #</li>
<li>Clinton-Eco Tables</li>
</ul>
I got it working, but I still need to go a little deeper. Here is the basic concept:
{exp:gwcode_categories
channel="products"
style="linear"
}
{if depth1_start AND segment_2 != cat_url_title}
<li>{cat_name}</li>
{/if}
{if depth1_start AND segment_2 == cat_url_title}
<li class="active submenu">{cat_name}
<ul class="nav-submenu">
{/if}
{if depth == 2 AND segment_2 == parent_url_title}
<li{if segment_3 == cat_url_title} class="active"{/if}>{cat_name}</li>
{/if}
{if depth1_end AND segment_2 == parent_url_title}
</ul>
</li>
{/if}
{/exp:gwcode_categories}
In ExpressioneEngine, I'm creating a list with conditionals that is returning some strange behavior. The code below is part of a bigger set:
<li><h4>DERMATOLOGY</h4>
<ul>
{exp:channel:entries channel="specialist" dynamic="no" orderby="sp_order" sort="asc"}
{if sp_specialty == "sp_dermatology"}
<li>
<img src="{sp_headshot}" />
<p>{title}</p>
</li>
{/if}
{/exp:channel:entries}
</ul>
</li>
<li><h4>EMERGENCY AND CRITICAL CARE</h4>
<ul>
{exp:channel:entries channel="specialist" dynamic="no" orderby="sp_order" sort="asc"}
{if sp_specialty == "sp_emergency"}
<li class="{switch='one|two'}">
<img src="{sp_headshot}" />
<p>{title}</p>
</li>
{/if}
{/exp:channel:entries}
</ul>
</li>
What happens, in the case of EMERGENCY AND CRITICAL CARE, is that with the 5 entries I have under that, the classes are returned like this: two, one, one, one, two. Any suggestions on getting the behavior I need?
I see what you mean. The switch variable applies its logic to all entries returned by the entries loop - which is why you're seeing odd numbering in your rendered page - because it's applying them to entries returned by the loop that you are then applying conditionals to in order to do your grouping. You could use the search param to do some of that for you, returning only the entries you're looking for within each loop. Like this:
<li><h4>DERMATOLOGY</h4>
<ul>
{exp:channel:entries channel="specialist" search:sp_specialty="=sp_dermatology" dynamic="no" orderby="sp_order" sort="asc"}
<li>
<img src="{sp_headshot}" />
<p>{title}</p>
</li>
{/exp:channel:entries}
</ul>
</li>
<li><h4>EMERGENCY AND CRITICAL CARE</h4>
<ul>
{exp:channel:entries channel="specialist" search:sp_specialty="=sp_emergency" dynamic="no" orderby="sp_order" sort="asc"}
<li class="{switch='one|two'}">
<img src="{sp_headshot}" />
<p>{title}</p>
</li>
{/exp:channel:entries}
</ul>
</li>
This way each loop returns ONLY the matching items you're looking for, eliminating the need for the conditional and allowing the switch param to operate as it wants to - applying itself in alternating fashion to every returned entry from the loop.