By Paul Murray on Monday, 19 May 2014
Posted in Technical Issues
Likes 0
Views 897
Votes 0
Hello Support

This is my what I will just call my “Ground Hog Day” post. I appreciate that I have got some great support on this in the past but still can not help wondering if there is an even better solution. Or maybe I just missed something!?!

What I am doing: In Blog posts I have either an embedded video(s) or photos

a) When I embed the video I actually post a photo and link it to the video.

It increases page load size and generally makes things look cleaner. I use an extension from JCE to implement my pop up window workflow and that works great. In Blog front page layout I see the photo linked to the video and can go direct to the video from the front page blog layout!

b) When I embed a photo. I see the Photo(s) in the Blog page but not in the front page layout.

This did not bother me too much as I usually post videos any way. However recently I have had more articles with photos as usual! However I am also noticing that when I share these posts to Facebook there is also no photo preview. With the notable exception of when I post to my own Facebook page!!!

And I am wondering if this is an either/or situation or maybe an and/and situation.

2 questions

1) Why does this happen like this?
2) Is it possible to have both the preview photo for the video and the preview photo for the photo!?!

Here are 2 examples:

First with photos:
http://finalbug.net/blog/entry/390-editing-a-documentary-in-fcp-x-part-01

Second with photo linked to video:
http://finalbug.net/blog/entry/389-adobe-updates-cloud-numbers

Note how they display differently on the front page layout
http://finalbug.net/blog

thanks

Paul
Hello Paul Murray,

I'm sorry that i forget to save the modified code in your template, please have a check again, it should work fine now.
·
Friday, 30 May 2014 16:00
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray,

Sorry for late reply to this,
1) Why does this happen like this?
>> I have tried to copy your blog post URL paste in https://developers.facebook.com/tools/debug/
>> So everything is work fine now, please check my attachment screenshot below.

2) Is it possible to have both the preview photo for the video and the preview photo for the photo!?!
>> Yes, that was possible to do that, if I'm not getting wrong your requirement here.
>> When you insert image in your blog post, you can click on the customize button > then tick "Enable lightbox" , and you can set it by default from your backend >Easyblog > setting > Media > Media manager > Enable lightbox by default

hope this help.
·
Monday, 19 May 2014 19:29
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex thank you for your prompt response.

First Point:

About the sharing to Facebook, I should have been more precise.
If I share to my own page I see a preview. Please see the first screen shot.
If I share a post to another groups page I do not get a screen shot. lease see the second screen shot.
I suspect that this is related to the second point!?!

Second Point:

Have checked the front (logged in) and back (joomla) and am not seeing this customise button. To date I have been using the JCE Media Manager to insert my pictures. But then they have pictures for videos. i.e. Pop up workflow. There is no reason why I can not use another method for insuring pictures that do not lead to videos. i.e. do not involve the pop up work flow! If this is part of the solution please advise :-)

What I also notice is that when I try the “Select a Blog Image” option (logged in front end) that it takes me to a folder called my “My Media” which does not help as I usually have my blog images somewhere else. Should I be creating a folder here. i.e. in the “Select a Blog Image” section and putting my Blog post Images in there? And then if necessary also hit the customise button where ever it is!?!

Sorry if this is all a little bit convoluted but I think you are getting my drift :-)

thanks

Paul
·
Monday, 19 May 2014 21:35
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray,

Sorry for late reply to this,
I have tired to manually put the post URL in my group and Facebook pages even share in the group, the image is showing out in the group stream and pages stream, check my attachment screenshot below (at the front 3 image).

Or can i have your Facebook group page and Facebook page URL so we can try to reproduce this issues in your facebook group page?

Yes, you can create a new folder from media manager > Create folder > add your folder name. Check my screenshot below.

But the customize button will not show out when you insert in blog image section.

Hope this help.
·
Tuesday, 20 May 2014 12:48
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

Thanks for all your testing. I appreciate it. My own group worked for me as well.

https://www.facebook.com/finalXtraining?ref=hl

As far as posting in other peoples groups I will hold off on this if you do not mind. I have another FB group where I have administrate rights and i will try there, myself. this way I can at least get in and delete the test post. But I reserver the right to get back to you ;-)

I am still a little confused. Completely my fault because I have been using my weird pop up workflow for donkeys years. Like what would be the standard workflow to get a picture showing at the top of a blog post both on the front page and blog posts?

FYI. As of now my workflow is a little twisted. I have multiple bloggers and each blooger puts there images in a folder here:

iamges/easyblogimages/folder with user number of blogger

In the data base I am registered as user 62

thus in my case i have

iamges/easyblogimages/62

It goes on

iamges/easyblogimages/62/2014

and on

iamges/easyblogimages/62/2014/1stquater
iamges/easyblogimages/62/2014/2ndtquater

etc

Please advise

thanks

Paul
·
Tuesday, 20 May 2014 14:24
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray,

You're welcome, we will glad to help you as much as we can.
Okay, keep us updated then.
I am still a little confused. Completely my fault because I have been using my weird pop up workflow for donkeys years. Like what would be the standard workflow to get a picture showing at the top of a blog post both on the front page and blog posts?

Yes, you can select one of the blog image in your blog post, show this blog image will always display on top.

FYI. As of now my workflow is a little twisted. I have multiple bloggers and each blooger puts there images in a folder here:

Yes, by default when a new user upload some image in media manager, then the system will automatically create one folder like "user-id" folder, if the user create one new folder, then the new folder will under like -> /images/easyblog_images/userID/newFolder/imageFile

Hope this help.
·
Tuesday, 20 May 2014 16:05
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

I think I am almost there. Usually I upload a bunch of photos manually via FTP so this is all a little bit new to me :-o
That is good to know that what I am doing is unwittingly replicating the standard ES workflow.

I take it, what you are talking about is all happening in the front end as I see no way to do this in the back end. Correct?
In the Joomla back end to the best of my knowledge I have only 2 ways to insert photos the standard Joomla insert picture button and the advanced JCE media manager button. (Screen shot 1&2)

In the front end there is the little “Upload Media from my Computer” button which works, just used it for the first time after posting several 100 posts to date!!! (Screen shot 3)
But I am not seeing that little box on the side where it says “Lightbox” (Screen shot 4)

Am I correct in thinking that I need use the "Select Blog" image section for the main blog image and the "Upload Image" for all other images and all of these images will get put automatically into the user X id folder in the Easy Blog Images folder?

thanks

Paul
·
Tuesday, 20 May 2014 17:19
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

Eureka. I´ve really almost got it now.

I have been missing those little arrows next to the folders on the right hand side!

More within the next half hour

best

Paul
·
Tuesday, 20 May 2014 17:29
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

Ok made some progress with your help

Can you please confirm that I am doing this correctly?

Am I correct in thinking that I need use the "Select Blog" image section for the main blog image and the "Upload Image" for all other images and all of these images will get put automatically into the user X id folder in the Easy Blog Images folder?

There are a couple of things that I am noticing.

As far as I can see. I can only add an image as a main Blog header to the very top of the post? I can not for example have an image appear after paragraph 2 in a post and as a preview image on the front page layout. It is really a all top of post deal?

What I a noticing is that I need to do some aligning for the images.

e.g. On the front page layout the images that I insert with my JCE pop up layout are not aligned to the left.
e.g. On the Blog post itself the images are also aligned differently. i.e the first image shifts slightly to the right!

In your experience what would be the best way to get all of these images to align up as painless as possible and still have the formatting look really good?!?
I am open to any suggestions that you might have about the overall look and feel of the Blog posts. Personally I think they aesthetically look horrible at the moment.

thanks

Paul
·
Tuesday, 20 May 2014 18:07
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray,

Sorry for late reply to this,
Yes, For the media manager is available for frontend and backend, check my screenshot 1.

Am I correct in thinking that I need use the "Select Blog" image section for the main blog image and the "Upload Image" for all other images and all of these images will get put automatically into the user X id folder in the Easy Blog Images folder?
>> Yes, it will store in the userID folder.
>> Also you can manually move all the photo to under the userID folder, then the image will show out when you select the image.

As far as I can see. I can only add an image as a main Blog header to the very top of the post? I can not for example have an image appear after paragraph 2 in a post and as a preview image on the front page layout. It is really a all top of post deal?
>> Yup, by default each blog post only can add 1 blog image, and the blog image is display on top of the content and align at middle.
>> Yes, when you insert the image from media manager, you can set the image align from your JCE editor.

