The post Editing Images on WordPress first appeared on Our-Hometown.

(website)/dynamicpage/currentimage/(size)

To display, use the html: <img src=”(url you just created)”>

To link this image somewhere, use the code:

<a href=”(URL you want to link to)”><img src=”(image url)”></a>

The post Current Front Page Thumbnail first appeared on Our-Hometown.

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:

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.

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.

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.

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

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.

Step 5 – Inserting the image

Once you have determined your image settings, click on the blue Insert into post or Insert into the 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 left hand corner. You can remove the image from your page/post by clicking on the Remove Image button.

The post Inserting Images into Articles & Pages [Classic Editor] first appeared on Our-Hometown.

Options

Gallery Skin: Standard, Silver, Kitt, Ghost and Black are the five main options for gallery skin that will adjust how the slider image looks as well as the dots that appear below the slider.

Slider Captions Enabled: Turns on the display of the image title field. The title will appear when the mouse hovers over a slider image. The title will appear in a small box.

Slider Image Click Enabled: If enabled, a visitors click can open several different options, found below. Default setting is “disabled.”

Slider Image Click Opens: End result of a user clicking the slider image. Options are Image Page (Attachment Page), Image Link (the link you’ve set for that image) and Original Image (direct URL of image).

Auto Play Enabled: Turn auto scrolling on or off.

Auto Play Speed: From 0.5 to 10.0 in increments of 0.5, select the amount of time that each image in the slider will show before transitioning to the next image.

Display Arrows: Show or hid arrow buttons.

Display Dots: Show or hid pager dots.

Enable Mouse Drag: Allow slides to be move with a mouse drag.

Fade: Turns on fade transition effect.

Right to Left: Slides are shown from right to left.

Pause on Hover: Pause auto play when the mouse is over the image.

Pause on Dots Hover: Will pause auto play when the mouse is over the area containing the slider image dots.

Infinite: Enables infinite scrolling.

Lazy Load: Loads images as needed.

Move Slide with Touch: Enables sliding images by touch.

Transition Speed: From 0.1 to 3.0 seconds, select the amount of time the animation will take from slide to slide.

Mobile First: Will use mobile first calculation for responsive settings.

Initial Slide: Set the initial slide to start when the slider is rendered.

Swipe: Turns on touch swipe.

Use CSS Transitions: Enable CSS Transitions.

Allow Variable Width: Disables automatic slide width calculation.

Vertical Slide: Switches the direction of the slides to vertical.

Vertical Swipe: Changes swipe direction to vertical.

Gallery Description

For each gallery you can create a description that discusses your gallery or adds extra information for anyone viewing the gallery. If enabled, you can choose to put the description above or below your gallery (default is above).

The post MaxGalleria – Slick Slider first appeared on Our-Hometown.

On the settings tab, in media Sources you’ll see Instagram.

Granting Access

To start pulling from Instagram you need to let Instagram know that everything is cool. Clicking Grant Access will take you to Instagram to login if you have not already done so.

Once logged in to Instagram, you’ll see a notification that MaxGalleria wants to access your Instagram photos. Max Foundry never gets access to this information, you are only authorizing for your particular website. After authorizing you will be redirected to the Settings page and shown the Instagram information you just authorized.

If at any time you would like to remove access, you can do so from the same Settings page.

Adding Images From Instagram

If you are in a new gallery or old, click Add Images. Along with the standard uploading options, you’ll now see an Instagram tab on the left. Clicking on the Instagram tab will show all of your Instagram images which you can now select from and add to your gallery. Click as many as you’d like and then click Add to Gallery.

If you would like to go further back in your Instagram feed history you can do so by clicking Load More. When new photos are added to Instagram they will appear in this area, but will not be automatically added to your gallery.

The post MaxGalleria – Instagram first appeared on Our-Hometown.

Options

Gallery Skin: Standard, Silver, Kitt, Ghost and Black are the five main options for gallery skin that will adjust how the slider image looks as well as the dots that appear below the slider.

Slider Captions Enabled: Enable or disable if the captions appear on the main slider.

Slider Image Click Enabled: If enabled, a visitors click can open several different options, found below. Default setting is “disabled.”

Slider Image Click Opens: End result of a user clicking the slider image. Options are Image Page (Attachment Page), Image Link (the link you’ve set for that image) and Original Image (direct URL of image).

Slider Effect: The Image Slider uses Nivo Slider for slide effects and you can choose from Box, Fade, Fold, Slice, Random or Slide. Each of those has a directional option as well to give you maximum control of the transition.

Slider Animation Speed: From 0.1 to 2.0 seconds, select the amount of time the animation will take from slide to slide.

Slider Slideshow Speed: From 0.5 to 10.0 in increments of 0.5, select the amount of time that each image in the slider will show before transitioning to the next image.

Gallery Description

For each gallery you can create a description that discusses your gallery or adds extra information for anyone viewing the gallery. If enabled, you can choose to put the description above or below your gallery (default is above).

Advanced Options

MaxGalleria allows you to load your own styles and scripts if you want to add anything to the options MaxGalleria already provides. Simply use the URL of the stylesheet or JavaScript file, click “Enabled” and the scripts and styles will be loaded after the necessary MaxGalleria files.

From here you can also reset all of the gallery options to the defaults by checking the Reset option. The action cannot be undone and you will lose any previously saved options for that gallery.

The post MaxGalleria – Image Slider first appeared on Our-Hometown.

The showcase features one large image on top of the thumbnails that changes whenever the thumbnails are clicked.

Adjusting Gallery Settings

Gallery Skin: MaxGalleria comes packaged with a few standard skins. Currently there are, No Border, Picture Frame, Portal, Portal Dark, Standard, Standard Dark, Tightness and Tightness Dark.

Thumbnail Columns: Depending on how many videos or images you have in your gallery you may want a different amount of columns. MaxGalleria defaults to five columns, but you can choose anywhere between 1 and 10. Whatever column selection you make, your gallery will stick to that and is responsive, so you’ll have the same number of columns on all devices (larger numbers will adjust automatically on mobile).

Thumbnail Shape: Three options here with Square, Landscape and Portrait. Landscape is especially nice for videos which tend to be in a 16:9 ratio already, converting well to the Landscape shape.

Thumbnail Captions Enabled: For each image you have the ability to add/edit captions. If you’d like those captions to appear when the gallery loads, you’d want to check the checkbox for this option.

Thumbnail Captions Position: The location of the captions when the gallery loads on the page. Options are Below Image or Bottom of Image.

Thumbnail Opacity Enabled: If enabled, the thumbnails will appear at an opacity level of 0.7 unless it is the active photo which will set the thumbnail to opacity of 1.

Thumbnail Custom Image Class: Adds a class to every image.

Thumbnail Custom Image Container Class: Adds a class to the image container.

Thumbnail Custom Rel Attribute: Changes the Rel Attribute of the image. The default allows clicking prev/next inside the lightbox to get between the images.

Showcase Caption Enabled: Much like the captions above, this indicates whether or not the captions will show in the main showcase image when selected.

Showcase Image Click Enabled: Allows a visitor to click on the main showcase image.

Showcase Image Click Opens: End result of a user clicking the main showcase image. Options are Lightbox Image, Image Page (Attachment Page), Image Link (the link you’ve set for that image) and Original Image (direct URL of image).

Showcase Image Click New Window: For all options other than Lightbox Image, this indicates where the link of the showcase image will be opened, a new window or the same window. Unchecked it will open in the same window.

Gallery Description

For each gallery, you can create a description that discusses your gallery or adds extra information for anyone viewing the gallery. If enabled, you can choose to put the description above or below your gallery (default is above).

The post MaxGalleria – Image Showcase first appeared on Our-Hometown.

The Image Carousel add-on is only for image galleries.

Adjusting Carousel Settings

Gallery Skin: Image Carousel comes packaged with a few standard skins. Currently there are, No Border, Picture Frame, Portal, Portal Dark, Standard, Standard Dark, Tightness and Tightness Dark.

Thumbnail Columns: Depending on how many images you have in your gallery you may want a different amount of columns. Image Carousel defaults to five columns, but you can choose anywhere between 1 and 10. The number of columns you select is the number of images that will be shown before you have to click to see more in the carousel. There is no limit to the amount of images you can put in this gallery.

Thumbnail Shape: Three options here with Square, Landscape and Portrait. Landscape works better with smaller numbers of columns, while portrait is nice for larger numbers.

Thumbnail Click Opens: End result of a user clicking the thumbnails in the carousel. Options are Lightbox Image, Image Page (Attachment Page), Image Link (the link you’ve set for that image) and Original Image (direct URL of image).

Thumbnail Click New Window: For all options other than Lightbox Image, this indicates where the link of the thumbnail will be opened, a new window or the same window. Unchecked it will open in the same window. (only active when lightbox is not selected)

Lightbox Captions Enabled: This indicates whether or not, when the lightbox is open, if the captions will show.

Lightbox Captions Position: Below image or Bottom of Image, you can decide where the lightbox captions will appear with your image.

Lightbox Image Size: Defaults to Full, but can be switched to a custom size if you don’t want the lightbox image to expand to its full size or the size of the page, whichever is smaller.

Lightbox Image Custom Width: Sets a custom width for the lightbox.

Lightbox Image Custom Height: Sets a custom height for the lightbox.

Gallery Description

For each gallery, you can create a description that discusses your gallery or adds extra information for anyone viewing the gallery. If enabled, you can choose to put the description above or below your gallery (default is above).

The post MaxGalleria – Image Carousel first appeared on Our-Hometown.

