Title: Image Links Author: Patabugen Published: September 4, 2018 Last modified: June 23, 2022 --- Search plugins ![](https://ps.w.org/image-links/assets/banner-772x250.png?rev=1935643) This plugin **hasn’t been tested with the latest 3 major releases of WordPress**. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. ![](https://ps.w.org/image-links/assets/icon-256x256.png?rev=1935643) # Image Links By [Patabugen](https://profiles.wordpress.org/patabugen/) [Download](https://downloads.wordpress.org/plugin/image-links.zip) * [Details](https://wordpress.org/plugins/image-links/#description) * [Reviews](https://wordpress.org/plugins/image-links/#reviews) * [Installation](https://wordpress.org/plugins/image-links/#installation) * [Development](https://wordpress.org/plugins/image-links/#developers) [Support](https://wordpress.org/support/plugin/image-links/) ## Description 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: ``` ``` 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: ``` ``` 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. ## Screenshots * [[ * Preview at 480px wide screen * [[ * Preview at 768px wide screen * [[ * Preview at 1024px wide screen ## Installation 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. ## FAQ ### 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/ ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Image Links” is open source software. The following people have contributed to this plugin. Contributors * [ 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). ## Changelog #### 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 years ago** * Active installations **10+** * WordPress version ** 3.0.1 or higher ** * Tested up to **6.0.12** * PHP version ** 5.3 or higher ** * [Advanced View](https://wordpress.org/plugins/image-links/advanced/) ## Ratings 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/) ## Contributors * [ Patabugen ](https://profiles.wordpress.org/patabugen/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/image-links/)