AOM Wordpress Plugin - configuring

Find addons/modules/scripts for AOM. Post your own.
Post Reply
Tydbyte
Experience Level 2
Experience Level 2
Posts: 56
Joined: Sat Oct 05, 2013 11:59 am
Location: Toronto, Ontario, Canada
Contact:

AOM Wordpress Plugin - configuring

Post by Tydbyte » Tue Jun 30, 2015 5:42 am

Does anyone have experience modifying how the AOM Wordpress Plugin displays information and images?

I need help with the following:

1) how do I display a larger image?

2) how do I center the image that is displayed?

3) how do I have the title display beneath the image?

Thanks.

Tydbyte
Experience Level 2
Experience Level 2
Posts: 56
Joined: Sat Oct 05, 2013 11:59 am
Location: Toronto, Ontario, Canada
Contact:

Re: AOM Wordpress Plugin - configuring

Post by Tydbyte » Sat Jul 04, 2015 5:36 pm

There must be someone who uses this plugin who can help. :)

mcarp555
Admin
Admin
Posts: 4082
Joined: Thu Sep 14, 2006 5:19 pm
Location: United Kingdom
Contact:

Re: AOM Wordpress Plugin - configuring

Post by mcarp555 » Sun Jul 05, 2015 5:34 am

It's mostly done through the wordpress_item.tpl.php file located in the folder corresponding to whatever theme you're using. But you will generally need good HTML/PHP editing skills to customize the contents.
Mike
AOM Support

AOM Talk - The Blog
AOM Skins - Templates

Tydbyte
Experience Level 2
Experience Level 2
Posts: 56
Joined: Sat Oct 05, 2013 11:59 am
Location: Toronto, Ontario, Canada
Contact:

Re: AOM Wordpress Plugin - configuring

Post by Tydbyte » Sun Jul 05, 2015 6:39 am

Thanks Mike.

I have made a few changes to the file wordpress_item.tpl.php but minimal as my PHP skills are minimal.

The plugin has been working well for me as you can see here:

http://beyondmotivation.ca/contents/app ... tin-fiore/

I managed to get it centred by wrapping the plugin code in a div.
I tried to get it centred modifying the code but Wordpress would have none of it.
However I did get the width set to 60%. Small victories. hahaha. :

Code: Select all

<div align="center">
[aom url="http://lookseebookstoreshop.com/beyond-motivation-james-mccay/1313_none_1584230746_War-and-Peace-in-the-Global-Village.html"]
</div> 
However I think that a larger image is needed.

I will play with the code to figure out the correct way to get the image centred and larger and the link beneath the image.

But it would make my life easier if I could get some help.

Maybe you guys will add some options to the plugin so that users can configure it to conform to their own blog.

mcarp555
Admin
Admin
Posts: 4082
Joined: Thu Sep 14, 2006 5:19 pm
Location: United Kingdom
Contact:

Re: AOM Wordpress Plugin - configuring

Post by mcarp555 » Mon Jul 06, 2015 2:43 am

Let's take a quick look at a part of the code:

Code: Select all

<div style="width:100%; margin:3px 0; padding:6px; border:1px solid #eaeaea; text-align:left; clear:both; font-family:arial; font-size:12px;">
	<div style="clear:both;">
		<ul style="list-style:none; float:left; margin:0 0 0 -30px; padding:0;">
			<?php if (isset($this->t['Image']['Url'])): ?>
			<li style="width:<?php echo (isset($this->t['Image']['Width']) ? $this->t['Image']['Width']."px" : "auto" ) ?>; list-style-type:none; float:left; padding:0;"><a href="<?php echo $this->t['Link'] ?>"><img src="<?php echo $this->t['Image']['Url'] ?>"
				<?php if (isset($this->t['Image']['Width'])): ?>
				 width="<?php echo $this->t['Image']['Width'] ?>"
				<?php endif; ?>
				<?php if (isset($this->t['Image']['Height'])): ?>
				 height="<?php echo $this->t['Image']['Height'] ?>"
				<?php endif; ?>></a>
			</li>
			<?php endif; ?>
The first line:

Code: Select all

<div style="width:100%; margin:3px 0; padding:6px; border:1px solid #eaeaea; text-align:left; clear:both; font-family:arial; font-size:12px;">
Defines the overall space, such as width, margins, padding, font, etc. The next bit:

Code: Select all

<ul style="list-style:none; float:left; margin:0 0 0 -30px; padding:0;">
Defines the settings for the individual items, mainly float:left and the -30px left margin. Tinkering with the margin should move the list items left or right as needed.

The part you're probably most interested in is this:

Code: Select all