Authorizing Facebook:

• Once the plugin has been installed and activated, go to Galleries > Settings using the menu on the left side of the WordPress admin.
• Under “Media Sources” on the left side of the page, click “Facebook”.
• Click the “Grant Access” button. When you click this button one of four things will occur:

1. If you are already logged in to your Facebook account and have not granted access to the plugin in the past, you’ll be redirected to a Facebook page allowing you to grant access. Clicking “Okay” will return you to the Facebook settings page with a message that you’ve successfully authorized the plugin to access your account.
2. If you are not already logged in to your Facebook account and have not granted access to the plugin in the past, you’ll be redirected to a Facebook login page. Once logged in you will be redirected to another page allowing you to grant access. Clicking “Okay” will return you to the Facebook settings page with a message that you’ve successfully authorized the plugin to access your account.
3. If you are already logged in to your Facebook account and have granted access to the plugin in the past, you’ll be redirected back to the Facebook plugin’s settings page with a message that you’ve successfully authorized the plugin to access your account.
4. If you are not already logged in to your Facebook account but have granted access to the plugin in the past, you’ll be redirected to a Facebook login page. Once logged in you will be redirected back to the Facebook plugin’s settings page with a message that you’ve successfully authorized the plugin to access your account.

Revoking Plugin Access/Switching Accounts:

• Navigate to the Galleries > Settings page and click “Facebook” on the left side of the page.
• Click the “Remove Access” button.
• You should see a message stating that “MaxGalleria is no longer authorized to access your Facebook account.”
• You can now re-authorize with another account.

Adding Facebook Images to a Gallery:

• If not already authorized, complete the Authorizing Facebook step above first.
• Choose a gallery from the Galleries page or create a new gallery by clicking Galleries > Add New.
• Click the Add Images button.
• In the resulting media manager popup click Facebook in the left pane. Thumbnails of up to the first 20 images from your Facebook account should be visible.
• 
• If you have not yet authorized the plugin to access your Facebook account a notice to do so will be shown here instead.
• Click the image or the checkbox below the image to select it. Choose as many as you would like. To view the next 20 in your Facebook account click the “Load More” button.
• Once you’ve selected all the images you would like to add to the gallery click the “Add to Gallery” button. Be patient as this might take awhile depending on the number of images selected.
• Once complete you should be taken back to the gallery page where you can customize and publish your gallery.
• To add the gallery to a page or post copy/paste the shortcode provided.

The post MaxGalleria – Facebook first appeared on Our-Hometown.

If you’d like to use your new gallery in a post or page, you can grab the shortcode in the bottom right of your Gallery Edit page, or use the “Add Gallery” option in the TinyMCE for your post.

From Galleries you have several options. You can go to your Galleries overview page, import a NextGen Gallery into MaxGalleria, adjust your MaxGalleria defaults, or get Support.

For now, let’s take a look at the Galleries page. Once there you can see your entire list of galleries as well as Add New galleries. Click Add New.

Adding Images

When you first get into your Gallery editor you’ll be prompted to select an Image or Video gallery. Currently MaxGalleria does not support galleries with both images and videos in the same gallery. First, create a title for your gallery. In this example we’ll use “My First Gallery.”

Adding Images is the same as in a post or page. Using the standard WordPress media library you can add previously added images or upload new images to your gallery. The larger the image size, the longer it will take to load so be patient as the images are getting loaded in.

Once the images have loaded you could press Publish and be done, or you can check out the other gallery options. We’ll get to those in a moment, but let’s talk about Videos.

Adding Videos

Much like Images, to add Videos, just click “Add Videos” and you’ll get a similar lightbox. Straight out of the box you’ll have the ability to add YouTube videos to your gallery by copying and pasting the video URL. You can add multiple videos at a time, one URL per line.

After clicking “Add To Gallery” your gallery will refresh and a thumbnail from the video or videos will appear as your gallery thumbnail images.

Adjusting Gallery Settings

With the core of MaxGalleria, you have the Image Tiles gallery ready for use. Below are the basic options available to both Video and Images in the Tile layout:

Gallery Skin: MaxGalleria comes packaged with a few standard skins. Currently there are, No Border, Picture Frame, Portal, Portal Dark, Standard, Standard Dark, Tightness and Tightness Dark. Each skin is different in some way, but if you can’t find one that suits your gallery, you can make your own (more on that later).

Thumbnail Columns: Depending on how many videos or images you have in your gallery you may want a different amount of columns. MaxGalleria defaults to five columns, but you can choose anywhere between 1 and 10. Whatever column selection you make, your gallery will stick to that and is responsive, so you’ll have the same number of columns on all devices (larger numbers will adjust automatically on mobile).

Thumbnail Shape: Three options here with Square, Landscape and Portrait. Landscape is especially nice for videos which tend to be in a 16:9 ratio already, converting well to the Landscape shape.

