I'm wanting to add gallery functionality to a WP Gutenberg block plugin. Easy to add a single image option with the media library, but I'm not sure how I would add the element for a gallery which then gives you all the built in WordPress functionality of caption and drag/drop sorting of the gallery. Having a real hard time finding a tutorial on including this functionality.
I did find one plugin that does just about what I want as the base, but want to extend the block to include other fields. Plugin in question is getwid slider block.
Figured it out.
Needed to add addToGallery=true and gallery=true to the mediaupload tag.
<MediaUpload
addToGallery={true}
onSelect={(media) => {setAttributes({images: [...images, ...media]});}}
type="image"
multiple={true}
gallery={true}
value={images}
render={({open}) => (
<Button className="slider-button select-images-button is-button is-default is-large" onClick={open}>
Add images
</Button>
)}
/>
Related
The website I work on daily requires me to input a lot of markup via a WYSIWYG editor. The more complex a page gets though, the more of a pain it is to code everything within the WYSIWYG editor. So, often I end up temporarily editing a page-template within Atom, where I can use nice things like autocomplete, tag auto-closing and Emmett, and also get a live preview as I change them, using Codekit. Then I can just cut and paste the resulting markup into the WordPress editor. My issue is that shortcodes don't work within this process since they are not processed within the PHP file so live preview won't work.
// The wordpress editor renders this
[grid class="center-xs]Hello World[/grid]
// Like this
<div class="container">
<div class="row center-xs"> Hello World</div>
</div>
// PHP files/Atom just render it like this
[grid class="center-xs]Hello World[/grid]
Long story short, I want to edit my code in an external code editor for efficiency's sake, but I also want to use shortcodes for consistency and maintainability's sake.
Any idea how I can do that?
You can't.
You can't simply take just the contents of the WYSIWYG editor and use it as a WYSIWYG editor from Atom.
You can, however;
Take your code from your WordPress WYSIWYG editor.
Put it into your editor, Atom.
Edit it in your editor, Atom.
Put it back into your WordPress WYSIWYG editor in WordPress and save it.
Best solution
Your best bet is to create a custom page template using PHP for the specific page and then use <?php echo do_shortcode( '[grid class="center-xs]Hello World[/grid]' ); ?> inside there.
Trying to build a custom block with settings in Advanced block settings tab which opens in the sidebar on RHS...
WordPress' default blocks seem to have settings there but unfortunately can't find it documented anywhere...
Any pointers would be really helpful!
Update 2018/08/16 The inspector controls links seem to have moved as Gutenberg developed since I originally wrote this.
The rough idea is that everything you add as a child of <InspectorControls>, will be at the sidebar when the user focuses on your block:
return (
<InspectorControls>
{/* Whatever is inside this block will be displayed on the sidebar */} .
</InspectorControls>
{/* Whatever is outside, will be displayed on the editor as usual */}
)
Take a look at this article for reference:
https://medium.com/#eudestwt/how-to-make-an-editable-wordpress-gutenberg-block-with-inspector-controls-on-the-sidebar-8779f4eddf8e
I think what you're looking for are Gutenberg's InspectorControls. I have found an example from lucasstark/gutenberg-gravityforms that shows them in use.
Digging through the Gutenberg I have found the following options but no official docs (best they have is this) showing off their usage:
InspectorControls.CheckboxControl
InspectorControls.RadioControl
InspectorControls.RangeControl
InspectorControls.SelectControl
InspectorControls.TextControl
InspectorControls.TextareaControl
Hope that helps.
Sorry for bad english, it is not my first language
I am new to WordPress, and I want to create my own theme from scratch.
I know functions like
wp_nav_menu(array('theme_location' => 'main_menu'))
or the_content()
But I dont know what function to use in order to allow the WordPress "Customize Page" to choose what image to display on the page.
What do I need to write instead of <img src="<?php bloginfo('stylesheet_directory');?>/images/myImage.png" /> so the website admin could change the image from the customize tool, without having to change or add an image manually in the wordPress directory ? Thank you for your time
I've been using the Fotorama plugin to create a slider on my website. It works as it should, but I want to change the size of the thumbnails that are shown, and I can't figure out how. The website is: http://jeannebard.ch/?p=123.
See the full list of options for fotorama here: http://fotorama.io/customize/options/
Options can be passed via data attributes:
<div class="fotorama"
data-thumbwidth="120"
data-thumbheight="120">
<img src="1.jpg">
<img src="2.jpg">
</div>
...or JavaScript:
$('.fotorama').fotorama({
thumbwidth: '120',
thumbheight: '120'
});
...or the Shortcode if using the plugin version:
[gallery ids="1,2,3" nav="thumbs" thumbwidth="120" thumbheight="120"]
This example would set the thumbnails twice their current size, to 120x120.
You can change the default thumbnail size via the WordPress admin area.
Go to: Settings > Media
Update: The Fotorama plugin doesn't seem to use the WordPress media settings. See here instead for an alternative answer.
I am trying to add a button to my WordPress template. Basically, I have the post and then there is the Related Posts Thumbnails widget that appears. I want the button to go between the text of the post and the related posts thumbnail widget. The code in my 'Single Post' that contains all of this is as follows:
<div class="post-content">
<?php the_content(__('<em><strong>More:</strong> Read the rest of this entry...</em>', 'life-is-simple')); ?>
</div>
I know the Related Posts Thumbnails plugin falls within this code because it's at that place when I 'Inspect Element' on Google Chrome. I can't find how to edit the order of things within that div though. Any help would be greatly appreciated, thanks!
EDIT
Clarification: I am using the Life Is Simple WordPress theme although it has been custom editing quite a bit (mostly on the CSS side of things though).
That plugin is probably appending the output to the_content with a filter .
That means , that the output is being added to the_content automatically. it is a common behaviour.
You need to look at the plugin´s admin interface to see if you can have an alternative way (I believe there is ) which is using a template tag. in that case, you should put the template tag after the div where the the_content() is .
EDIT I :
After a small dig, - in fact there is - you need to put
<?php get_related_posts_thumbnails(); ?>
Then the plugin should know by itself not to append to the_content.
For parameter passing, or if something is not working, go read their APi or help files.
You'll probably need to edit single.php or archive.php in your theme. If nothing is occuring there that looks familiar, it's probably using a loop. In which case you might find what you are looking for either in loop.php, loop-single.php, or loop-archive.php depending on what type of page you are on and how the theme was constructed. Add your button near where you find Read the rest of this entry...
With more information (such as what theme you are using), one might be able to help more as well.