Tag: Media

Simple Calendar – Google Calendar

Simple Calendar is the easiest way to add Google Calendar events to your WordPress site. Quick to setup. Fine-tune to your needs. Mobile responsive. Beautifully designed.

SIMPLE CALENDAR FEATURES

– Display events from any public Google Calendar.
– Keep managing events in Google Calendar. No need to create events in WordPress.
– Out-of-the-box designs that match your theme’s look and feel.
– Fully responsive and mobile-friendly monthly grid and list views.
– Customize event content display using simple tags. No coding required.
– Combine multiple calendars into single displays explicitly or using categories.
– Intuitive, simple display configuration changes for fine tuning.
– Advanced settings to adjust time zones, date/time formats and start of the week.
– Integration with Event Calendar Newsletter for quickly turning your events into a newsletter-friendly format.
– Additional functionality offered with add-ons.
– Translations available with more being added on a regular basis. Translations welcome!

 

 

How to integrate your Google Calendar

Please Note: your google Calendar must be set to Public in order for this integration to work.

If you need help making your Google Calendar public, please check the following article https://sites.temple.edu/knowledge-base/how-to-make-your-google-calendar-public/

  1. Navigate to the ‘Plugins’ tab from the Dashboard.
  2. In the search bar search for ‘simple Calendar’.
  3. Click the ‘Activate’ button.
  4. Once activated, click the ‘Settings’ link.
  5. Enter the following api key into the ‘Google API Key’ box AIzaSyBqjOgheI-cSVnxjLX-MsMrL8sEF1MtNj8
  6. Click the ‘Save Changes’ button. 
  7. Click the ‘Add New’ tab in the Calendars section of the dashboard.
  8. Click the ‘Google Calendar’ tab under ‘Calendar Settings’
  9. Enter your Calendar ID into the ‘Calendar ID’ box.
    1. If you need help finding this, please check the How to find your calendar ID support article.
  10. Hit the blue ‘Publish’ button.

you are all done and should now be able to see your Google Calendar integrated into your site.

Note: If you want to embed the Calendar on a specific page you can grab the ‘shortcode’ from Calendars –> All Calendars.

Hover Effects in Elementor

Hover Effects

Elementor provides Hover Effects that help to increase and improve your website’s engagement and design interaction.

Hover effects can be applied at the Widget, Column, and Section level, and can be combined to create unlimited effect variations.

Wherever you see the Normal and Hover buttons  , you have the option to add hover effects.

WP 1 slider

Description

Documentation  | Demo

WP 1 slider – is probably the most feature-rich Free WordPress slider. While doing 1000s of WordPress website for different clients, we came across various slider requirements. From our learning – we made a slider with the most useful features, variety of layout and configuration options and here it is – WP 1 Slider!.

WP 1 Slider – is developed considering user friendliness, features, layout designs for various users.

FREE FEATURES:

  • Add unlimited amount of images to the slider.
  • Add unlimited sliders in one page.
  • Enable/disable buttons (with/without link) on the slider.
  • Separate slider settings for each slider.
  • Separate caption settings for each slider.
  • Four different caption layouts for each slider.
  • Separate pager setting (slider navigation pager) for each slider.
  • Four different dot pager(slider navigation pager) layouts for each slider.
  • Ten different thumbnails pager(slider navigation pager) layouts for each slider.
  • Separate navigation / Arrows setting for each slider (7 designs to choose from).
  • Two different box shadow for slider image.
  • Nine different positions for slider title and description within image.
  • Ability to change colors of title,description,buttons and button hover on slider image.
  • Ability to change font size of slider title and description on image.
  • Ability to change background color and active color of dot pager navigation on slider image.
  • Add unlimited sliders in widgets.
  • Slider is fully responsive.
  • Easy usage via Shortcode.

 

 

Installation

  1. Activate the plugin through the ‘Plugins’ menu in WordPress.
  2. For customizing the plugin’s settings, click on WP 1 Sliders option menu in WordPress left admin menu.
  3. To display the slider in the frontend, please use dynamically generated shortcode from shortcode WP1S Usage metabox or you can use ‘Add WP 1 slider’ button in post or page for easy insert of the slider into post/pages.

 

Slider Manager

Once the plugin is installed and activated you will find a menu named “WP 1 Slider” in the left menu bar of the admin menu.Once you click on that menu , you will be redirected to the plugin’s listing page and you will see the add new button, once you click on that button you will be redirected to the slider page where you can create slider. Basically there are 6 type of slider type with its own settings configurations which is individually described below.

Creating New slider

This is the landing page for plugin. Here you can see the listing of the slider created along with its respective shortcodes. Here you can see Add new button at top of slider listing table.For creating a new slider, you will simply need to click on the Add New submenu of the Wp 1 sliders menu or click on the Add new button in the slider manager’s listing table. You can also edit or delete slider from here.Once you click the button, you will be redirected to the new slider builder page where you can add the unlimited numbers of slides.

Slider Builder Page

Slider Builder Page

This is the builder page of plugin where you can add unlimited numbers of images ,post ,videos ,woocommerce product,facebook image or instagram images slides and build awesome slider.
In this page you will see Slides metabox inside this metabox you will see the Slider type option which include image slide,video slide,post slide,woocommerce slide,instagram slide and facebook slide option.
Below are the detail description for each slide type.

Creating Image Slider

Once you have selected the image slide in Slider Type option then you will see the Slider mode for image slide option , inside this option you can select either normal mode or animation mode.If you want to create simple slider then you can choose normal mode and if you want to have animation effects and layers in slider then you have to choose the animation mode.You will also see the Add Image Slide button from where you can add unlimited number of image slides.Below are the detail description for these two mode:

    • Normal Mode

Normal Mode

After selecting the normal mode, you can click on the ‘Add Image Slide‘ button then you will see the untitled slide.Once you click in untitled slide a slide box will appear where you can add the available input fields in the slide. You can see all the available fields in the slide box as shown above in the image. You can enable or disable the buttons and can give text and link for button.

General Settings

Just below the Slides Metabox ,you will see Slider Style option which include Single Slide Layout and Carousel Slide Layout.These two option include different settings configurations.
Below are the detail description for each slide style:

      • Single Slide Layout

General Setting

When you will select the single slide layout then the Slider settings,Caption settings,Pager Settings,Navigation arrows settings will appear where you can switch the tab by clicking on each setting tab to go to respective setting tab and can edit the way you want to display slider by changing your own setting options.
We have following feature available in our current version to choose from:

        • Slider Settings:

Slider Setting

Allows you to choose either display slider box shadow or not and allow you to choose shadow box types template.

        • Caption Settings:

Caption Setting

Allows you to choose four different caption types option with its respective title font size, title font color,description font color and size,button color,background color,border color and caption position settings.

        • Pager Settings:

Pager Settings

Allows you to choose either display dot pager or thumbnail pager or pagination pager or disable the pager.

Visualizer: Charts and Graphs

Description

Visualizer: Tables and Charts Manager for WordPress (Lite) plugin is a simple, easy to use and quite powerful tool to create, manage and embed interactive charts & tables into your WordPress posts and pages.

The plugin uses Google Visualization API and DataTables.net to add responsive & animated charts/diagrams, which support cross-browser compatibility (adopting VML for older IE versions) and cross-platform portability to iOS and new Android releases. Is the best Excel to WordPress solution who let’s you insert charts to your wp site using a simple chart builder.

 

9 CHART TYPES

This WordPress graph plugin provides a variety of charts that are optimized to address your WordPress data visualization needs. It is line chart,flow chart, area chart, bar chart, column chart, pie chart, geo chart, gauge chart, candlestick chart and scatter chart. These charts are based on pure HTML5/SVG technology (adopting VML for old IE versions), so no extra plugins are required. Adding these charts to your page can be done in a few simple steps. The premium version can act as a interactive WordPress Table plugin, with sorting capabilities.

FLEXIBLE AND CUSTOMIZABLE

Make the charts your own. Configure an extensive set of options to perfectly match the look and feel of your website. You can use Google Chart Tools with their default setting – all customization is optional and the basic setup is launch-ready. However, charts can be easily customizable in case your webpage adopts a style which is at odds with provided defaults. Every chart exposes a number of options that customize its look and feel.

HTML5/SVG

Charts are rendered using HTML5/SVG technology to provide cross-browser compatibility (including VML for older IE versions) and cross platform portability to iPhones, iPads and Android. Your users will never have to mess with extra plugins or any software. If they have a web browser, they can see your charts.

SEE HOW VISUALIZER CAN INTEGRATE WITH YOUR WEBSITE

 

How to set up Visualizer

Knight Lab TimelineJS

Description

A simple shortcode plugin to add the TimelineJS made by Knight Lab. Now updated to support TimelineJS3.

Supports custom width and height, Google Spreadsheet and JSON data sources and many more.

Checkout how to create your amazing Timeline at http://timeline.knightlab.com/

To embed your timeline use the button located at the post content editor (TinyMCE).

You can also embed the Timeline on your post using this shortcode :
[timeline src=”Your source url here”]

H5P

Description

One of the great benefits with using H5P is that it gives you access to lots of different interactive content types, such as presentation, interactive video, memory game, quiz, multiple choice, timeline, collage, hotspots, drag and drop, cloze test (fill in the blanks), personality quiz, accordion, flash cards, audio recorder.

Another great benefit with H5P is that it allows you to easily share and reuse content. To use content created with H5P, you simply insert a shortcode [h5p Id="1"] where you wish for the content to appear. To reuse content, you just download the H5P you would like to edit and make your changes – e.g. translate to a new language or adjust it to a new situation.

H5P is:

  • Open Source
  • Free to Use
  • HTML5
  • Responsive

Working with images – Gutenberg

Working with Images in Gutenberg

One of the cool features of the new Gutenberg editor is that it allows you to search for available block options (and there are a lot of them!). To find all image block options, click the add block icon and type images in the search bar. From there, you will see all of the image block options.

1. Image Block

The most obvious option is the image block. Once you click on the image block, you can either upload an image from your computer or from the WordPress media library.

Once you upload your image you will see it in the block. You have the option to write a caption directly in the content area, including options with formatting and adding links.

Add a caption to your image.

You can also choose left, centre, right alignment, or wide or fullscreen for the image. The wide width and full screen format is dependent on theme support.

The wide and fullwidth image option.

Once your image is uploaded in the block, you can find more Advanced Settings by clicking on the settings icon at the top right corner. Here you can add Alt text, choose image size, change image dimensions, and/ors link settings.

2. Gallery Block

To add images for the gallery block, you can use the same steps as you did to add an image, simply by adding more than one image. You can choose multiple images at once. There’s a summary at the bottom showing selected images, if you hit clear then it deselects all of them.

If you want to deselect just one image, you click on the check mark icon on the image selected. Once you have all of your photos selected, click ‘create gallery’ and then ‘insert gallery’.

Now your gallery will be in your post content. You can write captions for each image directly in the editor, the image captions in the gallery show up directly over the image at the bottom.

You can edit the styling or the caption and add a link just as you can in the image block. For the gallery block you can also have wide width and full screen mode.

Gallery Block Settings:

If you go to the settings, you’ll have some more options. If you change the columns for your gallery, depending on the number of images included, the last photo will stretch to full width. For example, if you have 3 images, and you choose 2 columns, then you will have the third image stretched out into full width.

You can also crop the images so they are the same height.

3. Cover Image

A cover image is an image with text on it. It’s mostly useful as a full screen or widescreen at the top of the page/post or as a divider for longer posts.

Once you edit your image, you can choose the widescreen or full screen and add the cover image text. It will show the dark overlay so you can write caption over image. It’s a good feature to build pages in Gutenberg.