Thumbnail Captions Enabled: For each image you have the ability to add/edit captions. If you’d like those captions to appear when the gallery loads, you’d want to check the checkbox for this option.

Thumbnail Click Opens: End result of a user clicking the thumbnails in the gallery. Options are Lightbox Image, Image Page (Attachment Page), Image Link (the link you’ve set for that image) and Original Image (direct URL of image).

Thumbnail Click New Window: For all options other than Lightbox Image, this indicates where the link of the thumbnail will be opened, a new window or the same window. Unchecked it will open in the same window.

Thumbnail Custom Image Class: Adds a class to every image.

Thumbnail Custom Image Container Class: Adds a class to the image container.

Thumbnail Custom Rel Attribute: Changes the Rel Attribute of the image. The default allows clicking prev/next inside the lightbox to get between the images.

Lightbox Captions Enabled: Much like the captions above, this indicates whether or not, when the lightbox is open, if the captions will show.

Images Per Page: To have video or image tiles appear on more than one page, enter a number here to turn on pagination and to indicate the maximum number of images/videos that should appear on each page.

Lazy Load Enabled: Allows images to be loaded as needed as they come into view in the browser; it increases page load times especially for pages with large images or with a large number of images in a gallery.

Lazy Load Threshold: The number of pixels above the image when lazy loading should begin. The default setting is 0 or none.

Magnific Popup Options

(These settings apply when Thumbnail Click Opens is set to Lightbox Image.)

Align Top Enabled: This will align the top of the image to the top of the page rather than center to image vertically.

Close on Background Click Enabled: Will close the lightbox when the user clicks on the lightbox background.

Close with Escape Key Enabled: Closes the lightbox popup when the escape key is pressed.

Fixed Content Position: The ‘Auto’ selection will set the lightbox’s popup position to be fixed (it can not be scrolled up or down) if the browser supports that property. Selecting ‘On’ will set the popup position to be fixed even if the browser does not support it. Selecting ‘Off’ will allow the lightbox’s popup to be scrolled up or down.

Hide Close Button: Removes the close button that appears on the top right of the lightbox popup.

Lightbox Captions Enabled: Will display the image’s caption below the image in the lightbox.

Overflow Y: When Fixed Content Position is set to ‘Auto’ or ‘On’ this option will display a vertical scroll bar when it is set to ‘Auto’ or ‘Scroll’.

Popup Custom Class: Adds a class to the popup that can be used for adding CSS styling to the popup.

Removal Delay: Specifies the amount of time, in milliseconds, before removing the popup.

Retina Images Enabled: This option allows for the display of high resolution images in place of normal resolution images on high-dpi screens with different a devicePixelRatio. To accomplish this first add normal resolution images to a gallery. Then upload matching high resolution images directly to the WordPress media library. The high resolution images should have file names ending in ‘@2x’; example: image.jpg & image@2x.jpg. The image should have the same URL path as their matching normal resolution images.

Vertical Fit Enabled: Will shrink the size of the image proportionally according to the available height.

Zoom Enabled: Displays a zoom effect when opening and closing a lightbox image. This effect is not available for video tiles.

Zoom Easing: Specifies the CSS3 type of easing. Choices include ease-in-out, ease-in, ease-out, ease and linear.

Zoom Duration: Sets the amount of time for the zoom effect in milliseconds.

Gallery Enabled: When the gallery option of the lightbox is enabled the user can move between the different images or videos in the current gallery by using previous and next arrow buttons that are displayed in the light box.

Gallery Options – these are only available when the Gallery Enabled option is checked.

Navigate By Image Click Enabled: When this option is checked clicking on an image will display the next image in the gallery.

Arrow Button Markup: This option allows you to specify the HTML and CSS selectors of the arrow buttons. The default is “<button title=’%title%’ type=’button’ class=’mfp-arrow mfp-arrow-%dir%’>”. Note that this field does not accept double quote marks. ‘%title%’ will be replaced by the image’s caption if there is one and ‘%dir%’ will be replaced by arrow direction, either ‘left’ or ‘right’.

Left Button Title: Specifies the title attribute of the left button. The default is ‘Previous (Left arrow key)’

Right Button Title: Specifies the title attribute of the right button. The default is ‘Next (Right arrow key)’

Counter Markup: Specifies the HTML and CSS selectors of the counter text on the bottom, right side of the popup. Note that this field does not accept double quote marks. The default markup is “<span class=’mfp-counter’>%curr% of %total%http://dimsemenov.com/plugins/magnific-popup/documentation.html

Gallery Description

For each gallery you can create a description that discusses your gallery or adds extra information for anyone viewing the gallery. If enabled, you can choose to put the description above or below your gallery (default is above).

The post MaxGalleria – Basic Image & Video Guide first appeared on Our-Hometown.