how to upload image to reddit sidebar

A very common question amongst WordPress bloggers & site owners is "How do I add an image to my WordPress sidebar?" For a platform that makes publishing content so easy, you'd think at that place was an easy answer.

Up until now, there were basically two options:

  • install a plugin
  • learn a little bit of HTML code

As of WordPress 4.eight, you tin now add an image to your WordPress sidebar using the new image widget. No additional plugins. No coding required.

In this commodity, I'yard going to include instructions for all three methods. For most sites, I recommend using the new WordPress epitome widget. All the same, if you lot want advanced control over the styling of your image, you might desire to consider one of the other options.

3 Options

In that location are 3 ways to add an image to your WordPress sidebar:

  • The WordPress image widget
  • The WordPress text widget
  • Use a WordPress plugin

The WordPress image widget is recommended in near cases, especially if you are not that technical, and just want something basic.

The WordPress text widget is for those who sympathize basic HTML code and/or would like more avant-garde command.

Using a WordPress plugin could be benign for a number of specific use-cases. Image slideshows, paradigm lightboxes, etc. I'll talk virtually a few good options afterward on in the article.


The WordPress image widget was introduced in WordPress 4.8 (alongside the video & audio widgets). Information technology uses the default WordPress media library. If you've ever added an image in one of your posts, you lot should feel very comfortable with this process.

I'm going to apply the WordPress Customizer, which allows you lot to preview your site in existent-time. However, you could perform all of the following steps from theAppearance > Widgets page, too.

In a bustle? Lookout man our video on how to utilize the new WordPress image widget:

  • Navigate toAppearance > Customize

WordPress admin menu, customizer link

  • In the left sidebar, click onWidgets

WordPress customizer, widgets link

You might have more than one option to choose from hither. Each theme tin create every bit many sidebar areas as they'd like. Information technology is common for most themes to take a main sidebar, and one-4 footer sidebar areas. Hopefully, they are labeled accordingly. If not, this is where the Customizer comes into play. You'll exist able to come across exactly where each of your sidebars is located within your theme.

  • Click on the sidebar in which y'all desire to add together an paradigm

WordPress sidebars available

  • Click the "Add together a widget" push button

WordPress "add a widget" button

You can use the search box at the summit and type "image," or just gyre downwards until y'all see the image widget. When y'all discover information technology, but click on it.

WordPress image widget option

  • (optional) Provide a title for your image. The title will appear above the image, typically in a larger font size.
  • Click the "Add Image" button to open your Media Library

WordPress image widget basic options

At present you lot take 3 different ways you tin can add an image:

  • employ an existing paradigm y'all've already uploaded to your Media Library
  • upload a new image from your computer
  • add an image from another website by using its URL
WordPress image widget, add file in 3 ways
3 ways to add files to the WordPress image widget

Warning: Be careful calculation images from other websites. At any time, that website could remove the image without you knowing, which would make it disappear from your site equally well. And doing so actually costs the other website coin because y'all are using its server resource instead of your own. It'due south a best exercise to ask for permission, then download the image, upload it to your own site, and provide a link back to the site in which you found it.

Utilise an existing image from your Media Library

The media popup should default to displaying all the images in your Media Library.

  • Only click on any image
  • So click the "Add to Widget" push

WordPress media library, selecting an image

Upload a new prototype

  • In the superlative-left corner, click on the "Upload Files" tab
  • Drag & drop an prototype onto the screen -or- click "Select Files" and choose an epitome from your calculator
  • Then click the "Add to Widget" button

WordPress "upload files" screen

Add an image from a URL (not recommended)

  • In the left sidebar, click on the "Insert from URL" link
  • Enter the URL to the prototype
  • You tin leave the other options blank for now. I'll show yous how to adjust them in the next step.
  • Then click the "Add together to Widget" push button

WordPress insert image from URL

The last step is to publish your changes. Look for a push button in the top-left corner of the Customizer that says Save & Publish. Click that button to make your paradigm live.

That'due south the bare minimum to add an epitome to your WordPress sidebar. Nonetheless, I recommend you set the following options to optimize your image.

WordPress Prototype Widget Options

You should see a prissy preview of your prototype right there in the widget.

  • Click "Edit Epitome" to access a few options

WordPress image widget, edit button

