External Image URL

Hello All,

Production URL – https://www.tankmaster.com.au/wp/

Issue URL – https://tankmaster.com.au/wp/?page_id=11

I am new to WordPress but very keen to set up a few sites using it.

I have multiple sites on a Linux VPS and quite a few of these sites connect to the same MySQL database).

I have recently installed ABASE to assist in displaying data from another domain with no problems.

I can display the table I want with no problems. I can also get an image field to appear. My problem is getting the image to get the right source (src).

CODE (WITHOUT IMAGE) – WORKING

[abase db=”2″ table=”data_poly_round_tanks” center=”*” columns=”ProductID,Litres,Gallons,Diameter,WallHeight,TotalHeight,Price,Image” order=”Litres”]

This code displays correctly with the image field as plain text.

CODE (WITH IMAGE) – WORKING

[abase db=”2″ table=”data_poly_round_tanks” center=”*” columns=”ProductID,Litres,Gallons,Diameter,WallHeight,TotalHeight,Price,Image” order=”Litres” images=”Image”]

This displays the image but with the wrong URL so the image cannot be displayed properly.

ATTEMPTED CODE – NOT WORKING – Displays as CODE (WITHOUT IMAGE) – WORKING)

[abase db=”2″ table=”data_poly_round_tanks” center=”*” columns=”ProductID,Litres,Gallons,Diameter,WallHeight,TotalHeight,Price,Image” order=”Litres” images=”Image::=(https://www.tankmasteraustralia.com.au/product-poly-round-tanks/^)Image”]

This code reverts back to displaying the content of the field in plain text. No image displayed at all.

I seem to be having a problem from immediately after the images="Image part.

Any help on this issue would be a huge help.

Well having thunk about it for a bit and tweaking the code, I’ve managed to fix my own problem.

ABASE – Great plugin but maybe the Attribute references could be a little clearer…!

FIXED CODE

[abase db="2" table="data_poly_round_tanks" center="*" columns="ProductID,Litres,Gallons,Diameter,WallHeight,TotalHeight,Price,Image" order="Litres" images="https://tankmasteraustralia.com.au/product-poly-round-tanks/^Image" style="width:50px" ]

Hi TankMaster1970

Thanks – your last post was a massive help. I agree that the attribute references could be a little clearer, but I also agree that Abase is a fabulous plugin, so very well done Richard.

I note that when you pasted your fixed code above, you did not include your Image column in the columns attribute (it ends with a ,). I had to include my equivalent column name in the columns attribute, and hey presto, it all worked.

Thanks again and kind regards
Randall

Thank you for the comment Randall2961.

The fixed code was all there, I think you just needed to scroll across a bit.

It was a copy and paste of the code that is working on my website page.

Regards

Dave (TankMaster1970)

Hi Dave

Oops, sorry about that, you’re right, it seems I was just too lazy to scroll ??

Now I have to work on the layout of my database results, which looks like another challenge in itself.

Kind Regards
Randall

Hey Randell,

As much as I love what ABASE can do, I have also struggled with the layout, especially with “responsive” layouts (going from desktops to smart phones/tablets.

See https://www.tankmaster.com.au/wp/poly-round-tanks to see what I mean.

Dave

P.S. I used NextGEN gallery to get the lightbox popups for the images.

You have to turn on a setting under “Other Options / Lightbox Effects” that says What must the lightbox be applied to? (Answer) Try to apply to all images that link to image files.

Thanks Dave

I think you’ve put together a great website – very simple, very clean and very functional.

I like what you’ve done with your images, so thanks also for the tip re NextGEN and lightbox popups. I think I’ll be able to use that.

So far I haven’t even been able to change the font size of my database results, let alone alignment or anything else. I’ll keep on that and I’m hoping I can do something with the notable=”1″ attribute, which leaves out the beginning and ending table tags and hopefully then gives some flexibility to add some style. I’ll start a new post on that when I know more.

Thanks again and kind regards
Randall

Hey Randell,

I think you’ll find that the font size of your results is all just CSS.

It should just be a case of setting the table, tr or td font-size: 12px or whatever size you need. I’ve found that sometimes you need to add !important to force the CSS to take effect. I’m not a full bottle on CSS but manage to struggle my way through on most things.

I use a template called Vantage (Premium) on a few sites now. It allows you to put Custom CSS in quite easily and it’s really easy to do a lot of thing to style your whole site including page structure. It’s cheap too, starting from $5.00 US (no support) to whatever you are willing to pay..!

I’m sure you already know but don’t forget to make a Child Theme before you start editing CSS or other theme files.

Cheers
Dave

Thanks Dave

I’ll let you know how I go with the style in due course.

Although I managed to successfully display a single image with your help, I still can’t get it to work for multiple images. I would have thought the following shortcode would work, but although it displays the first image properly, it only displays the cell content for the second image:

[abase table=”table” fields=”…..,Photo1,Photo2″ images=”<site_url>^Photo1,<site_url>^Photo2″]

Did you ever manage to display more than 1 image in a table?

Kind regards
Randall

Hello Randall,

You are going to kick yourself…. The more I use abase the easier it gets.

It took me a few minutes to work out but it’s a simple as a comma…!

[abase db="2" table="data_poly_round_tanks" style="width:100%" center="*" columns="Product ID^ProductID!'width:100px;font-size:12pt',Litres^Litres,Gallons^Gallons,Diameter (mm)^Diameter,Wall Height (mm)^WallHeight,Total Height (mm)^TotalHeight,Price ($)^Price,Image^Image!width:50px;vertical-align:-25px;,Image 2^Image2!width:50px;vertical-align:-25px;" order="Litres" images="product-images/poly-round-tanks/^Image,Image2"]

The code above is for this page – https://tankmaster.com.au/wp/poly-round-tanks-test (I’ll leave this page live for a couple of days so you can check it out).

Basically, add your columns as per normal. For the images to display using the images short code, try this:
images="product-images/poly-round-tanks/^Image,Image2"

This does only seem to work if the image files are located in the same directory (in my case).

This code did NOT work. I don’t think abase likes referencing two different locations:
images="product-images/poly-round-tanks/^Image,product-images/poly-round-tanks/^Image2"

Just an update you might have picked up n from my last post, you can reference locations (for image files) without having to use the entire URL, just from the WordPress installation directory…!

Hi Dave

You’re a Legend! It’s now working perfectly for multiple images, so thanks!

I think I may have tried exactly that code, but made the mistake of only refreshing the search results page, which is on a different page to the actual search page. That’s a trap for new players because the refresh wouldn’t have activated the new code.

I’m not having quite as much luck with formatting my table contents, other than adjusting the column titles. I used some of the exact code from the shortcode you posted, but it would not work for me. I inspected the element using Chrome and I think that the changes are being overridden by my parent or child style.css files. So hopefully I will be able to sort it out there.

Thanks again for your help, much appreciated!

Kind regards
Randall

Hi again Dave

I may have to retract that. Not the bit about you being a Legend, just the bit about why the image code didn’t work for me before. The relevant code is in the search results page, so refreshing probably should have worked if I got the code right. As you say, I must have missed a comma here or stuck in an extra pointy hat there, or something like that. The main thing is it’s working!

Kind regards
Randall

Thank you Randall,

It’s always nice to be appreciated. I’ll give my wife a talking to about that later – ha ha ha.

Something I picked up with CSS Styling, especially in WordPress, is that you sometimes need to add the “important” to force your styling.

e.g.

/* Lightbox Caption Modifications */
#fancybox-title {
font-size: 18px !important;
}

instead of

/* Lightbox Caption Modifications */
#fancybox-title {
font-size: 18px;
}

This exact piece of styling stumped me for a few hours until I happened to look at some other styling using the “!important” addition.

I’ll post seperately on the abase code…

Dave

I found it easier in some cases to break down the abase shortcode to make sure you have everything in the right place.

So while you are contructing the abase short code:

[abase db="2" table="data_poly_round_tanks" style="width:100%" center="*" columns="Product ID^ProductID!'width:100px;font-size:12pt',Litres^Litres,Gallons^Gallons,Diameter (mm)^Diameter,Wall Height (mm)^WallHeight,Total Height (mm)^TotalHeight,Price ($)^Price,Image^Image!width:50px;vertical-align:-25px;" order="Litres" images="product-images/poly-round-tanks/^Image"]

I break it down as follows:

[abase db="2"
table="data_poly_round_tanks"
style="width:100%"
center="*"
columns="
Product ID^ProductID!'width:100px;font-size:12pt',
Litres^Litres,
Gallons^Gallons,
Diameter (mm)^Diameter,
Wall Height (mm)^WallHeight,
Total Height (mm)^TotalHeight,
Price ($)^Price,
Image^Image!width:50px;vertical-align:-25px;
"
order="Litres"
images="product-images/poly-round-tanks/^Image"
]

I can then check to make sure I have all the table fields and field titles right as well as the other functions.

You will of course have to remove all the line breaks and make sure there is a space between each function again after you have checked everthing (as per the first block of code in this post).

Hope that helps.

Dave