Cover Block Settings:

You can adjust the opacity of the background image. For the fixed background option, if activated then the image is fixed to the bottom or top of the page.

4. Image Embed Blocks

There are a couple of embed blocks where you can embed your content from your social media websites. At the moment you can use Instagram and Flickr available but more will likely be added soon. As an example, we will use Instagram.

Add your Instagram URL and it will add the image Instagram style (with likes, comment, Instagram border).

Working with Images – Classic Editor

When creating or editing a WordPress page or blog post, you can easily add images at any time using the WordPress Media Uploader tool. Here’s how to add an image, step-by-step, using the media uploader.

http://wordpress.tv/2013/03/12/how-to-create-an-image-gallery-in-wordpress/

Step 1 – Placing your cursor

In order to add an image to your page or post, you must first insert your cursor in the place in the text where you want the image to appear. By placing your cursor within your text, you can add images inline with your content. You can also place your cursor on a blank line if you want the image to appear by itself instead.

File:add-image-insert-cursor.png

Tip: It’s a good idea to place your cursor on the left margin of your text, even if you want the image to appear on the right. That’s because there is a special setting called Alignment that allows you to control whether the image appears on the right or the left side of the text. It even controls how text flows around the image automatically.

Step 2 – Click the Add Media button

Once you’ve placed your cursor on the line where you want your image to appear, click on the Add Media button to launch the media uploader interface, and then select the Insert Media option from the list of actions in the left side of the media uploader window.

File:add-media-button.png

Step 3 – Add or Select Your Image

You can add or select the image you want to add to your page or post by choosing from either of the following options in the center of the media uploader window:

  • Upload Files: Upload the image you want to use from your computer by dragging it into the upload area.
  • Media Library: Select from any previously uploaded images in the media library by clicking on the one you wish to add to your page or post.

Once you have selected or uploaded the image you want to add, You will see a checkbox next to the thumbnail confirming your selection, and see information about it displayed in the Attachment Details pane on the right hand side of the media uploader interface.

Step 4 – Attachment Details

The Attachment Details pane displays a small un-cropped thumbnail of the image, as well as important information such as the filename, date uploaded, and image dimensions in pixels.

There are also action links that allow you to Edit Image, which takes you to the Edit Image page, or to Delete Permanently to remove the image from your site.

In addition, you can edit the following media information:

  • Title: The title of this media.
  • Caption: The caption for this image. The text you enter here will be displayed below the image.
  • Alternate Text: Enter the Alt text for the image, e.g. “The Mona Lisa” to describe the media.
  • Description: A description for this particular media.

For more information on these media settings, see the Edit Media page.

Step 5 – Attachment Display Settings

The Attachment Display Settings pane controls how the image is displayed when viewed on the site.

You have options to set how you would like the image aligned on the page (in relation to the text and margins) and what the link behavior of the image will be, In addition you can set what size image you would like to display on your page.

Image Alignment

The Alignment setting allows you to determine where you would like the image to appear in your content area and how it interacts with any text on the page. You have the following image alignment options to choose from:

  • Left: Aligns the image on the left hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the right.
  • Right: Aligns the image on the right hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the left.
  • Center: Aligns the image to the center of the page, with no text displayed around it.
  • None: Inserts the image in to the page with no alignment
Top row: Left and Right alignments. Bottom row: Center and “None” alignments

 

Image Link

The Link To settings determine the URL/web address to which the image will be linked when clicked on by a visitor to your site. You can specify the following image link settings:

  • Attachment Page: Links your inserted image to its WordPress media attachment page.
  • Media File: Links your inserted image directly to the original, full-size version of the file.
  • Custom URL: Allows you to set a custom link URL for your inserted image to link to when clicked.
  • None: This setting will remove the link completely, rendering the image “un-clickable”.

Image Size

