We are creating a wordpress-based project, but we came to an issue where we need to add two or more native wordpress galleries (to keep the fancybox plugin viewing). So is there a plugin/way how to add more native galleries into one wordpress page?
PS: We tried nextgen, but then the large view opens 2 times 1time fancybox 1time nextgen gallery ... So theoreticly it would be enaugh to turn off the nextgen viewing, but keep the nextgen gallery generation but the question is how?
PS2: We found a half-solution - you can add two [shortcodes] with image ids like
http://codex.wordpress.org/Gallery_Shortcode but this way you can click through to all these galleries - but our goal is two click through only in each gallery itself.
I found the solution it IS coding, but just a little ;-) :
make a specific CSS class e.g. .mySuperGallery01
into your page, insert a gallery shortcode e.g. [gallery link="file" size="medium" ids="332,330,331"] that list of ids are ids of images uploaded through the media...
wrap the gallery shortcode with your e.g. div class like this:
<div class="mySuperGallery01">[gallery link="file" size="medium" ids="332,330,331"]</div>
For every shortcoded gallery wordpress will create an id #gallery-X where X is the order-number of your gallery on your page (#gallery-1, #gallery-2, #gallery-3,...)
Now go to settings => Fancybox for WP => Extra Calls
check that the "Additional FancyBox Calls" option is checked (turned-on)
Link through jquery to the galleries and add a groupNUMBER to each link but a different one for every next gallery by putting this into the textarea: $('.smallerGallery01 #gallery-X a').attr('rel','groupNUMBER'); one gallery = one piece of this code... just change the X and a NUMBER to the same value for every gallery example: $('.smallerGallery01 #gallery-1 a').attr('rel','group1');
$('.smallerGallery02 #gallery-2 a').attr('rel','group2');
Last thing you need to do is to actually "play" the fancybox on your class by inserting e.g. this code to the textarea:
jQuery(".smallerGallery01 a").fancybox({
'cyclic': false,
'autoScale': true,
'padding': 10,
'opacity': true,
'speedIn': 500,
'speedOut': 500,
'changeSpeed': 300,
'overlayShow': true,
'overlayOpacity': "0.3",
'overlayColor': "#666666",
'titleShow': true,
'titlePosition': 'inside',
'enableEscapeButton': true,
'showCloseButton': true,
'showNavArrows': true,
'hideOnOverlayClick': true,
'hideOnContentClick': false,
'width': 560,
'height': 340,
'transitionIn': "fade",
'transitionOut': "fade",
'centerOnScroll': true
});
9)Dummy entry: Of course you have to click the save changes button ;-)
NOTE: I recommend you to go step by step especially through the jQuery settings
ADVANTAGE: Since you have a specific class, you can also make specific styles just for your new-style gallery :)
Related
I am learning to develop WordPress theme and I am unable to find out how to align images, resize or crop them, or display them in a gallery format.
Image Alignment
CSS handles the alignments of images. When a user uploads an image and selects how their image will be aligned, WordPress simply adds a class based on the user's selected alignment (e.g. alignleft, alignright, aligncenter, etc.)
A complete list of such WordPress generated classes can be found here in WordPress codex.
Resize and Crop
It is recommended to use the default image sizes and manipulate the images with CSS, so that the site doesn't generate additional images unnecessarily and thus increase the size of the WordPress folders.
However, if you do need to resize or crop images when they're uploaded, as a theme developer, you can use the add_image_size() function in your theme's functions.php file.
Here are the parameters that this function takes:
add_image_size( string $name, int $width, int $height, bool|array $crop = false )
Here's an example use of the function:
add_image_size( 'custom-size-name', 440, 360 );
To do a hard vs soft crop, you can add a fourth (boolean true/false) parameter in the add_image_size() function.
For example, to do a hard crop:
add_image_size( 'custom-size-name', 440, 360, true );
Read more about this in codex
To use these sizes of post thumbnails, you can do this (inside a loop):
the_post_thumbnail( get_the_ID(), 'custom-size-name' );
or this (outside a loop)
the_post_thumbnail( '123', 'custom-size-name' );
// here 123 is the ID of the post, which has the thumbnail.
Gallery
To show the images in a gallery format, you either need to create a custom gallery view using css and js (or use one of the gallery css/js plugins), or use the default WordPress gallery shortcode.
An example usage of the shortcode in the WYSIWYG editor or the block editor (or even page builders)
[gallery ids="123,345,456,567"]
The ids used in the gallery shortcode refer to the ids of the images, not the posts they're related to (whether they are connected to any post or not).
To use the gallery shortcode in a .php file, use the do_shortcode() function:
<?php echo do_shortcode('[gallery ids="123,345,456,567"]'); ?>
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>
)}
/>
I have embedded the youtube video on my website in Wordpress. But when the user clicks on the video it will show in a popup. Not able to do that. I have tried the popups plugin.
You can use below wordpress plugin for play the video in lightbox popup.
https://wordpress.org/plugins/wp-video-lightbox/
Here you can see the simple installation steps to install in your theme.
https://wordpress.org/plugins/wp-video-lightbox/#installation
There are lots of Lightbox plugins serving the same business One of them which is easy to use as well is Fancybox plugin.
This plugin comes in all forms including wordpress plugin.
https://wordpress.org/plugins/easy-fancybox/
Try using this and make sure you configure it properly.
**********Updated Part**********
This is one of the way to implement it.
Below is the line of code required :
1.) adding the button for event triggering :
<i class="fa fa-video-camera"></i> Watch Video
2.)Configure the fancybox
$('.fancybox').fancybox({
autoSize: false,
autoDimensions: false,
width: 630,
height: 425,
fitToView: false,
padding: 0,
title: this.title,
href: $(this).attr('href'),
type: 'iframe'
});
Just in case, here's what Theme Options Pages are in WordPress:
http://css.dzone.com/articles/how-create-theme-options-page
I've been racking my brain trying to figure out how to get the Theme Options Page of any WordPress theme to appear on the 'Edit Page' of WordPress. Does anyone know how to do this so each page I create would have different results when published?
I think your problem here is that really WordPress is setup to have a single theme with a single set of options, what your trying to do is essentially have a new theme for each page.
Instead, you probably need individual Page Templates for those options that you would like to customize on a page by page basis (e.g. Blue Background, White Background, Large Logo etc).
If you'd like to have a series of options that are easy to adjust on the fly, you could set up some Custom Fields and then adjust your template to pull settings from them as needed.
First, define action like this:
function mytheme_customize_register( $wp_customize ) {
}
add_action( 'customize_register', 'mytheme_customize_register' );
In the theme selection page, links are shown below the active theme which shows its capabilities. Most of the time these are Widgets, Menus, and a Theme Options link if you run add_theme_page().
Since I created my own top-level menu and didn't use add_theme_page(), my path redirects to admin.php?page=chosen-slug instead of themes.php?page=chosen-slug and there is no Theme Options link in the Appearance section. Is there a way I can still display that link to show that my theme has options?
I guess a jQuery solution will have to do for now. It's not my first choice but at least it works.
PHP:
// Create the theme options link
add_action("admin_menu", "setup_theme_admin_menus");
function setup_theme_admin_menus(){
add_theme_page('', 'Theme Options', 'manage_options', 'sample-slug', '');
}
jQuery:
// Redirect link in Appearance to your top-level menu
$('#current-theme div.theme-options a[href="themes.php?page=sample-slug"]').attr('href', 'admin.php?page=sample-slug');
/*
* Hide the link created by add_theme_page(). Use each() since our <li> has no
* name and this makes sure the script always works even if its position changes.
*/
$('#menu-appearance a[href="themes.php?page=sample-slug"]').each(function(){
$(this).parent().hide();
});