What I a noticing is that I need to do some aligning for the images.
e.g. On the front page layout the images that I insert with my JCE pop up layout are not aligned to the left.

>> Actually you can adjust from your backend > Easyblog > Theme > select your theme > click blog image tab > frontpage
>> check my second screenshot.

e.g. On the Blog post itself the images are also aligned differently. i.e the first image shifts slightly to the right!
>> Because by default the blog image is display on top of the content and align at middle.
>> If you would like to make it align to left, you can use CSS to hack it.

Hope this explanation help.
·
Wednesday, 21 May 2014 13:53
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

>> Yes, it will store in the userID folder.
>> Also you can manually move all the photo to under the userID folder, then the image will show out when you select the image.

great thanks

>> Yup, by default each blog post only can add 1 blog image, and the blog image is display on top of the content and align at middle.
>> Yes, when you insert the image from media manager, you can set the image align from your JCE editor.

Will check the voices section and request this feature or vote for it if is not in there already
Still find this all a little bit confusing. But I will play with it a little

>> Actually you can adjust from your backend > Easyblog > Theme > select your theme > click blog image tab > front page
>> check my second screenshot.

Great thanks I found this and after some frustration I figured out that I need to press the Clean Images Button! One less problem.

>> Because by default the blog image is display on top of the content and align at middle.
>> If you would like to make it align to left, you can use CSS to hack it.

To recap. If I understand things correctly.

Getting the images to align manually:

I need use the "Select Blog" image section for the main blog image (front end only)
I can use the Joomla Media Manager, Easy Blog media manager or JCE Media Manager for all other images
I can use one of the above Media Managers to format the alignment on the Blog

I am sure you know about the LCD (Lowest Common Denominator)

I reckon the only way to get every thing to align with out hacking is to use a Media Editor of my choice to align all images in the center. The Front page image will be aligned in the center any way. Wow I am just a genius

That simple?

thanks

Paul
·
Wednesday, 21 May 2014 16:46
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

I have played with this and centering the images looks. Excuse my language! Crap.

Here is another idea.

I must be able to set the width of the Blog some where.

If all my images are 600 pixels wide and if my text is 600 pixels wide. Then what could possibly go wrong?

Would that not be a good solution?

best

Paul
·
Wednesday, 21 May 2014 17:14
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul,

You're welcome
Yes, that was simple, you can use that what you mentioned some other tools to make it your requirement
Hmm can i have a sample to look for it? Because I hard to tell you which is the better solution with it.
·
Wednesday, 21 May 2014 17:46
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

The first screen shot shows the main blog image centred and everything else on the left.
The second Screen shot shows every cantered
The Third screen shot shows my typical Blog post with videos which is what I usually do!
The fourth screen shot shows the front page layout with a Blog Post up top which is the main image for a post and in the second blog post there is an image which is not set as the main image but is still being shown. I think this has to do with my JCE pop up workflow. There is somewhere in the preferences where this is set up to allow this option!

Here is an e.g. of how I am beginning to think this should work:

http://www.fcp.co/?view=featured

I know that they are on K2 but is it not possible to replicate this?
For the following
A) Front Page Layout
B) Blog Post with images including main Blog image
C) Blog Post with images linked to videos

Thanks for your patience on this

best

Paul
·
Wednesday, 21 May 2014 18:43
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray,

Sorry for late reply to this,
Please find the answers to your queries below.
1. The fourth screen shot shows the front page layout with a Blog Post up top which is the main image for a post and in the second blog post there is an image which is not set as the main image but is still being shown. I think this has to do with my JCE pop up workflow. There is somewhere in the preferences where this is set up to allow this option!
>> I have applied some fixes in this file JoomlaFolder\components\com_easyblog\helpers\helper.php
>> You should backup this file because that hack was done by Adelene for everytime you update to latest version of Easyblog.
>> When you click the image from frontpage, it will pop up the video now. But I'm not sure that the blog image is it can meet your requirement here.


http://www.fcp.co/?view=featured

I know that they are on K2 but is it not possible to replicate this?
For the following
A) Front Page Layout
B) Blog Post with images including main Blog image
C) Blog Post with images linked to videos

A) Front Page Layout
>> Because first blog post in your blog frontpage is using the blog image and that was different with your other post, if you would like to make your all image align to middle so i can use CSS hack for you.