The Size settings determine the size of the image you are adding to your site. By default WordPress creates a range of four image size for you to choose from:

  • Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.
  • Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side.
  • Large: Displays a large-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space.
  • Full Size: Displays a full-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.
Thumbnail, Medium, and Large image sizes (Image Alignment: Left)

You can visit the Settings>Media section of your WordPress dashboard to customize the above image sizes.

Step 5 – Inserting the image

Once you have determined your image settings, click on the blue Insert into post or Insert into page button, to add the image to your page or post. After the image uploader window closes, you will see the image in the text editor window, including a preview of the alignment of the image, if you have specified an image alignment.

At any time, you can edit the image settings by clicking on the Edit Image button in the upper right-hand corner. You can remove the image from your page/post by clicking on the Remove Image button.

Uploading Images – Gutenberg editor

When creating or editing a WordPress page or blog post, you can easily add images at any time using the WordPress Media Uploader tool. Here’s how to add an image, step-by-step, using the Gutenberg editor. If you would like more information about Media in WordPress, please check out this article

 

Step 1 – Add Block

In order to add an image to your page or post, you must first insert your cursor in the block where you want the image to appear. By placing your cursor within your text, you can add images inline with your content. You can also place your cursor on a blank line if you want the image to appear by itself instead.

 

Step 2 – Add Image block

Here you will want to select the ‘Image‘ block

Step 3 – Add image

At this point, you will be given three options for uploading the image onto your post/page.

  1. Upload – Upload will allow you to upload your media files to the WordPress site. once you upload an image once this way you can find the media file in the ‘Media Library’
  2. Media Library – This is the gallery that holds all your Uploaded media content for your the WordPress site.
  3. Insert from URL – Here you can share an URL to an image and have the linked image appear on the page.

 

Step 4 – Working with the Image

Once you have inserted the image onto your Post/Page you can edit the image by clicking on the image. Once you have clicked on the image, there will be settings where you can edit the image on top of the image, as well as to the right.

Image Link Settings

The Link To settings determine the URL/web address to which the image will be linked when clicked on by a visitor to your site. You can specify the following image link settings:

  • Attachment Page: Links your inserted image to its WordPress media attachment page.
  • Media File: Links your inserted image directly to the original, full-size version of the file.
  • Custom URL: Allows you to set a custom link URL for your inserted image to link to when clicked.
  • None: This setting will remove the link completely, rendering the image “un-clickable”.

Image Size

The Size settings determine the size of the image you are adding to your site. By default WordPress creates a range of four image size for you to choose from:

  • Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.
  • Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side.
  • Large: Displays a large-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space.
  • Full Size: Displays a full-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.

When you select one of these default sizes this will automatically change the Image Dimensions.
Thumbnail, Medium, and Large image sizes (Image Alignment: Left)

You can visit the Settings>Media section of your WordPress dashboard to customize the above image sizes.

Image Alignment

The Alignment setting allows you to determine where you would like the image to appear in your content area and how it interacts with any text on the page. You have the following image alignment options to choose from:

  • Left: Aligns the image on the left hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the right.
  • Right: Aligns the image on the right hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the left.
  • Center: Aligns the image to the center of the page, with no text displayed around it.
  • None: Inserts the image in to the page with no alignment
Top row: Left and Right alignments. Bottom row: Center and “None” alignments

 

Parallax in Gutenberg

What is Parallax?

Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.

Setting up Parallax in Gutenberg editor

  1. open the Page you want to add the Parallax to.
  2. Click the check icon to add a new block.
  3. in the search bar search for ‘Cover’
  4. select the ‘Cover’ block.
  5. Upload or select the image you want to use for the Parallax.
  6. Click on ‘Block’ on the menu on the right side of the screen.
  7. Check the ‘Fixed Background’ button under ‘Cover Settings’
  8. Change the ‘Background Opacity to what ever setting you would like (the higher you change this, the darker the image will be.)
  9. Click on the image and write the text that you want.
  10. If you want the Parallax to take up the whole screen of the page, you can select the ‘Full width’ option above the block.