Hello

Would you have a URL to an example of your images?

Ciaran

Hi Ciaran,

thanks for reply.

I am converting old J3 web in to the J4 web. I want to align blog images (200x200 px) to the left side as is visible in attached images.

I have guessed, that adding "left" in "joomla options" of Joomla 4 works (but not good with your template). Please see attached image "2 - forum - align images - J4 web + J51 template.png".

Thanks for correcting J51 templates for J4 in meaning that text behind (left aligned) images will be correctly aligned as is visible on radiologos.sk (J3).

Thank you,
Radovan

Hello

Would you have a URL to your second screenshot?

Ciaran

Hi, for now it is on localhost (XAMPP), but I can put it somewhere online.

Because it is on upgrade process, I would like to send you private info about live URL. Where to send it?
Thank you.

Hello

Details can be sent to info@joomla51.com. Please include a URL to this post in your email for our reference.

Ciaran

Thank you

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.blog-item {

    display: block;

}

.blog-item .left {

    margin-right: 1rem;

}

dl.article-info {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}

dl.article-info > * {

    margin-bottom: 0;

}

This include the left class to your style similar to that of the Cassiopeia template.

Ciaran

Hi Ciaran,

thank you for your attempt. It partially works. I have added your code to J51 custom css area. Result is visible on link from previous mail. Final look should be similar to http://www.radiologos.sk/ or to that light blue version with logo on the top left.

Is there any native solution for J51 template(s) for this case of left/right align of intro images without custom css?

So intro imge will be on left (right) and text, heading, article info will be correctly aligned.

Thank you.
Radovan

I have found:

in Everly template (without any custom css in template) is necessary to:

0 - In "editing layout" (.../administrator/index.php?option=com_config&view=component&component=com_content) is used for
"Intro Image Class" float-start image-left left (used 200x200px intro image)
1 - remove: "display: flex;" from ".blog-item" in "css/base/template.css"
2 - remove: "display: inline-block;" from ".article-info" in "css/nexus.min.css"
3 - is missing "icon-calendar" for "dd.published"

What is the best way to have this modifications in view of future updates? Or can you fix this in template, test and publish newer version for this Everly template? And maybe this is also problem in all other templates (to have not correctly left/right aligned intro images)

Hello

Thank you for the update. We have just created an update for the Everly template to include utility classes for full article images, similar to that of the Cassiopeia template ('left', 'center' and 'right'). We have also added a fix for the calendar icon issue as mentioned above.

Ciarán

Hi Ciaran,


1 - thank you for upgrade, but it seems that nothing is changed (updated version 1.0.5 was installed as normal Joomla plugin or template over old template). Is it necessary to uninstall previous version of template before?