Let's go over the available options:

  • Explanation (optional): A small caption that will appear straight below the image.
  • Alternative Text (recommended): A clarification of the image, most normally used past screen readers to read aloud to vision impaired users.
  • Size: The width & pinnacle of the image. Well-nigh themes will preclude the paradigm from alluvion exterior of the sidebar area, even so, you might want to cull a smaller size.
  • Link To (optional): If you want the paradigm to link somewhere, you have a few options.
    • None: No link
    • Media File: This will open the original, full-size image
    • Attachment Page: Near themes do not apply attachment pages, so this option will rarely be used. I'll probably merely misfile you if I try to explain information technology.
    • Custom URL: Apply this to link to some other page on your website, or whatever other site on the web
  • Avant-garde Options: These are for advanced users. If y'all don't know what they mean, it'southward best to get out them bare. But I'll quickly go over them.
    • Paradigm Title Attribute: Adds an HTMLtitle="" attribute to the<img> tag
    • Epitome CSS Class: Adds a course to the<img> tag. Ex:<img grade="rounded" src="" />
    • Open up link in a new tab: Adds target="_blank" to the<a> tag, which volition open up the link in a new tab
    • Link Rel: Adds an HTMLrel="" attribute to the<a> tag
    • Link CSS Class: Adds a class to the<a> tag
WordPress image widget details
All the options for your WordPress sidebar image

02 Using the WordPress Text Widget

Using the text widget to insert an paradigm into your WordPress sidebar allows for more than control and customization over the HTML code. If yous demand to add extra HTML, data attributes, or manipulate the lawmaking in another manner, this is the way to become.

Yous'll follow the same steps as above, but this time, instead of choosing the Image widget, you'll search for and choose theText widget.

Search for WordPress text widget

You'll demand to switch over from the Visualtab to theText tab.

Switch to TEXT tab in WordPress widget

And now you lot can enter the custom HTML code to insert your image.

For merely a standard prototype…

          <img src="https://yoursite.com/wp-content/uploads/2017/06/image-name.jpg" alt="Describe your paradigm" />        

For an image that links to another page or website…

          <a href="https://www.google.com/"><img src="https://yoursite.com/wp-content/uploads/2017/06/image-name.jpg" alt="Describe your image" /></a>        

For an image that links to the original, total-size epitome…

          <a href="https://yoursite.com/wp-content/uploads/2017/06/image-proper name.jpg"><img src="https://yoursite.com/wp-content/uploads/2017/06/image-proper noun.jpg" alt="Describe your prototype" /></a>        

You lot can switch back to theVisual tab to meet a preview of the image. This will allow you know that your HTML code is correct.

WordPress widget text-to-visual tab animation

If you are looking to do something else (non mentioned above) with an image in your WordPress sidebar, let me know in the comments, and I'll try to provide you with a code sample.


03 Using a WordPress Plugin

The previous two methods cover a large bulk of the functionality that most sites need, in terms of calculation an image to your sidebar. I highly recommend using ane of the previous options over installing a plugin.

Even so, if y'all're looking to do something actually advanced with the images in your sidebar, I'll talk virtually ane of the best plugins for the job—Image Widget Plus by Modern Tribe.

Image Widget Plus features include:

  • insert a slideshow of images in your sidebar
  • open sidebar images in a lightbox
  • display a dissimilar/random image on each page load

And hither are some screenshots of the plugin in action:

Image Widget Plus slideshow example
An example of how the slideshow features looks in your sidebar
Image Widget Plus lightbox example
An instance of how the lightbox characteristic looks
Image Widget Plus options screen
The options available in Epitome Widget Plus
Image Widget Plus random image example
An case of how to setup the random image characteristic

I have to mention that Image Widget Plus is a premium plugin. As of May 2017, it costs $29. But if you're looking for any of the features mentioned above, I don't call up you lot'll find a more than loftier quality plugin than this 1. The folks at Modernistic Tribe produce swell work, and have developed several other popular and well-respected plugins, most notably The Events Calendar.

Get Image Widget Plus


That covers the 3 chief ways to add an paradigm to your WordPress sidebar.

Did I get out out a method you're currently using? Please let me know in the comments.

baileytanybeen.blogspot.com

Source: https://wpsmackdown.com/add-image-wordpress-sidebar/

0 Response to "how to upload image to reddit sidebar"

إرسال تعليق

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel