Random image in an article

Question

I've built my own template so that when someone creates an article, the image on the top ( like an intro image ) has a width of 100% and its own height ( could be 200px or whatever ). Now someone decided to create a new article and put more than just one picture in the article with their own width, position etc. But because of my intro image they've all got a width of 100%.

My first thought was to create a module for these pictures, but I can't always create an article for someone and put a module around it because he wants his picture for example on the left with 29,97% width ( or 65% it doesn't matter ).

Does anyone know a solution for this?

I appreciate all the help and comments!

EDIT: Thank you all for helping me! Unfortunately I can only accept one answer, so I chose @FFrewin because his answer listed a few more ways to handle this problem but the other answers helped me out too!

Answer 1

This might not be the exact answer you are looking for, but if it is for a full website you are developing and not only for a template that you want to distribute, then the following ideas could work well.

Generally, what Johanpw suggests is the quickest solution and can be applied easily. Personally, I would likely have combined things from all the other answers and maybe go even further.

Some of the various possibilities that are available:

A template override is one of my favorites ways, as I can use my own mark up, conditions and classes on the elements.

In addition and depending on the requirements, I could implement something of the following:

• Extra custom fields on the article, for images or slideshows. The Aixeena CCK, is an easy to implement and flexible solution for such tasks.

• Additional Custom Editor Buttons to insert additional images of predefined sizes. There are slideshow/images extensions that provide such buttons to allow image insertion.

• There are also extensions that provide the ability to insert code snippets in the article body, with predefined markup. For example, Content Templater by regular labs is handy tool, or RokCandy by rockettheme. They allow you to build pre-made blocks of code that the end user can easily insert. Your pre-made code can hold mark-up and classes, that you will display in a certain way in the front-end.

• Also in JCE editor you can create certain classes/styles, so the end user can easily pick-up from a drop-down field and apply it on certain elements of his content. You could create a few style, like small-left, small-right, medium-left, full-width and train your users on how to use apply them.

Answer 2

You have to use a more specific CSS selector in order to target only the main image, and not all images added to an article.

The main article image (added through the "Images and links" tab in the article editor) are usually displayed within a <div class="item-image">, so you can simply change your CSS to target this image only:

.item-image img {
    width: 100%;
    height: auto;
    /* Add your styles here */
}

Answer 3

Some ideas:

• Use the nth or :first selector in css, so only the first image in that area is 100%
• Add new style/styles they can select via the WYWIWYG using the editor.css file in your template - they can then choose what width an image should be by using this.
• Use the Full Article Image for your top image, and apply a style that only applies to that area. By default I think that would be .item-img image, but you can always update the article layout in your template's overrides to make this work how you want.
• Use max-width instead of width, and tell them they should always make the main image X pixels or above. Stretching images above their natural size is never a great idea anyway as they pixellate.

Answer 4

If you want force all articles design, you can create a template override for articles that strip all images from the article, put the first as you want (100%) and create a gallery for the other images. This way requires some php coding.