Title: Image Links
Author: Patabugen
Published: <strong>Medi 4, 2018</strong>
Last modified: Mehefin 23, 2022

---

Search plugins

![](https://ps.w.org/image-links/assets/banner-772x250.png?rev=1935643)

Nid yw’r ategyn hwn **wedi cael ei ddiweddaru ers 3 ryddhad mawr**. Efallai nad 
yw’n cael ei gynnal bellach ac efallai bod materion cydnawsedd wrth gael ei ddefnyddio
gyda fersiynau mwy diweddar o WordPress.

![](https://ps.w.org/image-links/assets/icon-256x256.png?rev=1935643)

# Image Links

 Gan [Patabugen](https://profiles.wordpress.org/patabugen/)

[Llwytho i lawr](https://downloads.wordpress.org/plugin/image-links.zip)

 * [Details](https://cy.wordpress.org/plugins/image-links/#description)
 * [Reviews](https://cy.wordpress.org/plugins/image-links/#reviews)
 *  [Installation](https://cy.wordpress.org/plugins/image-links/#installation)
 * [Development](https://cy.wordpress.org/plugins/image-links/#developers)

 [Cefnogaeth](https://wordpress.org/support/plugin/image-links/)

## Disgrifiad

Outputs links which are images, with floting-over captions and changing images.

Easily lets you disable the styles (and Scripts) so you can write your own styles.

Note there are no screens added to your dashboard – all the settings/information

is in this readme.txt file.

### Example

Here’s an example of a bunch of image links wrapped in an image link grid. The grid
is optional and just makes the image links sit in columns instead of always being
full width.

Be careful when using image_link_grid that there is no other markup included – watch
out for text-editor line breaks being turned into paragraph or line-break tags. 
You’re probably best editing the shortcode data in Text and not Visual view.

    ```
    [mha_image_link_grid columns_xs=2 columns_md=2]
      [mha_image_link attachment=100 link="/contact-us" text="Contact Us!" subtext="Get in touch now!"]
      [mha_image_link attachment=101 link="https://www.example.com" text="Checkout Example"]
      [mha_image_link attachment=102 link="/some-page" text="This is some page"]
      [mha_image_link attachment=102 link="/some-page" text="This is some page" style="full"]
      [mha_image_link image="/path-to/image.png" link="/another_page" text="This is another page"]
      [mha_image_link image="https://www.example.com/remote-image.png" link="/another_page"]
    [/mha_image_link_grid] 
    ```

### Documentation

No screens or options are added to your Dashboard. All customising needs to be done
in your theme’s CSS file.

### Image links Javascript

The JavaScript enables multiple images on each image link. If you’re not using that
functionlaity, or want to implement it yourself – you can stop the JavaScript file
being included with:

    ```
    <?php
        add_filter( 'mha_image_link_include_scripts', '__return_false' );
    ?>
    ```

The handle of the script is `mha-image-links`.

### Image links CSS

To stop the plugin including it’s default CSS file use this filter:

    ```
    <?php
        add_filter( 'mha_image_link_include_styles', '__return_false' );
    ?>
    ```

The handle of the styles is `mha-image-links`

### [mha_image_link_grid] shortcode settings

 * **columns_xs** _Default: 2_
    Specify hwo many columns should display on extra
   small devices. By default that’s anything up to 768px. Valid values are 1, 2,
   3 or 4 unless you add more code based on the source in `image-links.scss`
 * **columns_sm** _Default: none_
    The same as columns_xs but for small screens (
   above 768px). If not set then this will default to the value of columns_xs
 * **columns_md** _Default: none_
    The same as columns_sm but for small screens (
   above 992px). If not set then this will default to the value of columns_sm
 * **columns_lg** _Default: none_
    The same as columns_md but for large screens (
   above 1200px). If not set then this will default to the value of columns_md.

### [mha_image_link] shortcode settings

 * **image** *Default: ”**
    Specify the URL to an image. It’s better to use attachment
   if you can.
 * **text** *Default: ”**
    The big text to display on the image
 * **subtext** *Default: false**
    The smaller text to show on the image link
 * **link** *Default: ”**
    The link this image should direct to. Can be anything
   href=”” takes.
 * **attachment** *Default: false**
    The attachment ID of the image you want to 
   use or the image. If you specify this instead of `image` then you’ll get a properly
   sized image and everything will be excellent. To get the attachment ID find the
   attachment in your Dashbaord -> media screen, click the one you want and look
   in your browsers address bar for the Item number. For example in this address`
   upload.php?item=400` the attachment ID is 400.
 * **style** *Default: half**
    By default the caption covers half the image – you
   can set style to `full` to make it cover the whole image. You can also enter 
   anything you like here and the `.mha-image-link` element will be given it as 
   an extra class. See the bottom of `image-link.scss` for an example of styling
   it.

## Lluniau Sgrin

[⌊Preview at 480px wide screen⌉⌊Preview at 480px wide screen⌉[

Preview at 480px wide screen

[⌊Preview at 768px wide screen⌉⌊Preview at 768px wide screen⌉[

Preview at 768px wide screen

[⌊Preview at 1024px wide screen⌉⌊Preview at 1024px wide screen⌉[

Preview at 1024px wide screen

## Gosod

 1. Upload the plugin directory `image-links` to the `/wp-content/plugins/` directory
    or install it directly from the WordPress plugin directory.
 2. Activate the plugin through the ‘Plugins’ menu in WordPress
 3. Add some [mha_image_link] shortcodes to your pages/site using the settings below.

## Cwestiynau Cyffredin

### How do I change the output styles

You can customise the look and feel of the image links by writing your own CSS. 
You can use the included .scss file

You can either include the scss file in your own SCSS and override it, or you can
edit a copy of the scss file and compile it, then auto-prefix it, using these online
services. Store the output in your child-theme template and include it using wp_enqueue_style
inside a wp_enqueue_style hook.

 * http://beautifytools.com/scss-compiler.php
 * https://autoprefixer.github.io/

## Adolygiadau

There are no reviews for this plugin.

## Contributors & Developers

“Image Links” is open source software. The following people have contributed to 
this plugin.

Cyfranwyr

 *   [ Patabugen ](https://profiles.wordpress.org/patabugen/)

[Translate “Image Links” into your language.](https://translate.wordpress.org/projects/wp-plugins/image-links)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/image-links/), check
out the [SVN repository](https://plugins.svn.wordpress.org/image-links/), or subscribe
to the [development log](https://plugins.trac.wordpress.org/log/image-links/) by
[RSS](https://plugins.trac.wordpress.org/log/image-links/?limit=100&mode=stop_on_copy&format=rss).

## Cofnod Newid

#### 1.4

Tested with WordPress 6.0

#### 1.3

Tested with WordPress 5.1

#### 1.2

Reduced font-sizes on large screens.

#### 1.1

Fixed JavaScript – which wasn’t running at all. Also made the slidehosw delay be
random rather than always 7 seconds.

#### 1

Initial release

## Meta

 *  Version **1.4**
 *  Last updated **4 blynedd yn ôl**
 *  Active installations **10+**
 *  WordPress version ** 3.0.1 neu uwch **
 *  Tested up to **6.0.14**
 *  PHP version ** 5.3 neu uwch **
 *  Language
 * [English (US)](https://wordpress.org/plugins/image-links/)
 *  [Advanced View](https://cy.wordpress.org/plugins/image-links/advanced/)

## Graddau

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/image-links/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/image-links/reviews/)

## Cyfranwyr

 *   [ Patabugen ](https://profiles.wordpress.org/patabugen/)

## Cefnogaeth

Rhywbeth i’w ddweud? Angen help?

 [Gweld y fforwm cefnogi](https://wordpress.org/support/plugin/image-links/)