<li style="width:<?php echo (isset($this->t['Image']['Width']) ? $this->t['Image']['Width']."px" : "auto" ) ?>; list-style-type:none; float:left; padding:0;">
This defines the image size, and should be linked to the sizes as determined under the 'Images' tab in your AOM control panel. If you want to override it for a custom size, you should be able to change it like this:

Code: Select all

<li style="width:50px" : "auto" ) ?>; list-style-type:none; float:left; padding:0;">
This would set an image width of 50px, and the height would automatically adjust to suit. The remaining lines:

Code: Select all

				<?php if (isset($this->t['Image']['Width'])): ?>
				 width="<?php echo $this->t['Image']['Width'] ?>"
				<?php endif; ?>
				<?php if (isset($this->t['Image']['Height'])): ?>
				 height="<?php echo $this->t['Image']['Height'] ?>"
correspond to the width & height boxes in your AOM control panel for custom sizes. That's fine if you want the images in your store to match the sizes used in your blog. Otherwise, directly editing the file as I've shown should suffice.

Remember that when you edit the wordpress_item.tpl.php file, you'll need to click on any 'Save' button in your AOM control panel to load the changes. Otherwise, your blog may not update the sizes you've set.
Mike
AOM Support

AOM Talk - The Blog
AOM Skins - Templates

Tydbyte
Experience Level 2
Experience Level 2
Posts: 56
Joined: Sat Oct 05, 2013 11:59 am
Location: Toronto, Ontario, Canada
Contact:

Re: AOM Wordpress Plugin - configuring

Post by Tydbyte » Mon Jul 06, 2015 6:41 am

Thanks Mike,

Unfortunately when I replace the code with:

Code: Select all

<li style="width:50px" : "auto" ) ?>; list-style-type:none; float:left; padding:0;">
the code itself is displayed.

When I look at the original code:

Code: Select all

<li style="width:<?php echo (isset($this->t['Image']['Width']) ? $this->t['Image']['Width']."px" : "auto" ) ?>; list-style-type:none; float:left; padding:0;">
I think some of the code is missing after

Code: Select all

 <li style="width:
such as

Code: Select all

 <?php echo
.

I have played around with editing the code but gotten nowhere.

mcarp555
Admin
Admin
Posts: 4082
Joined: Thu Sep 14, 2006 5:19 pm
Location: United Kingdom
Contact:

Re: AOM Wordpress Plugin - configuring

Post by mcarp555 » Mon Jul 06, 2015 7:12 am

Whoops, my bad. Try this instead:

Code: Select all

<li style="width:50px; height:auto; list-style-type:none; float:left; padding:0;">
Mike
AOM Support

AOM Talk - The Blog
AOM Skins - Templates

Tydbyte
Experience Level 2
Experience Level 2
Posts: 56
Joined: Sat Oct 05, 2013 11:59 am
Location: Toronto, Ontario, Canada
Contact:

Re: AOM Wordpress Plugin - configuring

Post by Tydbyte » Mon Jul 06, 2015 7:36 am

The image still displays the same size.

http://beyondmotivation.ca/contents/app ... ZqRchvnu00

I changed the width to 200 so there would be a definite change to be seen.

I also cleared the cache of images and viewed various pages on my desktop as well as my tablet and mobile.


Code: Select all

<ul style="list-style:none; margin:0 0 0 0; padding:0;">
			<?php if (isset($this->t['Image']['Url'])): ?>
			<li style="width:200px; height:auto; list-style-type:none; float:left; padding:0;"><a href="<?php echo $this->t['Link'] ?>"><img src="<?php echo $this->t['Image']['Url'] ?>"
		


I see that image width appears in more than one place. Should those instances also be modified?

Code: Select all

				<?php if (isset($this->t['Image']['Width'])): ?>
				 width="<?php echo $this->t['Image']['Width'] ?>"
				<?php endif; ?>

Code: Select all

<?php if (isset($this->t['Image']['Height'])): ?>
				 height="<?php echo $this->t['Image']['Height'] ?>"
				<?php endif; ?>></a>
				
			</li>	

mcarp555
Admin
Admin
Posts: 4082
Joined: Thu Sep 14, 2006 5:19 pm
Location: United Kingdom
Contact:

Re: AOM Wordpress Plugin - configuring

Post by mcarp555 » Mon Jul 06, 2015 4:32 pm

I think so. I'm not sure why it would be using those parameters, but looking at the source code, it might be.

Code: Select all

            <?php if (isset($this->t['Image']['Width'])): ?>
             width="200"
            <?php endif; ?>
Same for the height.
Mike
AOM Support

AOM Talk - The Blog
AOM Skins - Templates

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest