Is there any option to change the output of the WP block gallery component in Gutenberg editor?
Currently I set some images with external links (link to media attachment) and I get this result:
<ul class="wp-block-gallery columns-2">
<li class="blocks-gallery-item">
<figure>
<a href="...">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<a href="...">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
</ul>
But I want to also set the title attribute for anchor element. This is the result that I want:
<ul class="wp-block-gallery columns-2">
<li class="blocks-gallery-item">
<figure>
<a href="..." title="some title">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<a href="..." title="some title">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
</ul>
Thanks
You can use the blocks.getSaveElement filter to alter existing blocks. Take a look at this post on Wordpress Development
Related
I'm building a page using Bulma. Unfotunatly, I found something weird. When I hover over one of the two dropdown menus containing class "is hoverable", both of the dropdown menu's trigger, displaying both menu's at the same on.
I would like to only dropdown the one I hoover my mouse over. How could I make this?
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Projects
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href='/projects'>
Projects
</a>
<a class="navbar-item" href=''>
Edit
</a>
<a class="navbar-item" href="/projects/create">
create
</a>
</div>
<a class="navbar-item" href="/contact">
Contact
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Vue.js
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href='/vue'>
Page 1
</a>
<a class="navbar-item" href='/vue2'>
Page 2
</a>
<a class="navbar-item" href='/vue3'>
Page 3
</a>
</div>
You were not closing the divs correctly, two </div> were missing.
See below, now you can align them horizontally with respective Bulma classes/structure.
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Projects
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href='/projects'>
Projects
</a>
<a class="navbar-item" href=''>
Edit
</a>
<a class="navbar-item" href="/projects/create">
create
</a>
</div>
</div>
<a class="navbar-link" href="/contact">
Contact
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Vue.js
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href='/vue'>
Page 1
</a>
<a class="navbar-item" href='/vue2'>
Page 2
</a>
<a class="navbar-item" href='/vue3'>
Page 3
</a>
</div>
</div>
I have copied the code from http://demo.woothemes.com/boutique/product/woo-ninja-3/
<ul id="site-header-cart" class="site-header-cart menu">
<li class="">
<a class="cart-contents" href="http://demo.woothemes.com/boutique/cart/" title="View your shopping cart">
<span class="amount">£168.00</span> <span class="count">12 items</span>
</a>
</li>
<li>
<div class="widget woocommerce widget_shopping_cart" style="opacity: 1;"><div class="widget_shopping_cart_content">
<ul class="cart_list product_list_widget ">
<li class="mini_cart_item">
× <a href="http://demo.woothemes.com/boutique/product/woo-ninja-3/">
<img width="150" height="150" src="//demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771456709_fc540cc175_b.jpg?w=150&h=150&crop=1" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" srcset="//demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771456709_fc540cc175_b-150x150.jpg 150w, //demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771456709_fc540cc175_b-500x500.jpg 500w, //demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771456709_fc540cc175_b-800x800.jpg 800w" sizes="(max-width: 150px) 100vw, 150px">Woo Ninja </a>
<span class="quantity">6 × <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>15.00</span></span> </li>
<li class="mini_cart_item">
× <a href="http://demo.woothemes.com/boutique/product/flying-ninja/">
<img width="150" height="150" src="//demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771457369_92e02576a8_o.jpg?w=150&h=150&crop=1" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" srcset="//demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771457369_92e02576a8_o-150x150.jpg 150w, //demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771457369_92e02576a8_o-500x500.jpg 500w" sizes="(max-width: 150px) 100vw, 150px">Flying Ninja </a>
<span class="quantity">4 × <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>12.00</span></span> </li>
<li class="mini_cart_item">
× <a href="http://demo.woothemes.com/boutique/product/ship-your-idea-3/">
<img width="150" height="150" src="//demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771457549_3838523969_b.jpg?w=150&h=150&crop=1" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" srcset="//demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771457549_3838523969_b-150x150.jpg 150w, //demo.woothemes.com/boutique/wp-content/uploads/sites/79/2013/06/6771457549_3838523969_b-500x500.jpg 500w" sizes="(max-width: 150px) 100vw, 150px">Ship Your Idea Silver Plated Ring </a>
<span class="quantity">2 × <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>15.00</span></span> </li>
</ul><!-- end product list -->
<p class="total"><strong>Subtotal:</strong> <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>168.00</span></p>
<p class="buttons">
View Cart
Checkout
</p>
</div></div> </li>
</ul>
Into my own template; but while widget is updating data just fine for some reason the "cart contents" area, shown below, doesn't update the amount and item count.
<li class="">
<a class="cart-contents" href="http://demo.woothemes.com/boutique/cart/" title="View your shopping cart">
<span class="amount">£168.00</span> <span class="count">12 items</span>
</a>
</li>
How can my problem be resolved? I assume some js is missing?
WooCommerce requires you to add cart area to its method.
More about it can be found below:
https://docs.woocommerce.com/document/show-cart-contents-total/
Can someone tell me please how can i have different top menu when scrolling. You can see example on this site http://www.pizzafan.gr. It is static menu and if you scroll the menu items are changing.
You need to replace some coding in your header.html
First, you need to replace your below code:
<div class="sticky_logo_left">
<img src="/assets/site/images/logo_mobile.png" alt="Pizza Fan Logo" width="140" class="moblogo">
</div>
From:
<div class="sticky_logo_left">
<img src="/assets/site/images/logo_mobile.png" alt="Pizza Fan Logo" width="140" class="moblogo">
<ul class="quick_menu">
<li class="first desktop">
<a href="http://www.pizzafan.gr/el">
<img src="/assets/site/images/home.png" alt="" class="desktop">
<!--<img src="/assets/site/images/home-mobile.png" alt="" class="mobile" height="18">-->
<span>Αρχική</span>
</a>
</li>
<li class="first">
<a href="http://www.pizzafan.gr/el/menu/pizzas">
<img src="/assets/site/images/slice.png" alt="" class="desktop">
<img src="/assets/site/images/slice-mobile.png" alt="" class="mobile" height="18">
<span>Menu</span>
</a>
</li>
<li class="first">
<a href="http://www.pizzafan.gr/el/restaurants">
<img src="/assets/site/images/shopping.png" alt="" class="desktop">
<img src="/assets/site/images/shopping_mobile.png" alt="" class="mobile" height="18">
<span>Καταστήματα</span>
</a>
</li>
<li class="hover" data-toggle="modal" data-target="#callBackModal">
<a href="javascript:void();" class="callmeback">
<img src="/assets/site/images/call.png" alt="" class="desktop">
<img src="/assets/site/images/call_mobile.png" alt="" class="mobile" height="18">
<span>Call Me Back</span>
</a>
</li>
</ul>
</div>
And Then, change your static menu images with this color code: #00742D
just make your menu images with above mention color code.
and you will see same menu items in your scrolling menu check this similar scrolling menu example.. Menu both in simple and scrolling with same menu items/ options.
I trying to put few html elements to show them properly. But could not get how to place them inline.
CODEPEN : CODEPEN DEMO
<div class="jumbotron">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" height="35">
</a>
<div class="media-body">
<h6 class="media-heading"> This is small description of image </h6>
</div>
</li>
</ul>
<h6>Wat more? ....... </h6>
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
Only value
</a>
</li>
<span> Above code should look like this </span>
<img src="http://snag.gy/cPTCL.jpg">
I am using twitter bootstrap and the 'media-grid' feature to display some thumnabils of images. Here is what it looks like right now: http://jsfiddle.net/vXMMA/
What I would like to do is add a caption to these thumbnails.. can someone offer some idea on what changes to CSS I would need to make to enable this.
The latest bootstrap comes with a .caption class that you can add to your thumbnail grid, you can place it above or below your media grid quite easily and it works like so:
<ul class="thumbnails">
<li class="span2">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
<li class="span2">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
<li class="span2">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
<li class="span2">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
</ul>
<hr>
<ul class="thumbnails">
<li class="span4">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
<li class="span4">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
</ul>
You can center the caption inside the image container by just modifying the .caption class and adding the text-align: center property, like so:
.caption {
text-align:center;
}
Demo: http://jsfiddle.net/2BBnR/
Note Noticed this post is old, so the other method posted is irrelevant with the latest bootstrap, the .media-grid class is no longer used.
HTML
<li>
<a href="#">
<legend >Caption</legend>
<img class="thumbnail" src="http://placehold.it/140x90" alt="">
</a>
</li>
CSS
legend { margin:3px; text-align:center;width:100%}
Working DEMO
Just use the <legend> tag before or after each image, and add the text-align:center style to the image grid.
See this demo, it works great.