B) Blog Post with images including main Blog image
>> Do you mean that you would like to show the blog image and other image in blog frontpage?

C) Blog Post with images linked to videos
>> Yes, the images should be can link to video, because you're tried this using the JCE mediabox.

Hope this help.
·
Thursday, 22 May 2014 14:03
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

This is all a little trick. Maybe a process of elimination is the way to go. On the link to fcp.co. you can see how when you scale stuff every thing has the same width. text and photos.

My question to start with is this possible in Easy Blog?
Or does this happen in the template?
To have this work as it does (on tcp.co) where do you think, they align their image? Left/Middle/Right

If this involves major hacks I will not be able to go down this route as I currently do not have the budget.

Depending on the answer to the above I can give you a more informed answer.

Sorry for answering your question with more questions it is just that if you are going to start hacking something, I do not want to waste your time with hacking the wrong thing for the wrong reason etc

thanks

Paul
·
Thursday, 22 May 2014 16:14
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray,

I'm really sorry that delayed of this reply,
It okay, we will glad to help you as much as we can, I have tried reproduce in my local, it seems like the text display is not align full, so I apply some CSS hack so it will be display on similar with your sample site you provide to us, check my screenshot below and see is it meet your requirement here?
* ALL is using the blog image
·
Monday, 26 May 2014 14:18
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

Thanks for the offer of hacking this for me. Yeah the screen shots look good. Like on the sample Site. It looks as if the text goes the full width of the image regardless of how Zoomed in/out you are. This definitely the way I want to go. For all images and text on the front page and in the blog posts. We understand each other :-) thanks

Paul
·
Monday, 26 May 2014 15:03
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray,

You're welcome, if you need further assistance of this, so we have to inspect in your site element and provide a CSS hack and suit with your requirement.
·
Monday, 26 May 2014 15:21
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

When I look at finalbug.net it is pretty much the way it used to be. Do you need anything from me to implement your hack or do I just need to wait so that you have more time? I realise that this is very cool what you are doing and do not want to stress about it. Just trying to get some kind of idea. When this could be ready?

thanks as a always

Paul
·
Tuesday, 27 May 2014 13:30
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray,

Sorry for late reply to this,
I have applied the CSS code in this file -> JoomlaFolder/templates/jsn_corsa_pro/css/template_pro.css

div.blog-text.clearfix.prel {
margin-right: 60px !important;
}

#ezblog-posts .eb-photos {
position: relative;
margin: 0 0 10px 0 !important;
}

What i suggestion is you have to insert all the blog image in your each blog post and set your text to full align, then it will display more properly.
·
Wednesday, 28 May 2014 13:58
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Arlex

My understanding of CSS is very limited. But when I look at the Site the difference that I am seeing is that when I look at the front page layout the “preview” photos are align correctly regardless of whether they are coming from a Blog post where I am using my JCE Pop up work flow or from a Blog post where I am using EB to set the preview image for a photo.

Further I have set the text alignment as you suggested and that definitely helps on the Blog posts themselves.

There are 3 things that I am noticing as of now.

Bbbbbbbut first. Can we make these changes in a standard EB template. EG simplistic. The reason being that I am very unhappy with my Corsa Template and will be switching to something else ASAP. EB simplistic is probably a good place to start :-) I would have mentioned this earlier but I was not clear about where you would be making the changes.

What I am noticing.

1) When I go here:
http://finalbug.net/blog/entry/390-editing-a-documentary-in-fcp-x-part-01

The top image is not aligned with the images below.
Maybe I need to do this by selecting the image in an editor and applying a format!
Maybe this is a hack. I do not know!?!

2) When I go here:
http://finalbug.net/blog/entry/390-editing-a-documentary-in-fcp-x-part-01

Whilst the text is aligned better now “full align” it does not align to the length of the photos.
Is there a way I can do this?
Or is this a hack?

3) When I go here:
http://finalbug.net/blog
The text is not “full align” again…
Is there a way I can do this?
Or is this a hack?

thank you for your patience

best

Paul
·
Wednesday, 28 May 2014 16:00
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray,

I have checked in your CSS issues, it seems like your Jsn theme is not updated, check my screenshot below.
For our latest version theme already removed that line of code, so the blog image will be okay now.

And I help you applied 1 more CSS code for this text align justify.

#eblog-wrapper .blog-text {
text-align: justify;
}

please have a check.
·
Wednesday, 28 May 2014 18:32
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Arlex

Can you please make these changes in the Easy Blog Template: simplistic.

>>Bbbbbbbut first. Can we make these changes in a standard EB template. EG simplistic.

Sorry if this was not clear but I do not want to use the Corsa Template.

Will switch to "Simplistic" in the back end now.

thanks

Paul
·
Wednesday, 28 May 2014 21:51
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray,

Sorry for late reply to this,
In my opinion, the "Origami" theme is more meet your requirement here.
Can you please have a look.

I applied this CSS in your template file -> JoomlaFolder/templates/jsn_corsa_pro/css/template_pro.css

div.blog-text.clearfix.prel {
margin-right: 50px;
}

#ezblog-posts .eb-photos {
position: relative;
margin: 0 0 10px 0;
}

#eblog-wrapper .blog-text {
text-align: justify;
}
·
Thursday, 29 May 2014 02:16
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

I have had a quick look at your suggestion = "Origami" theme and yes you are absolutely right. It already looks better. I will take another look at it first thing tomorrow but yes definitely the way to go

best

Paul
·
Thursday, 29 May 2014 04:45
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray,

Okay, keep us updated then.
·
Thursday, 29 May 2014 11:01
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

It looks almost perfect.

The text aligned with images pretty much every where.

i.e. in blog posts with photos which are just photos and photos that are linked to videos.
i.e. the blog posts on the main page that are using the Stackideas preview photo!

The only thing I am noticing is if you go to the front page layout.

The photos for posts which are inserted the JCE way are not aligned with the text.

e.g. the second post on the from page. "ADOBE UPDATES & CLOUD NUMBERS"

The text is a little bit too wide.

Can you address this?

That is pretty much everything from my end. Definitely looks way better than before.

thanks

Paul
·
Thursday, 29 May 2014 17:43
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray,

I have tried to applied this CSS code in JoomlaFolder/templates/jsn_corsa_pro/css/template_pro.css


#eblog-wrapper .teaser-image.clearfix
{
margin: 3px !important;
max-width: 100% !important;
}

And see how it goes? Please advise.
·
Thursday, 29 May 2014 18:26
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Arlex

Almost, almost perfect. I have the feeling that the text is still a little too wide. I have no idea how many pixels!?!

If you look at the post NEW 4K Cameras at NAB 2014, then I think you see what I am talking about more clearly.

Look t the "T" for eg from the first sentance. "There are clearly..."

I recokon that the middle of the "T" is pretty much where the image ends. Or in other words the top left hand part of the "T" extends beyond the image.

Sorry for being such a perfectionist but I think you understand :-)

Can you please fine tune a tiny, little bit more.

thanks

Paul
·
Thursday, 29 May 2014 19:00
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray ,

Sorry for late reply to this,
Can you provide some screenshot regarding this? Because I have tried to check in this blog post you mentioned and look for the t and "T", it seems like okay for me. Please advise.
·
Friday, 30 May 2014 00:28
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

Sorry, I meant to attach a file but forgot

thanks

Paul
·
Friday, 30 May 2014 02:47
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul,

Sorry for late reply to this,
I have tried adjust the margin to 0px, can you clear all the cache and see is it showing more better now?

#eblog-wrapper .teaser-image.clearfix
{
margin: 0px !important;
max-width: 100% !important;
}
·
Friday, 30 May 2014 11:20
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

I am not seeing any change even after clearing the Cache. Could you double check for me please

I think you can see it most clearly on the "NEW 4K CAMERAS AT NAB 2014" post on the front page layout. For e.g. look at the first letter T.

thanks

Paul
·
Friday, 30 May 2014 14:47
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Arlex

That looks perfect now. Thank you. I appreciate you taking the time to hack this for me It certainly looks way better than about a week ago. Hurahhhh.

best

Paul
·
Friday, 30 May 2014 16:17
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul Murray,

You're welcome, have a great Friday

I will mark this thread as resolved and lock it to avoid any confusions in the future, but if you need any help please feel free to start a new thread in our forums.
·
Friday, 30 May 2014 16:27
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex

Got it. Thanks again

Paul
·
Friday, 30 May 2014 16:37
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Paul,

You're welcome
·
Friday, 30 May 2014 17:11
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post