2 - there are 2 places where you can add style for intro images (e.g. "left": 1st is in Joomla article options, and 2nd is in the menu setting for blog layout - every option's render frontage not correctly.

2 - where in the template, or on your page (https://www.joomla51.com/joomla-tutorials) is information about align intro or main article images? In template, under "General" is nothing about images at all.

3 - in Joomla (.../administrator/index.php?option=com_installer&view=update) is no information about updated version of template. How do I know if there is an updated version? In Joomla, under upgrade section, should be some information... So people would know that they should download new version of template or other your products.

4 - after login to J51 site, under "My downloads" is only entire ZIP with template and Joomla demo. So I have to download 43MB... after unzip it has 101MB...

5 - after upgrade, in text area (We are proud to present our latest addition 'Everly' to... ), is not information about updated date, it would be nice to see it there, so to be sure of installed latest version. And under .../index.php?option=com_templates&view=templates&client_id=0 is correct version 1.0.5, but with wrong date (there is "March 2022"


Thank you,
Radovan

Hello

1. Would you have a URL to an example of your article with the left class applied?

2. I am not sure if I undertstand you correctly. Could you please detail your issue further? Note that although the Joomla template Cassiopeia templates have classes for aligning images, it is not expected that all Joomla templates will have the same classes available to them. By default these classes are not included with the majority of our templates. Admittedly it was I who implemented these classes to the Joomla template.. https://github.com/joomla/joomla-cms/pulls?q=is%3Apr+author%3Aciar4n+is%3Aclosed

3. Sorry to say e do not have an update server for our templates. The latest version of our templates can be found mention on our template download page.

4. We do not have individual downloads for the template demo and template. Each are bundled in a single download.

Ciaran

Hi Ciaran,

1 - in "Articles: Options", under "Editing Layout", I have for "Intro Image Class" classes: "left image-left"

2 - in "Menus: Edit Item" (Featured Articles) I have under "Blog Layout" for "# Intro Articles - Article Class" classes: "left image-left"

3 - if there is only "left" css style for menu (featured articles), it is not working good, but "left image-left" work better, but still not good

4 - link to template is, as was last time, and is sended to info@joomla51.com (with link to this post)

Thank you,
Radovan

Hi Radovan

Considering the size of your images, to amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.image-left .blog-item .item-image, .image-right .blog-item .item-image {

    flex: 1 0 20%;

}

Default width is 40%.

Ciaran

Hi Ciaran,

1 - thanks for tip about change 40% to 20% for flex
2 - is working for some blog items, but for other not - see attached images
3 - "left image-left" was generating big space between image and text, so now I use only "image-left" for menu and article options
4 - on my web (link from email) I have added category blog layout. So there are 4 menu items, but for this case are interesting only "Home (J51)" and "Blog (Category Blog)"
5 - there is no css style for "Image Class (for intro image)" in the articles at all - only in article options and menu items

How to fix it?
(I am tired from flex and css grid...)

Thank you,
Radovan

Hi Radovan

You might also try the Bootstrap float classes: https://getbootstrap.com/docs/5.3/utilities/float/.

Regards
Rolf

Hi Rolf,

thanks for try, but bootstrap float classes not working at all. If you use Cassiopeia template, with css class for menu item "image-left", it displays articles text correctly aligned in one row. Not absolutely, it may be because of flex width not at value 20% (of width).
I have created another menu item, image is attached. Live web is the same as was last time.
So for me, bad alignment of text (J51 Everly template) is a problem of "J51 Everly" template because Cassiopeia display same text correctly.
What you think? Can you please fix this problem?

Thank you,
Radovan

Hi Radovan

Sorry, but I cannot help you. That should be Ciarán's task.

I just wanted to point out alternate ways to align images, because I have started heavy use Bootstrap classes recently.

Regards
Rolf

Hi Radovan

Could you provide URLs directly to examples of your issues? Out of the box, the Everly template does not include the same utility classes as Cassiopeia so it is a little difficult to replicate your issues locally.

Ciaran

Hi Ciaran,

1/
in principle, CSS styles do not have to be called the same. It is important that they align the text and images correctly. That is, for example, "image-left" should contain something like "float:left". The goal is to align smaller images to the left and text to the right correctly, and similarly for right alignment

Install a blank Joomla 4 (5) website, and create 5-7 articles and use smaller images for them (for example 200x200 px). Intro images should be left-aligned (and text should be right behind the images).
You can also use https://dummyimage.com/200x200/848484/ffffff.jpg for intro images.

Create one menu item with "blog featured" and another menu item for "category blog".
Does it show you the correct align of intro images and text?

Here are the URLs:
- category blog: http://template.radiologos.sk/index.php/blog
- featured articles: http://template.radiologos.sk/index.php/home-j51

2/
it would also be necessary for these CSS styles to be listed in the template (administration of Joomla - see attached image)
such as:
For blog layout you can use: image-left, image-right... For tables you can use these styles: table-1, table-2,...

3/
Do you also need access to the administration?

Thank you,
Radovan

Thank you

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

@media (min-width: 768px) {

  .image-left .blog-item .item-image, 

  .image-right .blog-item .item-image {

    flex: 1 0 20%;

    max-width: 20%;

  }

}

Ciarán